JavaScript（二）快速入门

淡淡的烟草味﹌ 2024-04-17 06:05 69阅读 0赞

> 本文为个人学习、使用JavaScript过程中的内容总结，结合所学、网络资源、博客等。  
>   
> 详细专栏教程可参考：JS官方文档、菜鸟教程。  
> [一、菜鸟教程][Link 1]  
>

> 推荐，廖雪峰个人博客，细节描述的较多。此外博客中含有在线编辑器，可实时运行DEMO  
> [二、廖雪峰JS教程][JS]

> 前言：任何学习资料的最基础部分是容易学习的，同时若有错误之处，也是最容易误导初学者的，本文系列前两章（简介、快速入门两章）中涉及基本定义、基础的大部分内容直接引用、参考了JS文档、W3CSchool、菜鸟教程、廖雪峰的个人博客。

*  目录：
    
     *  [简介][Link 2]
     *  [快速入门][Link 3]
     *  [字符串][Link 4]
     *  函数：
     *  标准对象：
     *  面向对象编程：
     *  浏览器：
     *  jQuery：
     *  错误处理：
     *  underscore：
     *  Node.js

--------------------

# 二、快速入门 #

*  基本语法
 *  数据类型
 *  如何使用JS
 *  基本用途

--------------------

## 基本语法 ##

和java类似，每行以；分号结束。

这篇文章讲的详细：https://www.liaoxuefeng.com/wiki/1022910821149312/1023442583285984

## 数据类型： ##

**值类型(基本类型)：** 字符串（String）、数字(Number)、布尔(Boolean)、对空（Null）、未定义（Undefined）、Symbol  
**引用数据类型：** 对象(Object)、数组(Array)、函数(Function)

> 注：Symbol 是 ES6 引入了一种新的原始数据类型，表示独一无二的值

--------------------

这篇文章讲的详细：https://www.liaoxuefeng.com/wiki/1022910821149312/1023020925712064

*  Number  
    js不区分整数和浮点类型，统一用Number表示，例：

123; // 整数123
    0.456; // 浮点数0.456
    1.2345e3; // 科学计数法表示1.2345x1000，等同于1234.5
    -99; // 负数
    NaN; // NaN表示Not a Number，当无法计算结果时用NaN表示
    Infinity; // Infinity表示无限大，当数值超过了JavaScript的Number所能表示的最大值时，就表示为Infinity

*  字符串  
    以单引号’或双引号"括起来的任意文本，比如’abc’，"xyz"等
 *  布尔值  
    一个布尔值只有true、false两种值。也可通过布尔运算计算出来，可进行与、或、非运算。

true; // 这是一个true值
    false; // 这是一个false值
    2 > 1; // 这是一个true值
    2 >= 3; // 这是一个false值

&&与运算，全为true，才为true

true && true; // 这个&&语句计算结果为true
    true && false; // 这个&&语句计算结果为false
    false && true && false; // 这个&&语句计算结果为false

|| 或运算，只要一个为true，则为true

false || false; // 这个||语句计算结果为false
    true || false; // 这个||语句计算结果为true
    false || true || false; // 这个||语句计算结果为true

！非运算，单目运算符，可将true置为false，false置为true

! true; // 结果为false
    ! false; // 结果为true
    ! (2 > 5); // 结果为true

常用于条件判断使用场景

var age = 15;
    if (age >= 18) {
        alert('adult');
    } else {
        alert('teenager');
    }

*  比较运算符  
    可使用>、<、>= 等运算符对Number类型进行比较，结果是布尔值。

2 > 5 //false

**PS：注意== 和 === 两个比较运算符的不同、NaN的特殊性**  
第一种是==比较，它会自动转换数据类型再比较，很多时候，会得到非常诡异的结果；

第二种是===比较，它不会自动转换数据类型，如果数据类型不一致，返回false，如果一致，再比较。

**推荐使用===比较。**

NaN这个特殊的Number与所有其他值都不相等，包括它自己：

NaN === NaN; // false

唯一能判断NaN的方法是通过isNaN()函数：

isNaN(NaN); // true

最后要注意浮点数的相等比较：

1 / 3 === (1 - 2 / 3); // false

浮点数在运算过程中会产生误差，因为计算机无法精确表示无限循环小数。要比较两个浮点数是否相等，只能计算它们之差的绝对值，看是否小于某个阈值：

Math.abs(1 / 3 - (1 - 2 / 3)) < 0.0000001; // true

*  对象  
    js中的对象是一组K-V的无序集合，如：

var person = {
        name: 'Bob',
        age: 20,
        tags: ['js', 'web', 'mobile'],
        city: 'Beijing',
        hasCar: true,
        zipcode: null
    };

js中的键都是字符串类型，值可以是任意类型。键也可称为对象的属性。  
获取属性直接使用对象.属性：

person.name; // 'Bob'
    person.zipcode; // null

*  变量  
    变量的定义和C/C++/JAVA等语言相似。JS中变量名是大小写英文、数字、$和\_的组合，且不能用数字开头，不能用JS关键字。用var定义变量。**PS：变量名可以使用中文，但强烈不推荐。**

var a; // 申明了变量a，此时a的值为undefined
    var $b = 1; // 申明了变量$b，同时给$b赋值，此时$b的值为1
    var s_007 = '007'; // s_007是一个字符串
    var Answer = true; // Answer是一个布尔值true
    var t = null; // t的值是null

和静态语言（如java）相比，JS是动态语言，意味着变量本身类型不固定，即，可重复赋值。

JS中可以这样：
    
    var a = 123; // a的值是整数123
    a = 'ABC'; // a变为字符串
    
    Java中如果这样，就会报错：
    
    int a = 123; // a是整数类型变量，类型用int申明
    a = "ABC"; // 错误：不能把字符串赋给整型变量

*  null和undefined

null表示一个“空”的值，它和0以及空字符串’‘不同，0是一个数值，’'表示长度为0的字符串，而null表示“空”。

在其他语言中，也有类似JavaScript的null的表示，例如Java也用null，Swift用nil，Python用None表示。但是，在JavaScript中，还有一个和null类似的undefined，它表示“未定义”。

*  数组  
    数组是一组按顺序排列的元素的集合，集合的每个值称为元素。JS中数组可以包括任意数据类型，  
    通过索引访问元素，从0开始，如：

var arr = [1, 2, 3.14, 'Hello', null, true];
    arr[0]; // 返回索引为0的元素，即1
    arr[5]; // 返回索引为5的元素，即true
    arr[6]; // 索引超出了范围，返回undefined

此外，可使用Array()函数创建数组：

new Array(1, 2, 3); // 创建了数组[1, 2, 3]

**PS：基于代码可读性等因素，强烈推荐使用\[\]创建数组。**

*  strict模式  
    JavaScript在设计之初，为了方便初学者学习，并不强制要求用var申明变量。这个设计错误带来了严重的后果：如果一个变量没有通过var申明就被使用，那么该变量就自动被申明为全局变量：

i = 10; // i现在是全局变量

在同一个页面的不同的JavaScript文件中，如果都不用var申明，恰好都使用了变量i，将造成变量i互相影响，产生难以调试的错误结果。

使用var申明的变量则不是全局变量，它的范围被限制在该变量被申明的函数体内（函数的概念将稍后讲解），同名变量在不同的函数体内互不冲突。

为了修补JavaScript这一严重设计缺陷，ECMA在后续规范中推出了strict模式，在strict模式下运行的JavaScript代码，强制通过var申明变量，未使用var申明变量就使用的，将导致运行错误。

启用strict模式的方法是在JavaScript代码的第一行写上：

'use strict';

这是一个字符串，不支持strict模式的浏览器会把它当做一个字符串语句执行，支持strict模式的浏览器将开启strict模式运行JavaScript。

'use strict';
    // 如果浏览器支持strict模式，
    // 下面的代码将报ReferenceError错误:
    
    abc = 'Hello, world';
    console.log(abc);

## 基本用法 ##

*  直接在页面（html页面）标签内写js。

<!DOCTYPE html>
    <html>
    <head>
    <script>
    alert（“我的第一个JS”）；
    </script>
    </head>
    <body>
    ……
    </body>
    </html>

<!DOCTYPE html>
    <html>
    <body>
    .
    .
    <script>
    document.write("<h1>这是一个标题</h1>");
    document.write("<p>这是一个段落</p>");
    </script>
    .
    .
    </body>
    </html>

*  单独写在一个.js文件中，页面引入使用。

<!DOCTYPE html>
    <html>
    <body>
    <script src="myScript.js"></script>
    </body>
    </html>

## 基本用途 ##

*  直接写入HTML输出流
 *  响应键盘、鼠标等事件
 *  改变HTML内容
 *  改变HTML图像
 *  改变HTML样式
 *  验证输入  
    ……

> 上一篇：[JavaScript（一）简介][Link 2]  
> 下一篇：[JavaScript（三）字符串][Link 4]

[Link 1]: https://www.runoob.com/js/js-tutorial.html
[JS]: https://www.liaoxuefeng.com/wiki/1022910821149312
[Link 2]: https://blog.csdn.net/qq_35206244/article/details/100072779
[Link 3]: https://blog.csdn.net/qq_35206244/article/details/100072972
[Link 4]: https://blog.csdn.net/qq_35206244/article/details/100074719