JavaScript 笔记

html

Hello world

在 HTML 文档中使用 javascript 脚本有两种方式，都是通过 <script> 元素实现的。

<!-- 直接内嵌 -->
<script>
console.log('hello, world!');
</script>
<!-- 外部文件 -->
<script src="hello.js"></script>
<!-- 'hello,js'文件内容 -->
console.log('hello, world!');

如果是少量的 js，可以使用内嵌方式，这种方式的缺点是不易维护，代码不可重用。
如果是大量的 js，建议使用外部文件，这种方式的优点是容易维护，代码可以重用。

javascript 的严格模式'use strict';，因为 javascript 有很多设计缺陷，经常导致一些诡异的 bug，很难发现，为了尽早的发现这些错误，强烈建议使用严格模式！

开启严格模式很简单，只需在脚本的头部或函数的头部添加'use strict';语句，不支持严格模式的浏览器会直接忽略它，因为这是一个普通的语句，没有任何副作用。本文中的所有代码均以严格模式为标准。不考虑宽松模式（正常模式）。

'use strict';
// TODO

function func() {
    'use strict';
    // TODO
}

javascript 允许不在句末写分号，因为它会自动的在句末添加;号。但是强烈建议自己写上分号，不要去省略。我们来看一下自动加分号的隐藏 bug：

'use strict';
function func() {
    return
        'hello, world!';
}
var str = func();
console.log(str); // undefined

因为自动加分号的机制，它实际上等价于：return; 'hello, world!';，而不带返回值的 return 语句实际上就是return undefined;。

数据类型

注释：// 单行注释、/* 多行注释 */。

javascript 标识符
必须以字母、_、$开头，其后可跟字母、数字、_、$。

定义变量
var
这是 ES6（ES2015）之前的唯一方式，var 不能定义局部作用域的变量，使用 var 定义的变量只有两种作用域：全局作用域、函数作用域。另外，var 定义的全局变量其实是全局对象（在浏览器中为 window）的一个属性，也即，对于var a;，可以通过a、window.a来访问，没有区别。但是，它又与直接定义的 window 属性不同，使用 var 定义的全局变量不可以使用 delete 删除。对于同一个用 var 定义的变量，可以再次使用 var 进行定义（应该叫做重新声明），不会有影响。除此之外，var 声明语句会被默认提升至当前作用域的开头（脚本的头部、函数的头部），这种行为称为变量提升（hoisting）。除了 var 语句会被提升外，函数的定义也会被提升（非函数表达式），具体的表现如下：

'use strict';
console.log(a); // undefined
console.log(f()); // 'hello, world!'
var a = 100;
function f() { return 'hello, world!'; }

let
ES6 新增的语法，用来定义一个变量。与 var 不同的是，let 定义的变量有三种作用域：全局作用域、函数作用域、块级作用域。并且，let 定义的全局变量不再是 window 对象的属性，更不能使用 delete 语句删除它。除此之外，不允许使用 let 重复声明同一个变量，let 语句也没有所谓的变量提升。因此，如果可以，请尽量使用 let 定义变量！

const
ES6 新增的语法，用来定义一个常量。因此必须在声明的同时赋初值（即初始化），并且，常量被定义后，不允许被修改（能修改还能叫做常量吗）。除此之外，它和 let 具有一样的特性。

变量初始值
在 C/C++ 中，一个变量如果在定义的同时没有赋初值（即没有初始化），那么它也是有初始值的，对于 static 变量，初始值为 0，对于其他的变量（栈、堆），初始值为垃圾值。

同样的，在 javascript 中，如果在定义变量的同时没有赋初值（如var a; let b;），那么，该变量的初始值为undefined，undefined是一个值，它的类型是undefined（非对象）。

除了 undefined 外，还有一个特殊的值：null，也就是空指针/空引用，null 是一个值，它的类型是Object（对象）。

undefined、null 的相关属性：

'use strict';
console.log(undefined); // 'undefined'
console.log(null); // 'null'
console.log(typeof undefined); // 'undefined' 基本类型
console.log(typeof null); // 'object' 引用类型
console.log(null instanceof Object); // false，因为 null 没有 __proto__ 属性，它只是空指针！

instanceof判断一个对象（哈希表）是否属于某个类型（构造函数）的依据是：obj.__proto__ === Constructor.prototype，因此，null instanceof Object的结果为 false 就不奇怪了。

undefined和null的异同
1. undefined是基本类型，null是引用类型
2. undefined表示变量未初始化，null表示对象的值为空（指针）
3. undefined和null在布尔环境中均被转换为 false
4. undefined在数值环境中被转换为 NaN，null 被转换为 0

数据类型
与 java 一样，javascript 中也分为基本类型（原始类型）、引用类型，同时基本类型也有对应的包装类型（引用类型）。

基本类型（6 种）
boolean：布尔类型。字面值有true、false。
number：数值类型。64位双精度，无穷大+/-Infinity、非数值NaN。
string：字符串类型。使用单/双引号表示字符串，如'hello'、"hello"。
symbol：ES6 新增类型。不过我暂时不知道它有什么卵用。
undefined：未定义类型。字面值只有undefined。
null：空指针类型。字面值只有null（个人认为 null 是值而不是类型）。

基本类型的值是不可变的。

引用类型（对象）
Object：对象。本质是 key-value 键值对，与 Java 中的 HashMap 类似。其中，key 为字符串，value 为任意类型。Object 是所有引用类型的基类（包括 Function、Array）。

• Object对象：{k1: v1, k2: v2, k3: v3}键值对，key 为字符串。
• Array数组：[v1, v2, v3]本质也是键值对，key 为[0, 1, 2, ...]。
• Function函数：function func(param ...) { ... }，函数也是对象。
• RegExp正则表达式：/pattern/flags或new RegExp(pattern[, flags])。
• Date日期时间：Date 时间对象基于 1970-01-01T00:00:00Z 起的毫秒数。
• Math数学对象：Math 是内置对象（非函数对象），包含数学常数及相关方法。
• Error错误/异常：new Error(message)创建异常对象，message 为异常描述。

包装类型（存在自动装箱）
Boolean，布尔类型 boolean 的包装类；
Number，数值类型 number 的包装类；
String，字符串类型 string 的包装类；
Symbol，符号类型 symbol 的包装类。

包装类型的通用方法：valueOf()，用于获取所包装的基本类型值。
包装类型内部的基本类型值是不可变的，但是包装类型自己是可变的。

判断数值
isNaN(testValue)：检测传入的值是否为 NaN（非数值）
isFinite(testValue)：检测传入的值是否为有效值（非无穷大）

小结

'use strict';
/* 变量的类型可在运行时改变 */
let foo; // type: undefined
console.log(typeof foo);
foo = false; // type: boolean
console.log(typeof foo);
foo = 10; // type: number
console.log(typeof foo);
foo = 'hello'; // type: string
console.log(typeof foo);
/* 基本类型与对应的包装类型 */
let bool1 = true; // 基本类型
let bool2 = Boolean(true); // 基本类型(普通函数调用)
let bool3 = new Boolean(true) // 引用类型(构造函数)
console.log(bool1);
console.log(bool2);
console.log(bool3);
console.log(bool1 === bool2); // true
console.log(bool2 === bool3); // false，引用类型比较的是内存地址

一般情况下，不建议使用包装类型，浪费内存，给自己找麻烦。

数据类型转换

• 任意类型 -> boolean：Boolean(value)
• 任意类型 -> number：Number(value)
• 任意类型 -> string：String(value)

一般无需手动将其他类型转换为布尔值，if/while/for 等测试语句会自动转换。
false 值：undefined、null、-0、+0、NaN、''（空串）。
true 值：除了上面给定的值外，其余的值均被自动转换为 true。

字符串转换为数值类型：

• parseInt(string, radix)，从字符串中解析整数。
  
  • string 的前导空白将被忽略；并且会忽略后面的非数字部分。
  • radix 为进制（取值范围为[2, 36]），如 2、8、10、16。
  • 十六进制数值建议以0x/0X开头，八进制数值建议以0开头。
  • 返回解析到的数值 number；如果无法转换为数值，则返回 NaN。
• parseFloat(string)，从字符串中解析浮点数（十进制）。
• +string，单目运算符 +，本质是 Number(string) 的简写形式。

String() 会调用 toString() 方法；拼接字符串可使用 + 操作符（调用 toString()）

'use strict';
console.log(true + '-string'); // 'true-string'
console.log(100 + '-string'); // '100-string'
console.log('str' + '-string'); // 'str-string'
console.log(null + '-string'); // 'null-string'
console.log(undefined + '-string'); // 'undefined-string'
console.log(new Boolean(true) + '-string'); // 'true-string'
console.log(new Number(100) + '-string'); // '100-string'
console.log(new String('str') + '-string'); // 'str-string'

布尔字面量
布尔类型有两种字面量：true、false。

整型字面量
二进制：0b或0B开头
八进制：0o或0O开头（非严格模式可用0开头）
十进制：没有特定前缀
十六进制：0x或0X开头

浮点型字面量
语法：[(+|-)][digits][.digits][(E|e)[(+|-)]digits]
浮点数字面量至少有一位数字，而且必须带小数点或者e/E（10 的 N 次方）

字符串字面量
字符串字面量是由单引号'或双引号"括起来的零个或多个字符。使用单引号和双引号没有区别，但是它们必须成对。单引号中如果需要表示单引号本身，则需要使用反斜杠转义，双引号同理。字符串也有一个 length 属性，它表示 UTF-16 code-unit 码元的数量（这点和 Java 是一样的），因此一个字符串就算只有一个字符，它的 length 也不一定为 1，也有可能为 2（代理对）。

模板字符串
ES6 中的模版字符串提供了一些语法糖来帮助你构造字符串（字符串拼接），模版字符串前后使用反引号`括住，其中可以使用${expression}来插入 js 表达式。同时，使用模版字符串可以很容易的输入一个多行字符串。

字符转义序列

对象字面量
对象字面值使用一对花括号表示，其中可以有零个或多个 key-value 键值对，{k1: v1, k2: v2, k3: v3, ...}。注意，不能在一行的开头使用对象字面量，因为此时的花括号会被当作语句块的开始！其中 key 为字符串类型（暂不考虑 Symbol 类型），value 为 js 任意数据类型。如果 key 并非合法的 js 标识符，则必须使用单引号或双引号括住，并且在访问时也不能通过.来访问，只能使用['key']来访问！因此，强烈建议使用合法 js 标识符来表示 key，避免不必要的麻烦。

数组字面量
数组字面值使用一对方括号表示，其中可以有零个或多个 value 值，[v1, v2, v3, ...]。key 被隐式的声明为 [0, 1, 2, 3, ...] 下标（字符串类型），不过通常使用数字来访问，因此，数组也是特殊的对象。除此之外，数组还有 length 属性，它总是比最大下标大 1，因此它并非表示实际的数组元素个数！

在后面，我们会经常接触到一个词 - 类数组对象，类数组其实就是拥有 length 属性，以及存在 [0, 1, 2, 3, ...] 非负整数的下标 key 的对象，比如函数内部的 arguments 对象就是典型的类数组对象。

数组字面量中的多余,逗号：不建议在数组尾部添加多余的逗号，不过在数组中间，是可以存在多个逗号的，这些下标的值都是undefined，不过，还是建议自己写上 undefined，这样的可读性更好，毕竟很多时候代码都是写给人看的。

正则字面量
正则表达式字面量使用一对正斜杠表示，即/pattern/flags，其中 flags 是正则标志，如是否启用全局匹配、是否忽略大小写、是否启用多行模式等，flags 部分是可选的。

流程控制

语句块：和 Java 一样，语句块也是使用花括号括住。基本语法为：

{
    statement_1;
    statement_2;
    statement_3;
    ...
    statement_N;
}

条件判断
if...else if...else：与 Java 一样，如果只有一条语句，可以省略花括号。
switch...case：语法与 Java 一样，不过可以使用任意类型，使用===判等。

for 循环

for ([initialExpression]; [condition]; [incrementExpression]) {
    statement_1;
    statement_2;
    ...
    statement_N;
}

while 循环

while (condition) {
    // TODO
}

do-while 循环

do {
    // TODO
} while (condition);

break/continue 跳出循环
break：跳出当前循环体，执行循环后面的语句；
continue：结束此轮循环，直接开始下一轮循环。
和 Java 一样，break/continue 后面可以接一个 label 标签，表示用于跳出哪个循环，如果省略，默认跳出 break/continue 语句所在的循环体。具体的演示如下：

'use strict';
outer: for (let i = 0; i < 10; i++) {
    inner: for (let j = 0; j < 10; j++) {
        if (i === j)
            continue outer;
        console.log('i = ' + i + ', j = ' + j);
    }
}

console 输出如下：

i = 1, j = 0
i = 2, j = 0
i = 2, j = 1
i = 3, j = 0
i = 3, j = 1
i = 3, j = 2
i = 4, j = 0
i = 4, j = 1
i = 4, j = 2
i = 4, j = 3
i = 5, j = 0
i = 5, j = 1
i = 5, j = 2
i = 5, j = 3
i = 5, j = 4
i = 6, j = 0
i = 6, j = 1
i = 6, j = 2
i = 6, j = 3
i = 6, j = 4
i = 6, j = 5
i = 7, j = 0
i = 7, j = 1
i = 7, j = 2
i = 7, j = 3
i = 7, j = 4
i = 7, j = 5
i = 7, j = 6
i = 8, j = 0
i = 8, j = 1
i = 8, j = 2
i = 8, j = 3
i = 8, j = 4
i = 8, j = 5
i = 8, j = 6
i = 8, j = 7
i = 9, j = 0
i = 9, j = 1
i = 9, j = 2
i = 9, j = 3
i = 9, j = 4
i = 9, j = 5
i = 9, j = 6
i = 9, j = 7
i = 9, j = 8

for...in 遍历对象的key

let obj = {
    k1: 'v1',
    k2: 'v2',
    k3: 'v3'
};
for (let key in obj)
    console.log(obj[key]); // 不能使用 obj.key！

for...of 遍历可迭代对象
(ES6) 内置可迭代对象：Array、String、Map、Set、TypedArray、arguments。

'use strict';
let arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
for (let i of arr)
    console.log(i);

异常处理

js 的异常处理机制与 java 很相似，使用try、catch、finally、throw四个关键字。js 中的 throw 语句可以抛出任意数据类型，不过强烈建议使用内置的 Error 类型（个人认为使用 Expection 异常更恰当，可惜没有）。还有一点要注意，因为 js 的变量类型是运行时动态确定的，因此 catch 语句最多只有一个。catch 中的 e 变量只能在 catch 块中使用，在其他地方无法使用！

try {
    // 可能发生异常的语句
} catch (e) {
    // 用来处理异常的语句
} finally {
    // 不管是否发生异常，finally 块总是被执行
}

函数

函数定义(声明)

function square(number) {
    return number * number;
}

• JS 与 Java 一样，函数的传参方式都是 值传递。这也就意味着，我们不能在函数内部修改实参本身的值，不过实参所引用的值却可以任意修改（比如 Object），这个和 Java 也是一样的。
• 在 JS 中，函数也是对象，类型是 Function，上述代码就是函数字面量。要说明的是，函数名其实也是一个变量（当然也有一些特别的地方，比如函数定义总是会被提升，而变量定义却不一定，只有使用 var 定义的才会被提升），你完全可以再次给它赋值，比如 func = 100;，此时 func 的类型已经从 Function 变成了 number，这时如果再调用 func，就会报 TypeError，提示 func 不是一个函数。了解这个后，就不难理解“同名函数可以被多次定义，不过只有最后一个生效”的原因了，因为同名函数的多次定义仅仅就是一个普通变量的多次赋值而已，当然也很容易知道，JS 中没有所谓的函数重载。
• 调用函数时，传入的实际参数的数目可以与形式参数的数目不一致，可以更多也可以更少，甚至可以没有。形参的名称只不过为了方便引用，我们可以在函数内部使用 arguments 类数组对象获取传入的所有参数，如果实参比形参少，则未赋值的形参的值默认为 undefined，如果实参比形参多，多出的实参并未被丢弃，它们其实都保存到了 arguments 这个内部对象中，可以使用 arguments[i] 来一一获取传入的实参，i 从 0 开始，实参的数目可以通过 arguments.length 属性获取。

函数表达式

let func = function(number) {
    return number * number;
};

除了传统的 function func(param...) { ... } 方式来定义函数外，我们还可以直接将函数对象赋给一个变量，因为函数也是对象嘛，是对象就可以赋值给变量。因为这是一个完整的赋值语句，所以函数右花括号后必须加上分号。如果需要在函数内部调用自身（或者引用自身），可以使用函数表达式的变量名 func，除此之外，还可以为函数字面量定义一个私有名称，这个函数变量只能在函数内部使用，在外部是无法使用的，调用会提示标识符未定义。比如下面这个例子，用来计算阶乘的函数：

'use strict';
let factorial = function(n) {
    return n < 2 ? 1 : n * factorial(n - 1);
};
console.log(factorial(0));
console.log(factorial(1));
console.log(factorial(2));
console.log(factorial(3));
console.log(factorial(4));
console.log(factorial(5));
console.log(factorial(6));
console.log(factorial(7));
console.log(factorial(8));
console.log(factorial(9));
console.log(factorial(10));

'use strict';
let factorial = function f(n) {
    return n < 2 ? 1 : n * f(n - 1);
};
console.log(factorial(0));
console.log(factorial(1));
console.log(factorial(2));
console.log(factorial(3));
console.log(factorial(4));
console.log(factorial(5));
console.log(factorial(6));
console.log(factorial(7));
console.log(factorial(8));
console.log(factorial(9));
console.log(factorial(10));
console.log(f(20)); // ReferenceError: f is not defined

普通函数 和 函数表达式 的区别：普通函数的声明和定义都会被提升（var 变量是声明被提升，但是定义（赋值）不会），函数表达式不存在所谓的提升，如果使用 var 存储函数表达式，则声明被提升，如果使用 let、const 存储函数表达式，则不存在提升。如下：

'use strict';
console.log(factorial(5)); // 此时 factorial 为 undefined
var factorial = function(n) {
    return n < 2 ? 1 : n * factorial(n - 1);
};

嵌套函数和闭包
JS 的函数与 Java 的函数有一点不同，JS 的函数中可以嵌套定义函数，只要你愿意，你可以嵌套定义任意多层函数。内层函数可以访问外层函数能访问的变量和函数，但是外层函数却不能访问内层函数中的变量和函数。内层函数只能在外层函数中访问，当然，你也可以通过函数返回值的形式将内层函数返回给调用者，这样调用者也可以间接的访问内层函数。定义内层函数通常是为了实现一些非通用的逻辑功能，这个很像 Java 中的私有成员函数，仅限内部使用。

嵌套函数的例子，利用内部函数实现非通用逻辑：

'use strict';
function addSquares(a, b) {
    function square(x) {
        return x * x;
    }
    return square(a) + square(b);
}
console.log(addSquares(2, 3)); // 4 + 9 = 13
console.log(addSquares(3, 4)); // 9 + 16 = 25
console.log(addSquares(4, 5)); // 16 + 25 = 41

返回内部函数，内部函数中引用了外部函数的变量：

'use strict';
function add(x) {
    function f(y) {
        return x + y;
    }
    return f;
}
let fn1 = add(5);
let fn2 = add(6);
console.log(fn1(5)); // 5 + 5 = 10
console.log(fn2(5)); // 6 + 5 = 11
console.log(fn1(8)); // 5 + 8 = 13
console.log(fn2(8)); // 6 + 8 = 14

是不是很奇怪，在 C/C++、Java 中，每次调用函数时，函数局部变量的内存被分配，当该函数返回后，函数局部变量的内存被回收。也就是说，函数的每次调用，其局部变量的内存都是不一样的。回到上面的例子中，函数 add() 共被调用了两次：分别是 add(5)、add(6)，前面说了，函数返回后，局部变量会被自动回收，那么当我们调用 fn1/fn2 时应该是访问不到外部函数中的局部变量的呀，可是实际的运行结果却相反，完全正常访问，这是为什么呢？又是什么原理呢？

本节开头我们就说了，在 js 中，函数也是对象，还记得 C++ 中的仿函数吗？仿函数其实是一个普通的对象，之所以称之为仿函数，是因为我们可以直接在该对象后面加上 (param...) 来调用它，和函数调用很相似。那么它的实现原理是什么呢？非常简单，就是运算符重载，只要一个类重载了 operator() 运算符，当给它的对象加上圆括号调用时，其实就是调用了这个成员函数。好吧，有点扯远了，回到 js 中，来看一下这个例子：

'use strict';
function newObj(value) {
    return {
        getValue: function() {
            return value;
        },
        increment: function() {
            return ++value;
        }
    };
}
let obj = newObj(10);
console.log(obj.getValue()); // 10
console.log(obj.increment()); // 11
console.log(obj.getValue()); // 11

不仅内部函数可以访问外部函数中的局部变量，内部对象也可以访问外部函数中的局部变量。每调用一次函数，内存中都会产生一个新的 调用栈对象（意淫的东西，只是为了加深理解），调用栈对象中存储着传入的实参，函数局部变量，以及其他一些东西。如果函数返回后，没有引用可以访问该调用栈对象的数据，那么该调用栈对象就会被 GC 回收；相反，如果函数返回后，在外部仍然能够访问调用栈中的数据，那么该调用栈对象就不会被 GC 回收。说到这里，你应该能够理解上面两个例子了吧。因为函数返回后，调用者依旧持有其调用栈对象的引用，导致本该立即被 GC 回收的对象没有被回收，直到这个引用被断开为止（比如显式得给函数返回值赋予 null 值，帮助 GC 回收内存）。因此，如果希望回收这些内存，建议赋予 null 值，否则在某些环境中可能导致内存泄漏（比如旧版 IE 浏览器）。

Closure 闭包
闭包是指在 JavaScript 中，内部函数总是可以访问其所在的外部函数中声明的变量、接收的实参，即使在其外部函数被返回了之后。

来自 MDN 的描述：

闭包是 JavaScript 中最强大的特性之一。JavaScript 允许函数嵌套，并且内部函数可以访问定义在外部函数中的所有变量和函数，以及外部函数能访问的所有变量和函数。但是，外部函数却不能够访问定义在内部函数中的变量和函数。这给内部函数的变量提供了一定的安全性。此外，由于内部函数可以访问外部函数的作用域，因此当内部函数生存周期大于外部函数时，外部函数中定义的变量和函数的生存周期也和内部函数的存活时间一样长。当内部函数以某一种方式被任何一个外部函数作用域访问时（比如将其作为函数返回值返回给调用者），一个闭包就产生了。

变量命名冲突
如果内层函数与外层函数中存在同名变量，那么在内层函数中，内层函数中的同名变量优先级更高，反正只要记住一句话，谁离得近就用谁。

默认参数
ES6 中，允许我们为函数参数设置一个默认值。在这之前，函数参数的默认值是 undefined，这时候通常使用下面的方法来设置默认值：

'use strict';
function func(a, b, c) {
    a = a || 1;
    b = b || 2;
    c = c || 3;
    console.log('a = ' + a);
    console.log('b = ' + b);
    console.log('c = ' + c);
}
func(); // a=1, b=2, c=3
func(11); // a=11, b=2, c=3
func(11, 22); // a=11, b=22, c=3
func(11, 22, 33); // a=11, b=22, c=33

这里简单解释一下 a = a || 1 的意思（其它两个类似），在 js 中，逻辑连接符有三个：&&逻辑与、||逻辑或、!逻辑非。其中 && 和 || 都是 二元运算符，与 Java 强类型不同的是，js 中的 &&、|| 两边的操作数可以是任意类型，而不是仅限于布尔值。expr1 && expr2 的意思是，如果操作数 expr1 和expr2 都为 true，则整个表达式的结果为 true；expr1 || expr2 的意思是，只要有一个操作数为 true，则整个表达式的结果为 true。而在 js 中，undefined、null、0、NaN、''为 false，其它值均为 true。也就是说，当 expr1、expr2 不是布尔值时，对于 expr1 && expr2，如果 expr1 能转换为 true，则返回 expr2，否则返回 expr1；对于 expr1 || expr2，如果 expr1 能转换为 false，则返回 expr2，否则返回 expr1。很容易想到，&& 常用于测试左操作数是否为空，|| 常用于为左操作数设置默认值。

不过到了 ES6，我们有了更加优雅的方式为函数参数设置默认值，请看：

'use strict';
function func(a = 1, b = 2, c = 3) {
    // a = a || 1;
    // b = b || 2;
    // c = c || 3;
    console.log('a = ' + a);
    console.log('b = ' + b);
    console.log('c = ' + c);
}
func();
func(11);
func(11, 22);
func(11, 22, 33);
func(undefined, undefined, undefined); // 等价于 func()

在 C++ 中，默认参数必须位于参数列表的后头，如果为一个参数设置了默认值，那么它后面的所有参数都必须设置默认值！不过，在 js 中没有这样的硬性规定，但是，强烈建议将默认参数放在参数列表的尾部，这样才更能够体现出默认参数原本的意义。

剩余参数
这个类似于 Java 中的可变参数，如 func(String... args)，其中 args 是用于接收可变参数的容器，本质上，它只是一个数组，也就是说，这是一颗语法糖，在调用的时候，我可以传入多个参数，也可以直接传入一个数组。回到 js 中，ES6 也提供了这样一颗语法糖，它的语法很相似，如 func(...args)，其中，args 本质上也是一个数组（Array），不过，你只能传入多个参数，不能直接传入一个数组，因为直接传入一个数组会被当作一个参数处理，不过也有办法传入数组，那就是在数组前面加上三个 . 号。具体的细节如下：

'use strict';
function concat(sep, ...arr) {
    let result = '';
    for (let i = 0; i < arr.length - 1; i++)
        result += arr[i] + sep;
    result += arr[arr.length - 1];
    return result;
}
console.log(concat('; ', 1, 2, 3)); // '1; 2; 3'
console.log(concat('; ', [1, 2, 3])); // '1,2,3' Array.toString()
console.log(concat('; ', ...[1, 2, 3])); // '1; 2; 3'

在 Java 中，剩余参数必须位于参数列表的尾部，因为这样才好确定有多少参数，在 JS 中这个限制同样适用。

箭头函数
所谓的箭头函数就是 Lambda 表达式，在 Java 中，使用 -> 箭头，在 JS 中，使用 => 箭头。Lambda 表达式也就是所谓的匿名函数，通常用于编写简短的函数体，比如作为参数传递给被调用函数的函数。除了箭头不一样外，其它的语法和 Java 的 Lambda 表达式颇为相似。

'use strict';
function fillArray(arr, func) {
    for (let i = 0; i < arr.length; i++)
        arr[i] = func(i);
    return arr;
}
let arr = [];
arr.length = 10;
console.log(fillArray(arr, i => i));
console.log(fillArray(arr, i => i * i));
// Output:
(10) [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
(10) [0, 1, 4, 9, 16, 25, 36, 49, 64, 81]

使用箭头函数的好处除了代码简洁外，还因为箭头函数会自动捕获外层函数的 this 指针！在严格模式下，每个函数的 this 指针默认为 undefined，如果是以 "对象方法" 调用，则 this 指针指向被调用的对象。例如：func()直接调用，那么 func 函数内部的 this 指向 undefined；obj.func() 对象方法，那么 func 函数内部的 this 指向 obj。（注：在全局作用域中，this 指向 window 全局对象）。以面向对象的编程风格，这样着实有些恼人。一个简单的办法是，在外部函数中暂存 this 指针，然后在内部函数中使用这个暂存的指针，而不是 this。不过，ES6 的箭头函数已经帮我们做了，我们直接使用 this 即可正确引用外部函数的 this 指针指向。

'use strict';
let obj = {
    func: function() {
        console.log(this); // obj
        (function() {
            console.log(this); // undefined
        })();
        (() => console.log(this))(); // obj
    }
};
obj.func();

eval 全局函数
eval 和 shell 中的 eval 作用相似，用来执行字符串中的代码。因为 eval 是解释运行的，会调用 js 解释器，因此效率比直接写的代码低。因此，非必要情况下，尽量不要使用 eval，不仅效率低，还可能存在潜在的风险。函数原型：eval(string)，返回执行后的结果。

Function 构造函数
new Function([arg1[, arg2[, ...argN]], ]functionBody)：每个函数（函数定义、函数表达式）其实都是 Function 的一个实例，arg 是函数的形参，functionBody 是函数的主体。它们均为字符串类型，因为在运行时才进行编译解析，因此效率很低，不建议使用。

Function 实例属性
funcObj.length：函数需要的形参数目，形参的数量不包括剩余参数个数，仅包括第一个具有默认值之前的参数个数。

Function 实例方法
funcObj.call(thisArg, arg1, ..., argN)：手动设置 this 值，并以参数列表的形式传入所需参数，调用当前函数。
funcObj.apply(thisArg, argsArray)：手动设置 this 值，并以数组形式传入所需参数，调用当前函数。
funcObj.bind(thisArg[, arg1, ..., argN])：创建一个新函数（偏函数），为其指定 this 值，可选的为原函数设置默认值。
funcObj.toString()：返回当前函数源代码的字符串（内置函数除外）。

运算符

JS 中有 一元运算符、二元运算符、三元运算符，一元运算符需要一个操作数，二元运算符需要两个操作数，三个运算符需要三个操作数。

赋值运算符
=、+=、-=、*=、/=、%=、**=(乘方)
<<=、>>=、>>>=（无符号右移）
&=按位与、|=按位或、^=按位异或
例如 a += b，等价于 a = a + b。

解构赋值（ES6）
解构赋值说得简单点就是：批量赋值，一一赋值。比如我有一个数组，该数组有三个元素，我现在要使用三个变量来取出这三个元素，不使用解构的情况下，只能这么做：

'use strict';
let arr = [1, 2, 3];
let e0 = arr[0],
    e1 = arr[1],
    e2 = arr[2];
console.log(e0);
console.log(e1);
console.log(e2);

数量少还好，数量多就比较麻烦了。使用解构就不一样了：

'use strict';
let arr = [1, 2, 3];
let [e0, e1, e2] = arr;
console.log(e0);
console.log(e1);
console.log(e2);

有了解构，交换两个变量就非常容易了，不再需要显式定义一个临时变量：

'use strict';
let a = 10,
    b = 20;
console.log('a = ' + a + ', b = ' + b);
[a, b] = [b, a];
console.log('a = ' + a + ', b = ' + b);

解构赋值表达式需要两个操作数，操作数的类型必须为数组或对象（Array、Object），并且，通常情况下，两个操作数的类型需要一致，当然，也允许左操作数是对象（key 必须为非负整数的字符串形式），而右操作数为数组的情况，如：let {'1': e1, '0': e0, '2': e2} = [1, 2, 3];，执行后，e0 = 1, e1 = 2, e2 = 3。不过一般情况下两个操作数的类型都是一样的，不要给自己制造麻烦。

解构赋值的执行过程也很容易理解，因为数组本质上是对象的简写形式（key 隐式的为数组下标），因此这里只讨论对象之间的解构赋值。

对于 let {'k1': v1, 'k2': v2, 'k3': v3} = {'k1': 1, 'k2': 2, 'k3': 3};：

• 执行右操作数，在内存中创建了一个匿名对象；
• 执行 let 语句，创建了三个变量 v1、v2、v3；
• 根据变量所属 key，在匿名对象中寻找同名 key，然后将对应 value 赋给变量。

因为 k1、k2、k3 是合法的 javascript 标识符，因此可以省略引号，即 let {k1: v1, k2: v2, k3: v3} = {k1: 1, k2: 2, k3: 3};，和上面的表达式是完全一致的，没有区别，要注意的是，左操作数的 k1、k2、k3 只是字符串（省略了引号），并不是声明的变量，因此不能在后面引用它们！

当然，如果左操作数的 key 和 value 同名，即 let {k1: k1, k2: k2, k3: k3} = {k1: 1, k2: 2, k3: 3};，显得有些冗余，我们完全可以写作：let {k1, k2, k3} = {k1: 1, k2: 2, k3: 3};。

如果左操作数中的某些 key 在右操作数中不存在，则对应的 value 为 undefined。有些时候我们希望为那些不存在的 key 设置默认值，只需要像函数默认参数那样直接写就可以了（如果对应 key 本身的值为 undefined，那么也会被设置默认值，这个和函数默认值是一样的）。如 let {k1 = 1, k2 = 2, k3 = 3} = {};。

除了可以应用函数的默认参数外，还可以使用剩余参数语法。和函数的剩余参数一样，解构赋值中的剩余参数必须位于左操作数的尾部。如 let {k1, ...rest} = {k1: 1, k2: 2, k3: 3};，k1 为 1，rest 是一个对象，有两个 key-value 对，即 rest = {k2: 2, k3: 3}。

当操作数是数组时，有时候，我们不需要捕获某些值，希望跳过它们，可以使用逗号 , 占位，和数组的空位语法是一样的。如 let [e0, , e2] = [1, 2, 3];。

考虑这么一种情况，左操作数的 key 名称是一个变量，该怎么获取它对应的 value 呢？比如：

'use strict';
let key = 'k';
let {key: value} = {k: 'v'};
console.log(value); // undefined

这时，我们可以给左操作数的 key 加上中括号，表示 key 是一个变量而非字符串：

'use strict';
let key = 'k';
let {[key]: value} = {k: 'v'};
console.log(value); // 'v'

比较运算符
比较运算符的返回值是一个布尔值，如果为 true 则表示该条件成立，如果为 false 则表示该条件不成立。比较运算符需要两个操作数，它们的类型可以不一致，判等的比较有两个：==忽略数据类型，单纯的比较变量的"值"；===如果数据类型不一致，直接返回 false，如果数据类型一致，才会比较变量的"值"（!=、!==同理）。因此，为了避免某些诡异的情况，强烈建议使用 ===、!== 进行变量的比较操作。特别的，如果操作数是字符串，则依次比较对应字符的 Unicode 码点值。例子（注：true 在内存中的值为 1，false 的值为 0）：

'use strict';
console.log(1 == true); // true
console.log(1 === true); // false
console.log(1 != true); // false
console.log(1 !== true); // true

• =="值"相等、!="值"不相等
• ===类型相同且"值"相等、!==类型相同且"值"不相等
• <小于、<=小于等于
• >大于、>=大于等于

算术运算符
算术运算符通常需要两个操作数，并且通常两个操作数都是 number 类型。特别注意，除零不会导致异常，而是返回 Infinity 无限大，对于单目运算符 +正数、-负数，如果操作数不是 number 而是 string，那么会尝试将 string 解析为 number，如果无法解析，则返回 NaN；或者操作数是只有一个元素的数组，则返回（或者解析它）这个元素（-运算符同理）。

• +加、-减、*乘、/除、%求余、**求幂
• ++number前自增、number++后自增、--number前自减、number--后自减
• +number求正值（可能存在解析过程）、-number求负值（可能存在解析过程）

'use strict';
console.log(+1 / 0); // Infinity
console.log(-1 / 0); // -Infinity
console.log(+true); // 1
console.log(+false); // 0
console.log(+10); // 10
console.log(-10); // -10
console.log(+'10'); // 10
console.log(-'10'); // -10
console.log(-'-10'); // 10
console.log(+'10a'); // NaN
console.log(+'   10'); // 10
console.log(+'10   '); // 10
console.log(+'  10 '); // 10
console.log(+'\t10\t'); // 10
console.log(+null); // 0
console.log(+undefined); // NaN
console.log(+{}); // NaN
console.log(+[]); // 0
console.log(+[10]) // 10
console.log(+[10, 20]); // NaN

位运算符
<<左移、>>右移（补符号位）、>>>无符号右移（补 0）。
位运算符会将操作数转换为 32-bit 长度的有符号整数（通常位运算符要求操作数为整数而非浮点数，如果为浮点数，则小数部分被舍弃，如果整数的长度大于 32，则被截断）。和 Java 一样，如果位移的步长大于等于 32 或小于 0，则会先对步长取模，然后再进行位移。

• &按位与：如果两个操作数的对应位均为 1，则结果的对应位为 1，否则为 0
• |按位或：如果两个操作数的对应位有一个为 1，则结果的对应位为 1，否则为 0
• ^按位异或：如果两个操作数的对应位不同，则结果的对应位为 1，否则为 0
• ~按位非：（单目运算符），将操作数的每个位反转，0 变成 1，1 变成 0

逻辑运算符
常规用法（常规理解）：

• expr1 && expr2：逻辑与，只有 expr1 和 expr2 均为 true，才返回 true；
• expr1 || expr2：逻辑或，只要 expr1 或 expr2 任一个为 true，就返回 true；
• !expr：逻辑非，如果 expr 为 true 则返回 false，如果 expr 为 false 则返回 true。

变种用法（变种理解）：

• expr1 && expr2：如果 expr1 能转换为 true，则返回 expr2，否则返回 expr1；
• expr1 || expr2：如果 expr1 能转换为 false，则返回 expr2，否则返回 expr1；

因此，&&常用于检测左操作数是否为空，||常用于给左操作数设置默认值。

字符串运算符
+/+=：字符串拼接，如果操作数为对象，则调用其 toString() 方法。

'use strict';
console.log('array: ' + [1, 2, 3, 4, 5]); // array: 1,2,3,4,5
Array.prototype.toString = function() {
    let result = '[';
    for (let i = 0; i < this.length - 1; i++)
        result += this[i] + ', ';
    return result += this[this.length - 1] + ']';
};
console.log('array: ' + [1, 2, 3, 4, 5]); // array: [1, 2, 3, 4, 5]

条件运算符
条件运算符是 js 中唯一的三元运算符，语法：cond ? expr1 : expr2。如果条件 cond 为真，则整个表达式的值为 expr1，如果条件 cond 为假，则整个表达式的值为 expr2。

一元运算符
delete：删除 对象的键、数组元素（本质都是删除给定的 key），只能删除自身的键，继承链上的不影响。删除数组的元素后，数组的 length 不会改变，但是这个元素确实不存在了（使用 key in obj 可判断），这与直接给这个元素赋 undefined 值是不一样的。在严格模式下，delete 表达式总是返回 true，如果给定 key 是不可配置属性（Non-configurable），会导致语法错误；在非严格模式下则返回 false。

'use strict';
let sup = {key: 'sup::value'};
let sub = {key: 'sub::value'};
sub.__proto__ = sup;
console.log(sup.key); // 'sup::value'
console.log(sub.key); // 'sub::value'
console.log(delete sub.key); // true
console.log(sup.key); // 'sup::value'
console.log(sub.key); // 'sup::value'
console.log(delete sub.key); // true
console.log(sup.key); // 'sup::value'
console.log(sub.key); // 'sup::value'
console.log(delete sup.key); // true
console.log(sup.key); // 'undefined'
console.log(sub.key); // 'undefined'

delete arr[ind] 与 arr[ind] = undefined 的区别：

'use strict';
let arr = [0, 1, 2];
console.log(arr); // [0, 1, 2]
console.log(arr.length); // 3
delete arr[0]; // always return true
console.log(arr); // [empty, 1, 2]
console.log(arr.length); // 3
console.log(0 in arr); // false
arr[2] = undefined;
console.log(arr); // [empty, 1, undefined]
console.log(arr.length); // 3
console.log(2 in arr); // true

void：对给定的表达式进行求值，然后返回 undefined。目前唯一的用途（不一定，个人觉得这个运算符好多余），就是用来执行"立即执行的函数"，如果不使用 void，则必须在函数两边加上圆括号。

void function() {
    'use strict';
    console.log('hello, world!');
}();

typeof：返回给定操作数的数据类型（字符串），可能的值有：
1. boolean：返回字符串 'boolean'
2. number：返回字符串 'number'
3. string：返回字符串 'string'
4. symbol：返回字符串 'symbol'
5. undefined：返回字符串 'undefined'
6. null：返回字符串 'object'
7. 对象：返回字符串 'object'
8. 函数：返回字符串 'function'

关系运算符
key in obj：如果给定 key（字符串或数组下标）在给定 obj 中存在，则返回 true。

obj instanceof constructor：原理很简单，就是检查 obj.__proto__[.__proto__[.__proto__[...]]] 是否与 constructor.prototype 相等，instanceof 会沿着原型链一级一级往上查询，如果在某个节点上匹配，则返回 true，如果到了 null（顶级）还未匹配，则返回 false。

'use strict';
function Pet() {
    // TODO
}
let pet = new Pet();
console.log(pet instanceof Pet); // true
console.log(pet.__proto__ === Pet.prototype); // true

表达式

表达式是一组可以计算出一个数值的有效的代码的集合。

每一个合法的表达式都能计算成某个值，但从概念上讲，有两种类型的表达式：有副作用的（比如赋值）和单纯计算求值的，前者会对内存中的数据产生影响，后者则不会。

• 表达式x = 7是第一种类型的一个例子。该表达式使用=运算符将值 7 赋予变量 x。这个表达式自己的值等于 7。
• 代码3 + 4是第二种类型的一个例子。该表达式使用+运算符把 3 和 4 加到一起但并没有把结果（7）赋值给一个变量。

基本表达式
this 指针：this 的本意是指代当前正在被调用的对象，具体的（严格模式下）：

• 在全局作用域中，this 指代全局对象（浏览器中为 window）；
• 在构造函数中，this 指代 new 传入的对象；
• 在成员函数中，this 指代当前被调用的对象；
• 在普通函数中，this 的值默认为 undefined；
• 在箭头函数中，this 的指向与其所在函数的 this 指向相同。

...array定义剩余参数、原地展开数组：举个栗子，现有一个数组，我想在创建一个新数组，将现有的数组作为它的一部分，就可以使用此方法，将该现有数组展开：

'use strict';
let arrOld = [4, 5, 6];
let arrNew = [1, 2, 3, ...arrOld, 7, 8, 9];
console.log(arrNew); // 1,2,3,4,5,6,7,8,9

数字和日期

数值字面值 number
JS 中不区分整数和浮点数，统统使用 64-bit 双精度浮点类型表示，因此一个数字的范围只能在 -(253-1) ~ 253-1 之间。除了具体的数值外，JS 中还有三个特殊的数值：+Infinity正无穷、-Infinity负无穷、NaNnot-a-number 非数字。

在 js 中可以使用 4 种数字进制（二、八、十、十六）：

• 二进制：使用前缀 0b、0B
• 八进制：使用前缀 0o、0O
• 十进制：没有特定前缀
• 十六进制：使用前缀 0x、0X

对于大数字，还可以使用科学记数法（指数形式）：a * 10n，其中 a 必须是单位数字，可以有正负，n 是一个整数，可以有正负，在编程语言中，通常表示为 aEn，e 可以大写也可以小写。比如一百万可以表示为 1E6，千分之一可以表示为 1E-3。

数值包装类 Number
Number 的属性（静态字段）：

• MIN_VALUE：最小正值
• MAX_VALUE：最大正值
• POSITIVE_INFINITY：正无穷
• NEGATIVE_INFINITY：负无穷
• MIN_SAFE_INTEGER：最小安全整数-(253-1)
• MAX_SAFE_INTEGER：最大安全整数253-1
• EPSILON：最小精度，1 与大于 1 的最小值之间的差值
• NaN：非数字

Number 的方法（静态方法）：

• parseInt(string, radix)，从字符串中解析整数。
  
  • string 的前导空白将被忽略；并且会忽略后面的非数字部分。
  • radix 为进制（取值范围为[2, 36]），如 2、8、10、16。
  • 十六进制数值建议以0x/0X开头，八进制数值建议以0开头。
  • 返回解析到的数值 number；如果无法转换为数值，则返回 NaN。
• parseFloat(string)，从字符串中解析浮点数（十进制）。
• isInteger(testValue)，判断给定数字是否为整数
• isSafeInteger(testValue)，判断给定数字是否为安全整数
• isFinite(testValue)，判断给定数字是否为有穷数字（非无穷大）
• isNaN(testValue)，判断给定数字是否为 NaN

Number 原型上的方法（实例方法）：

• toExponential([fractionDigits])：以科学计数法表示的数值（字符串），fractionDigits 是可选的，表示小数点后的位数，默认是尽可能多的小数位数。
• toFixed([digits])：返回给定小数位数的数值（字符串），其中 digits 默认为 0，建议取值在 [0, 20] 之间。
• toPrecision([precision])：以指定的精度返回该数值对象的字符串表示（定点表示法、指数表示法），precision 是可选的，默认不减低精度。

数学对象 Math
Math 对象的属性：

• Math.PI：圆周率
• Math.E：自然对数的底数
• Math.SQRT2：2 的平方根
• Math.SQRT1_2：0.5 的平方根
• Math.LN2：2 的自然对数
• Math.LN10：10 的自然对数
• Math.LOG2E：以 2 为底 E 的对数
• Math.LOG10E：以 10 为底 E 的对数

Math 对象的方法：

• abs(x)：返回 x 的绝对值
• sin(), cos(), tan()：标准三角函数（弧度制）
• asin(), acos(), atan(), atan2()：反三角函数（弧度制）
• sinh(), cosh(), tanh()：双曲三角函数（弧度制）
• asinh(), acosh(), atanh()：反双曲三角函数（弧度制）
• pow(base, exponent)：返回 base^exponent
• exp(x)：返回 Math.E^x
• log10(x)：返回 log₁₀x
• log2(x)：返回 log₂x
• log(x)：返回 log_ex
• floor(), ceil()：下舍入、上舍入
• min(), max()：返回一组数字中的最小值、最大值
• random()：返回 [0, 1) 之间的随机浮点数 后面有详细介绍
• round(x)：四舍五入到最近的整数
• trunc(value)：去掉小数部分，只保留整数
• sqrt(), cbrt()：返回给定数字的平方根、立方根
• sign(x)：返回指定数值的符号，共有 5 种返回值，分别是 1正数、-1负数、0正零、-0负零、NaN非数字

Math.random() 详解
random() 返回一个范围在 [0, 1) 的伪随机浮点数（左闭右开区间）。

[min, max) 浮点数
Math.random() * (max - min) + min

[min, max) 整数

function getRandomInt(min, max) {
  min = Math.ceil(min); // 向上取整
  max = Math.floor(max); // 向下取整
  return Math.floor(Math.random() * (max - min)) + min;
}

[min, max] 整数

function getRandomIntInclusive(min, max) {
  min = Math.ceil(min); // 向上取整
  max = Math.floor(max); // 向下取整
  return Math.floor(Math.random() * (max - min + 1)) + min;
}

日期对象（构造函数）
Date 的静态属性：
Date.length：Date 构造函数可接受的参数个数（7 个）。

Date 的静态方法：
Date.now()：返回自 1970-1-1 00:00:00 UTC 至今所经过的毫秒数。
Date.parse(dateString)：dateString 是符合 ISO8601 日期格式的字符串，返回自 1970-01-01T00:00:00Z 至 dateString 经过的毫秒数，如果无法解析则返回 NaN。
Date.UTC(year, month[, date[, hrs[, min[, sec[, ms]]]]])：返回自 1970-01-01T00:00:00Z 至给定日期所经过的毫秒数。

Date 的构造函数：
Date()：普通方法调用，返回当前时间的字符串形式
new Date()：当前时间
new Date(value)：自 1970-01-01T00:00:00Z 经过的毫秒数
new Date(dateString)：符合 ISO8601 日期时间格式的字符串
new Date(year, month[, day[, hour[, minutes[, seconds[, milliseconds]]]]])年（四位整数）、月（0-11）、日（1-31）、时（0-23）、分（0-59）、秒（0-59）、毫秒（0-999）。

Date 的实例方法：
本地时间
Date.prototype.getFullYear()：年
Date.prototype.getMonth()：月（0-11）
Date.prototype.getDate()：日（1-31）
Date.prototype.getDay()：星期（0-6）
Date.prototype.getHours()：时（0-23）
Date.prototype.getMinutes()：分（0-59）
Date.prototype.getSeconds()：秒（0-59）
Date.prototype.getMilliseconds()：毫秒（0-999）
Date.prototype.getTimezoneOffset()：时区偏移量（单位：分钟）
Date.prototype.getTime()：相对于 1970-01-01T00:00:00Z 的偏移量（毫秒）
UTC 时间
Date.prototype.getUTCFullYear()：年
Date.prototype.getUTCMonth()：月（0-11）
Date.prototype.getUTCDate()：日（1-31）
Date.prototype.getUTCDay()：星期（0-6）
Date.prototype.getUTCHours()：时（0-23）
Date.prototype.getUTCMinutes()：分（0-59）
Date.prototype.getUTCSeconds()：秒（0-59）
Date.prototype.getUTCMilliseconds()：毫秒（0-999）

本地时间
Date.prototype.setFullYear()：年
Date.prototype.setMonth()：月
Date.prototype.setDate()：日
Date.prototype.setHours()：时
Date.prototype.setMinutes()：分
Date.prototype.setSeconds()：秒
Date.prototype.setMilliseconds()：毫秒
Date.prototype.setTime()：相对于 1970-01-01T00:00:00Z 的偏移量（毫秒）
UTC 时间
Date.prototype.setUTCFullYear()：年
Date.prototype.setUTCMonth()：月
Date.prototype.setUTCDate()：日
Date.prototype.setUTCHours()：时
Date.prototype.setUTCMinutes()：分
Date.prototype.setUTCSeconds()：秒
Date.prototype.setUTCMilliseconds()：毫秒

其它方法
Date.prototype.toDateString()：（易读）日期
Date.prototype.toTimeString()：（易读）时间
Date.prototype.toString()：（易读）日期时间
Date.prototype.toLocaleDateString()：（本地化）日期
Date.prototype.toLocaleTimeString()：（本地化）时间
Date.prototype.toLocaleString()：（本地化）日期时间
Date.prototype.toUTCString()：UTC 日期时间
Date.prototype.toISOString()：ISO 日期时间格式（UTC）
Date.prototype.toJSON()：JSON 日期时间（同 toISOString）
Date.prototype.valueOf()：自 1970-01-01T00:00:00Z 起的毫秒数

文本格式化

字符串字面值
JavaScript 中的 string 类型用于表示文本型的数据，它是由无符号整数值（16-bit）作为元素而组成的集合。字符串中的每个元素在字符串中占据一个位置，第一个元素的 index 值是 0，下一个元素的 index 值是 1，以此类推。字符串的长度就是字符串中所含的元素个数。你可以通过 string 字面值或者 String 对象两种方式创建一个字符串。

JS 中的字符串使用 UTF-16 编码，因此 string 的 length 并不代表该字符串的字符个数，length 的意义仅仅是 UTF-16 码元（code-unit）的数量，除了 BMP 基本多文种平面的字符可以使用一个 code-unit（即 16-bit）表示外，其他的辅助平面均需要使用两个 code-unit（即 32-bit）表示（称之为代理对）。在 Unicode 字符集中，共计有 17 个平面，其中第 0 号平面是基本平面（简称 BMP），其余 16 个平面都是辅助平面，而每个平面都有 2¹⁶（可表示 65536 个字符）个码点（code-point）。因此，BMP 的码点值范围是 0x0000 ~ 0xFFFF，辅助平面的码点值范围是 0xN0000 ~ 0xNFFFF，其中 N 的范围是 [1, 10]（十六进制）。

早期 JS 可能采用的是 UCS-2 编码（这和 Java 很相似），UCS-2 编码是 UTF-16 编码的子集，UCS-2 是没有辅助平面之前的主流编码方式，也就是说，UCS-2 只能表示 BMP 字符，辅助平面的字符则无能为力。

字符串字面值可以使用 单引号 或者 双引号 表示，使用单、双引号没有区别，在 JS 中建议使用单引号，因为经常需要与 HTML 元素打交道，双引号有些麻烦。

字符串包装类
实例方法
string[index]：返回给定索引处的字符(char)，返回值类型为字符串
charAt(index)：返回给定索引处的字符(char)，返回值类型为字符串
charCodeAt(index)：返回给定索引处的码元(code-unit)，返回值类型为数值
codePointAt(index)：返回给定索引处的码点(code-point)，返回值类型为数值

indexOf(searchValue[, fromIndex])：查询给定子串的第一次匹配位置
lastIndexOf(searchValue[, fromIndex])：查询给定子串的最后一次匹配位置

startsWith(searchString[, position])：测试当前字符串是否以给定子串开头
endsWith(searchString[, position])：测试当前字符串是否以给定子串结尾
includes(searchString[, position])：测试当前字符串是否包含给定子串

concat(string2, string3[, ..., stringN])：连接多个字符串，建议使用+、+=
split([separator[, limit]])：sep 为字符串或正则，limit 是结果数组的长度

slice(beginSlice[, endSlice])：提取 [beg, end) 子串并返回
substring(indexStart[, indexEnd])：提取 [beg, end) 子串并返回
substr(start[, length])：从给定索引处开始，提取 len 个字符并返回

match(regex)：使用正则匹配当前字符串（不建议使用 g 标志），匹配成功则返回一个数组，第 0 项是 group0，接下来是子捕获组，除此之外，还有两个额外的属性，input 指向原字符串，index 是匹配结果在原串中的起始索引；匹配失败则返回 null。如果使用了 g 标志，则只会返回所有匹配的 group0，不包含子捕获组，并且也不存在 input、index 属性。

replace(regex|substr, replace|function)：返回一个由替换值替换一些或所有匹配的模式后的新字符串。模式可以是一个字符串或者一个正则表达式，替换值可以是一个字符串或者一个每次匹配都要调用的函数。

• regex：RegExp 对象或字面量，使用 g 标志可启用全局替换；
• substr：字符串，该替换模式只会替换与之匹配的第一个子串；
• replace：字符串，替换原内容的新串，可以使用以下特殊模式：
  
  • $$：字符 $
  • $&：捕获组 0
  • $`：捕获组 0 左边的内容
  • $'：捕获组 0 右边的内容
  • $n：捕获组 n（1 <= n <= 99），参数一须为 regex
• function：函数，其返回值将作为替换串（不能使用特殊模式），参数依次为：
  
  • match：捕获组 0
  • p1[, p2 [, ...]]：捕获组 n（1 <= n <= 99），参数一须为 regex
  • offset：捕获组 0 相对原串的偏移量
  • string：指向原串的引用
  • 参数的具体个数依具体情况而定，p1...pN 的数目要看圆括号数量

search(regex)：尝试将当前字符串与正则表达式相匹配，匹配成功则返回捕获组 0 相对于原字符串的起始索引，匹配失败则返回 -1。

toLowerCase()：将当前字符串转换为小写形式（不改变原串）
toUpperCase()：将当前字符串转换为大写形式（不改变原串）

repeat(count)：将原串的 count（非负整数）个副本拼接在一起，并返回它
trim()：删除字符串两端（不改变原串）的空白符（空格，制表，回车，换行等）

静态方法
fromCharCode(num1, ..., numN)：从给定 code-unit 创建字符串 string
fromCodePoint(num1[, ...[, numN]])：从给定 code-point 创建字符串 string

模版字符串
ES6 模版字符串相比传统的字符串字面量，有以下两个不同之处：
1. 模版字符串中允许换行，而不需要转义
2. 模版字符串中可以插入 JS 表达式，${expression}
模版字符串使用反引号 ` 表示，而非单引号、双引号

正则表达式
创建正则表达式有三种方法：

1. /pattern/flags：字面量，编译期间进行正则表达式编译
2. new RegExp(pattern[, flags])：构造函数，运行期间编译
3. RegExp(pattern[, flags])：普通方法调用，运行期间编译

建议不要使用第三种方式，语义不明确；如果正则表达式是确定的，不变的，则选择字面量形式，如果正则表达式是不定的，未知的，则选择构造函数形式。

对于 /pattern/flags，flags 是可选的，flags 可以是以下值的任意组合：

• g：全局匹配，默认成功匹配一次后就结束匹配了
• i：忽略大小写，默认是大小写敏感的
• m：多行模式，^、$ 除了匹配输入序列首尾外，还会匹配行结束符的前后位置
• u：Unicode 码点支持，\u{code-point}，ES6，注意不是 Unicode Support
• y：粘性匹配，与 g 相似，但 y 在尝试从 lastIndex 处匹配失败后不会向前传动
• s：单行模式，ES2018，该模式下 . 将匹配任意字符，默认 . 不匹配行结束符

u、y、s 三个 flag 都是 ES6、ES2018 新增的，使用时请注意浏览器兼容性。

对于 new RegExp(pattern[, flags])，在 ES6 之前，pattern 和 flags 必须是字符串类型，从 ES6 开始，pattern 可以是正则字面量。要注意的是，在字符串中的正则表达式需要转移反斜杠字符，如 /\w+/ 需要表示为 '\\w+'。

RegExp 实例属性：
RegExp.prototype.global：布尔属性，指示是否启用了全局匹配标志
RegExp.prototype.ignoreCase：布尔属性，指示是否启用了忽略大小写标志
RegExp.prototype.multiline：布尔属性，指示是否启用了多行模式标志
RegExp.prototype.unicode：布尔属性，指示是否启用了 Unicode 码点转义
RegExp.prototype.sticky：布尔属性，指示是否启用了粘性匹配标志
RegExp.prototype.source：字符串属性，存储正则表达式对象的源模式文本
RegExp.prototype.lastIndex：数值属性，存储最后一次成功匹配的结束位置 + 1

唯一可更改的属性就是 lastIndex，其它属性都是只读属性。

RegExp 实例方法：
RegExp.prototype.exec(input)：执行一次搜索匹配，返回一个结果数组或 null。如果启用了 g、y 标志位，则每次调用 exec() 都会更新 regex 对象的 lastIndex 属性。需要注意的是，exec() 方法只会执行一次匹配，如需进行全局匹配或粘性匹配，需要采取循环方式，即 while ((result = regex.exec(input)))，当 result 为 null 时循环就会停止。返回的 Array 结果中，第 0 项是捕获组 0，第 1 项是捕获组 1，以此类推，除此之外，还有 input 属性（指向原字符串），index 属性（lastIndex 值）。

RegExp.prototype.test(input)：测试正则表达式是否可以与输入字符串匹配，如果可以则返回 true，如果不可以则返回 false。当你仅仅想测试是否匹配时，使用 test() 比 exec() 快的多。除了返回值类型不同外，test() 基本与 exec() 行为相似。

RegExp.prototype.toString()：返回正则表达式的字符串描述（/pattern/flags）。

String 与 RegExp 相关的方法：
String.prototype.match(regex)：如果没有启用 g 标志，则返回值与 regex.exec(input) 一样；如果启用了 g 标志，则返回所有匹配的结果（捕获组 0）的数组，并且没有子捕获组信息，也没有 input、index 额外属性；如果启用了 y 标志，则会修改 regex 对象的 lastIndex 属性（g 标志下不会修改该属性）。

String.prototype.replace(regex|string, replace|function)：执行正则替换。

String.prototype.search(regex)：和 regex.test() 方法差不多，只不过该方法会返回成功匹配的起始索引值，如果匹配失败则返回 -1。

String.prototype.split(separator[, limit])：使用正则表达式分割字符串，返回分割后的结果数组。

JS 正则表达式
JS 的正则和 Perl、Java 的很相似，可以理解为 Java 正则 的子集。因此这里只简单的说明 JS 正则与 Java 正则的显著区别：

• JS 只支持 贪婪量词、懒惰量词，不支持 占有量词
• JS 只支持 顺序环视，不支持 逆序环视
• JS 不支持 \A、\G、\Z、\z、\Q、\E
• JS 不支持 Unicode 字符匹配
• JS 不支持命名捕获组
• JS 不支持原子组

索引集合类

数组对象
数组是一个有序的数据集合，我们可以通过数组名称和索引进行访问。例如，我们定义了一个数组 emp，数组中的每个元素包含了一个雇员的名字以及其作为索引的员工号。那么 emp[1] 将会代表 1 号员工，emp[2] 将会代表 2 号员工，以此类推。

JavaScript 中没有明确的数组数据类型。但是，我们可以通过使用内置Array 对象和它的方法对数组进行操作。Array 对象有很多操作数组的方法，比如合并、反转、排序等。数组对象有一个决定数组长度和使用正则表达式操作其他属性的属性。

创建数组
1. [elem0, elem1, ..., elemN]：数组字面量（数组初始化器）
2. new Array(elem0, elem1, ..., elemN)：构造函数（不推荐）
3. Array(elem0, elem1, ..., elemN)：普通函数调用（更不推荐）
对于后两者，如果只有一个参数，该参数将被当作数组长度，因此须为非负整数。

数组对象有一个特殊属性 length，表示数组的长度，该属性的值取决于数组最大索引值，它总是等于最大索引值 + 1，因此，length 属性并不总是等于数组元素的个数。我们不仅可以读取 length 属性的值，还可以更改它的值，如果新的长度比原来的长度小，则数组会被截断，多余的元素会被清空。该属性会自动递增，如 arr[10] = value（假设当前数组长度为 10），执行后，数组长度会自动变为 11，但是这种自动递增也是有条件的，你的属性名（即 key 名称）必须是 非负整数，否则它将被当作一个普通的属性，而不是数组的元素，比如 arr[1.5] = value 不会改变 length 属性，只是增加了一个名叫 '1.5' 的属性而已。

遍历数组
1. for (let i = 0; i < arr.length; i++)：原始方法
2. Array.prototype.forEach(callback[, thisObj])：callback(curVal, curInd, curArr)，ES5.1，使用箭头函数更简洁，在数组定义时省略的元素不会在 forEach 遍历时被列出，但是手动赋值为 undefined 的元素是会被列出。

Array 静态方法
Array.isArray(obj)：判断 obj 是否是 Array 的实例，如果是则返回 true，否则返回 false。
Array.of(element0[, element1[, ...[, elementN]]])：从传入的参数列表中构建数组。
Array.from(arrayLike[, mapFn[, thisArg]])：从类数组对象或可迭代对象中创建数组对象，如果使用了 mapFn、thisArg 参数，实际上等价于 Array.from(arrayLike).map(mapFn[, thisArg])。

类数组对象：拥有一个 length 属性和若干索引属性的任意对象。

Array 实例方法
修改方法

• Array.prototype.copyWithin(target[, begin[, end]])：浅复制数组的一部分到同一数组的另一个位置，并返回它，不改变数组大小（[beg, end)，beg 默认为 0，end 默认为 arr.length）。
• Array.prototype.fill(value[, begin[, end]])：使用给定元素填充当前数组并返回它，区间 [beg, end)，默认为 [0, this.length)，如果 beg 为负数，则自动计算为 length + beg，如果 end 为负数，则自动计算为 length + end。
• Array.prototype.push(element1, ..., elementN)：将传入的元素（按出现的顺序）追加到数组尾部，并返回数组的新长度。
• Array.prototype.pop()：弹出当前数组的尾部元素，如果数组为空则返回 undefined。
• Array.prototype.unshift(element1, ..., elementN)：将传入的元素（按出现的顺序）插入到数组的头部，并返回数组的新长度。
• Array.prototype.shift()：弹出当前数组的头部元素，如果数组为空则返回 undefined。
• Array.prototype.splice(ind[, cnt[, item1, ..., itemN]])：从 ind 处删除 cnt 个元素，然后使用 item1 ... itemN 元素替换它们，返回被删除元素组成的数组。
• Array.prototype.reverse()：颠倒数组中的元素的位置，第一个变成最后一个，最后一个变成第一个，以此类推，返回数组的原引用。
• Array.prototype.sort([compareFunction])：用就地（in-place）的算法对数组的元素进行排序，并返回数组。排序不一定是稳定的。默认排序顺序是根据字符串 Unicode 码点（调用 toString() 方法）。除非元素全部是字符串，否则强烈建议传入比较函数！比较函数 compareFunction 接收两个参数（数组的两个待比较元素），sort() 方法根据比较函数的返回值确定这两个元素的相对大小，假设传入的参数为 a、b，即 result = compareFunction(a, b)，如果 result 大于 0，说明 a > b，如果 result 等于 0，说明 a = b，如果 result 小于 0，说明 a < b。通常这三个返回值分别为：1大于、0等于、-1小于。对于数值排序，可以使用 arr.sort((a, b) => a - b)（升序）、arr.sort((a, b) => b - a)（降序）。

访问方法

• Array.prototype.concat(value1, ..., valueN)：将当前数组与给定元素（如果元素是数组则解开，如果是多维数组，只会解一层）连接在一起，并返回整个新数组。
• Array.prototype.includes(searchElement[, fromIndex])：测试当前数组是否包含给定元素，fromIndex 默认为 0。如果包含则返回 true，否则返回 false。
• Array.prototype.join([separator])：使用给定 sep 分隔符连接数组的每个元素，返回连接后的字符串。sep 默认为英文逗号 ,。
• Array.prototype.slice([begin[, end]])：提取区间 [begin, end) 的元素到一个新数组中并返回它。默认为 [0, this.length)。
• Array.prototype.toString()：返回当前数组的字符串描述（调用 join() 方法，默认分隔符为逗号）。
• Array.prototype.toLocaleString()：返回当前数组的区域敏感字符串描述，每个元素之间使用英文逗号分隔。
• Array.prototype.indexOf(searchElement[, fromIndex = 0])：查找数组中与给定元素相等的第一个索引值，如果没有则返回 -1。
• Array.prototype.lastIndexOf(searchElement[, fromIndex = arr.length - 1])：查找数组中与给定元素相等的最后一个索引值，如果没有则返回 -1。

迭代方法
在下面的众多遍历方法中，有很多方法都需要指定一个回调函数作为参数。在每一个数组元素都分别执行完回调函数之前，数组的 length 属性会被缓存在某个地方，所以，如果你在回调函数中为当前数组添加了新的元素，那么那些新添加的元素是不会被遍历到的。此外，如果在回调函数中对当前数组进行了其它修改，比如改变某个元素的值或者删掉某个元素，那么随后的遍历操作可能会受到未预期的影响。总之，不要尝试在遍历过程中对原数组进行任何修改，虽然规范对这样的操作进行了详细的定义，但为了可读性和可维护性，请不要这样做。

• Array.prototype.forEach(action[, thisObj])：action 接收三个参数 action(curVal, curInd, curArr)，分别当前元素，当前元素的索引值，当前遍历的数组。thisObj 指回调函数中 this 指向（对箭头函数不起作用），默认为 undefined。
• Array.prototype.keys()：返回一个 Array Iterator，其中包含当前数组的所有元素的索引值。
• Array.prototype.entries()：返回当前数组的（Array Iterator）迭代器对象，在迭代器中调用 next() 方法可获取下一个元素，next() 返回的是一个包含两个元素的对象 {done: bool, value: elemData}，其中 done 是一个布尔值，指示当前元素是否是最后一个元素（是则为 true，通常作为循环条件），而 value 就是元素的值，value 是一个拥有两个元素的数组 [index, element]。
• Array.prototype.every(callback[, thisArg])：只有全部元素都通过了 callback 的测试，才会返回 true。callback(curVal, curInd, curArr)，thisArg 是回调函数中的 this 指向（箭头函数无效）。
• Array.prototype.some(callback[, thisArg])：只要有至少一个元素通过了 callback 的测试，就返回 true。参数同上。
• Array.prototype.filter(callback[, thisArg])：返回一个包含了所有通过测试的元素的新数组，参数同上。
• Array.prototype.find(callback[, thisArg])：返回通过测试的第一个元素，如果没有则返回 undefined。
• Array.prototype.findIndex(callback[, thisArg])：返回通过测试的第一个元素的索引值，如果没有则返回 -1。
• Array.prototype.map(callback[, thisArg])：映射（加工），返回一个经映射后的元素组成的新数组，参数同上。
• Array.prototype.reduce(callback[, initialValue])：规约（收集），callback(lastResult, curVal, curInd, curArr) lastResult 是上轮累加的结果，initialValue 是初始种子，如果省略，则取第一个元素，并且从数组的第二个元素开始累加；如果未省略，则从第一个元素开始累加。其实规约的处理过程很简单：第一种情况（提供了初始种子），将这个初始种子（作为累加结果）放在某个地方，然后依次从数组中取出元素将其与上轮累加结果累加（调用 callback），直到数组元素全部取完；第二种情况（未提供初始种子），将数组的头部元素作为初始种子，将初始种子放在某个地方，然后依次从数组（头个元素除外）中取出元素将其与上轮累加结果累加（调用 callback），直到数组元素全部取完。最后返回累加结果。比如我要求数组元素的和：arr.reduce((a, b) => a + b)。
• Array.prototype.reduceRight(callback[, initialValue])：规约，和 arr.reduce() 一样，除了它按照 从右往左 方向遍历。

面向对象编程

在 JS 中，没有所谓的"类"，一切皆对象。那么只有对象是怎么实现"面向对象"的呢？与 Java、C++ 的面向对象风格不同，JS 的继承是 原型继承，每个对象都有一个隐藏属性 [[Prototype]]，在大多数浏览器中可以使用 __proto__ 来访问（读写），不过在 ES5 之后，建议使用规范 API：Object.getPrototypeOf(obj)读取、Object.setPrototypeOf(obj, newProto)写入。不过，修改对象的 [[Prototype]] 是一个 非常慢且影响性能的操作。无论是什么方式，都不建议在运行时修改对象的原型，要在创建对象的设置原型，建议使用 Object.create(proto) 方法来创建一个新对象，并使用指定的原型。

• 读取对象属性：先检查对象本身有没有指定属性，如果有则直接返回，否则检查 [[Prototype]] 原型对象上有没有，如果有则返回，否则继续递归的检查 [[Prototype]] 原型对象上是否有指定的属性，直到 [[Prototype]] 为 null 为止，最终返回 undefined。
• 写入对象属性：先检查对象本身有没有指定属性，如果有则直接给该属性赋值，如果没有则新建一个属性，并进行赋值，而不会查找原型链。

那么这个原型对象是谁创建的呢？不可能是自己生成的吧？这里只讨论典型情况：对象 obj 是调用所属构造函数创建的，即 let obj = new Foo()。语法和 Java、C++ 相似，没什么好讲的，对象 obj 是构造函数 Foo 的一个实例，这时候你查看 obj.__proto__ 会发现，它不是 undefined，说明在 new 操作过程中，为其设置了一个原型，那么这个原型是谁呢？Foo.prototype，没错，就是构造函数 Foo 的 prototype 属性，每个函数都有一个 prototype 属性，prototype 默认是只有一个属性（不计算隐藏属性）的对象，这个唯一的属性就是 constructor 构造器，它指向当前 prototype 对象所属的构造函数，在这里就是 Foo 了。

如何分清 prototype 和 [[Prototype]]？

• obj.[[Prototype]]：所有对象都有的隐藏属性，只要是对象就有该属性，大多数浏览器中可使用 __proto__ 访问，指向当前对象的原型对象，构成原型链，查找属性或方法时会沿着原型链一层一层往上搜寻，直到顶层 null。当然我们也可以创建一个没有原型的对象（原型为 null），使用 Object.create(null)。
• func.prototype：函数对象的自带属性，通常我们只关心构造函数，Constructor（构造函数）和 Prototype（原型对象）是一对的，当我们 new 一个对象时，JS 会自动将函数的 prototype 作为该新对象的原型，即 __proto__ 的指向，构造函数和原型对象互访的方法：Constructor.prototype根据构造函数获取原型对象、Prototype.constructor根据原型对象获取构造函数。

别急，我们来看这个例子：

'use strict';
let obj = {};
console.log(obj.__proto__ === Object.prototype); // true
console.log(obj.__proto__.__proto__ === null); // true
function func() {}
console.log(func.__proto__ === Function.prototype); // true
console.log(func.__proto__.__proto__ === Object.prototype); // true
console.log(func.__proto__.__proto__.__proto__ === null); // true

先来解释一下对象 obj：
obj 的原型是 Object.prototype 没啥好解释的，Object.prototype 的原型是 null 前面也说了。

再来解释一下函数 func：
函数也是对象，这在本文开头就说了，因此，函数对象的原型是 Function.prototype；而 Function.prototype 是一个普通对象，因此它的原型是 Object.prototype，而 Object.prototype 是 null。

清楚了没有？再来看这个例子：

'use strict';
console.log(typeof Object); // function
console.log(typeof Function); // function
console.log(Object.__proto__ === Function.prototype); // true
console.log(Object.__proto__.__proto__ === Object.prototype); // true
console.log(Object.__proto__.__proto__.__proto__ === null); // true
console.log(Function.__proto__ === Function.prototype); // true
console.log(Function.__proto__.__proto__ === Object.prototype); // true
console.log(Function.__proto__.__proto__.__proto__ === null); // true

Object、Function 都是函数，因此它们的原型是 Function.prototype；Function.prototype 是普通对象，因此它的原型是 Object.prototype，Object.prototype 的原型是 null。

Object.prototype 是几乎所有对象的原型（尽头），它的原型有点特殊，是 null。
为什么说是几乎，因为 JS 运行我们自由的修改对象的原型指向，如使用 let obj = Object.create(null) 创建了一个新对象 obj，该对象没有原型，因此它是一个干净的对象，没有命名污染。当然也可以直接使用 obj.__proto__ = null 来实现。注意，表面上我们将它的原型设为了 null，实际上是将它的 __proto__ 属性 delete 了，因此 obj.__proto__ === null 是 false 的，因为 obj 中不存在 __proto__ 属性了，尝试获取它的值也是得到 undefined。这时候如果你使用 obj instanceof Object 会发现，结果是 false！难道这个 obj 不是对象？！不是的，obj 是对象，因为 instanceof 的判断方法就是直接判断 obj.__proto__ === Object.prototype！这下知道了 instanceof 的原理了吧，不过我们可以使用 typeof 来获取 obj 的类型，结果是 'object'。

现在，我们来说一下 JS 的面向对象编程（基本准则）：

• 实例属性：放在构造函数的函数体中，如 this.xxx = xxx
• 实例方法：放在构造函数的 prototype 中，如 F.prototype.xxx = function() {}
• 静态属性：作为构造函数的自身属性来存储，只能通过 F.xxx 来访问
• 静态方法：作为构造函数的自身方法来存储，只能通过 F.xxx() 来访问

静态成员的放置没有什么疑问，关键是实例方法为什么要放在构造函数的 prototype 中呢？放在构造函数的函数体中不也可以吗，如 this.xxx = function() {}，为什么不这么做呢？因为这样会浪费不必要的内存呀！每创建一个新对象，在内存中就会有一个多余的函数对象生成，这个完全没有必要！因此实例方法说是说"实例"方法，实际上是一个额外接收 this 指针的全局函数，和静态函数没有区别，当然整个 this 参数是隐式传递的。那既然是全局函数，为什么不放在 F 构造函数中呢，作为它的一个方法？这是不行的，因为你访问对象的方法时，是使用 obj.method()，而不是 F.method()！你只能将实例方法放在 prototype 中才会被顺着原型链找到该方法，正确的获取 this 指向。这也是 prototype 的主要作用了。

面向对象的例子
A -> B -> C 三个类，继承关系从左往右（父类 -> 子类）

'use strict';
function A() {
    /*
     * this.prop = value;
     * ...
     */
}
function B() {
    A.call(this);
    // TODO
}
B.prototype = Object.create(A.prototype);
B.prototype.constructor = B;
function C() {
    B.call(this);
    // TODO
}
C.prototype = Object.create(B.prototype);
C.prototype.constructor = C;
let objA = new A(),
    objB = new B(),
    objC = new C();
console.log(objA instanceof Object); // true
console.log(objA instanceof A); // true
console.log(objB instanceof Object); // true
console.log(objB instanceof A); // true
console.log(objB instanceof B); // true
console.log(objC instanceof Object); // true
console.log(objC instanceof A); // true
console.log(objC instanceof B); // true
console.log(objC instanceof C); // true

获取对象的所有属性

1. for...in：依次访问一个对象及其原型链中所有可枚举的属性；
2. Object.keys(o)：访问一个对象中所有可枚举的属性（返回数组）；
3. Object.getOwnPropertyNames(o)：访问一个对象中的所有属性（返回数组）。

Object 构造函数
new Object([value])：如果没有参数，则返回一个没有属性的空对象；如果存在参数 value（基本类型），则返回参数 value 的包装类对象，如果 value 为 undefined 或 null，则返回一个没有属性的空对象。其中 new 可以省略，即当作普通函数来调用（可以看作是类型转换函数）。

Object 实例方法

• obj.hasOwnProperty(prop)：判断当前对象自身是否拥有给定属性
• prototypeObj.isPrototypeOf(obj)：判断当前对象是否位于给定对象的原型链中
• obj.propertyIsEnumerable(prop)：判断当前对象的给定（自身）属性是否可枚举
• object.valueOf()：返回当前对象的原始值，默认返回对象自身，包装类中有用
• object.toString()：返回当前对象的字符串描述，非区域敏感
• obj.toLocaleString()：返回当前对象的区域敏感的字符串描述，默认 toString()

Object 静态方法

• Object.assign(target, ...sources)：拷贝 sources 自身的可枚举属性值到 target 对象中（覆盖），并返回 target 对象。
• Object.create(proto[, propertiesObject])：创建一个新对象，它的原型为 proto，可选的为其设置自身属性（必须包含元信息，见下），返回新对象。
• Object.defineProperty(obj, prop, descriptor)：定义或修改一个对象的属性，并返回给定对象。obj 是要操作的对象，prop 是要操作的属性名，descriptor 是属性的描述（是一个对象，包含元信息）。属性描述符有两种形式：数据描述符（value = undefined 值，writable = false 可写）、存取描述符（get = undefined getter 方法，set = undefined setter 方法），注意，属性描述符只能是其中的一种，不能混搭！除此之外，它们还有两个共同的键值：configurable = false 当且仅当 configurable 为 true 时，该属性描述符才能够被改变，同时该属性也能从对应的对象上被删除；enumerable = false 当一个属性的 enumerable 为 true 时，该属性才是可枚举的，可以被诸如 for...in，Object.keys() 方法来访问。如果一个描述符不具有 value, writable, get 和 set 任意一个关键字，那么它将被认为是一个数据描述符。
• Object.defineProperties(obj, props)：定义或修改一个对象的多个属性，并返回给定对象。例子：Object.defineProperties(obj, {prop1: {...}, ..., propN: {...}})。
• Object.getOwnPropertyNames(obj)：返回一个由指定对象的所有自身属性的属性名（不包括 Symbol 值作为名称的属性）组成的数组。
• Object.getOwnPropertySymbols(obj)：返回一个由指定对象的所有自身属性的属性名（不包括 String 值作为名称的属性）组成的数组。
• Object.getOwnPropertyDescriptor(obj, prop)：获取给定对象的自有属性的属性描述符（一个对象），其中 prop 是字符串类型。
• Object.getPrototypeOf(object)：返回指定对象的原型（内部[[Prototype]]属性的值），用来替代 __proto__。
• Object.setPrototypeOf(obj, prototype)：设置给定对象的原型（内部[[Prototype]]属性的值），用来替代 __proto__，并返回传入的对象。
• Object.is(value1, value2)：判等，与 === 相同，但 is() 认为 +0 和 -0 不相等，认为 NaN 与 NaN 相等。
• Object.preventExtensions(obj)：将给定对象变成不可扩展对象，即不能添加新的属性。
• Object.isExtensible(obj)：判断一个对象是否是可扩展的，即可以添加新的属性。
• Object.freeze(obj)：冻结一个对象，冻结后的对象是只读的，不可进行任何修改，否则抛出异常。浅冻结，也就是只会冻结一层，如需深冻结，需要递归的冻结内部对象/数组。
• Object.isFrozen(obj)：判断一个对象是否被冻结。
• Object.seal(obj)：密封给定对象，密封对象将会阻止向对象添加新的属性，并且会将所有已有属性的可配置性（configurable）置为不可配置（false），即不可修改属性的描述或删除属性。但是可写性描述（writable）为可写（true）的属性的值仍然可以被修改。
• Object.isSealed(obj)：判断一个对象是否被密封。
• Object.keys(obj)：返回一个由给定对象自身可枚举属性名组成的数组。
• Object.values(obj)：返回一个由给定对象自身可枚举属性值组成的数组。
• Object.entries(obj)：返回给定对象的所有可枚举属性（不包括原型链上的）的键值对 key-value 数组（二维数组）。

除了使用 Object.defineProperty() 方法来定义 getter-setter 方法外，还可以直接使用字面量方法，具体的语法如下（后一种是 ES6 新增的语法，允许在运行时计算属性的名称，其中方括号中的是一个 JS 表达式，其值应为字符串类型，该语法适用于对象的全部属性，而不仅是 getter-setter 伪属性）：

// getter/setter for 'key'
let obj = {
    get key() {
        // TODO
        return someValue;
    },
    set key(newValue) {
        // TODO
    }
};
// getter/setter for 'key'
let key = 'keyName';
let obj = {
    get [key]() {
        // TODO
        return someValue;
    },
    set [key](newValue) {
        // TODO
    }
};

JSON

JSON（JavaScript Object Notation，JS 对象表示法），是一种由 道格拉斯·克罗克福特 构想设计、轻量级的数据交换格式，以文本为基础，且易于让人阅读。尽管 JSON 是 Javascript 的一个子集，但 JSON 是独立于语言的文本格式，并且采用了类似于 C 语言家族的一些习惯。

JSON 数据格式与语言无关，脱胎于 JavaScript，但目前很多编程语言都支持 JSON 格式数据的生成和解析。JSON 的官方 MIME 类型是 application/json，文件扩展名是 .json。

JSON 建构于两种结构：

• 键值对的集合。不同的语言中，它被理解为对象（object），纪录（record），结构（struct），字典（dictionary），哈希表（hash table），有键列表（keyed list），或者关联数组（associative array）。
• 值的有序列表。在大部分语言中，它被理解为数组（array）。

这两种结构分别对应 JavaScript 中的 对象 和 数组。注意，JSON 只是一个字符串！是一个纯文本！

• 对象：{k1: v1, k2: v2, ..., kN: vN}，key 必须显式得加上双引号
• 数组：[e1, e2, e3, ..., eN]

值（即对象中的 value、数组中的 element）可以是以下类型：

• null：空指针
• true/false：布尔值
• number：数值（十进制）
• string：字符串（双引号）
• array：数组
• object：对象

number 只支持十进制的整数、浮点数。其中浮点数支持科学记数法，即 1.3E4 表示 13000（E 大小写不敏感）。

string 必须使用双引号包围，包括 object 中的 key，这是为了适应 C/C++、Java 中的"单引号为字符，双引号为字符串"语法。此外，还支持一些转义序列：

• \"：双引号
• \\：反斜杠
• \/：正斜杠
• \b：退格符
• \t：制表符
• \r：回车符
• \n：换行符
• \f：换页符
• \uhhhh：UTF-16 code-unit

JS 内置的 JSON 全局对象包含两个方法，用于序列化和反序列化 JSON 数据：

• JSON.stringify(value[, replacer[, space]])：将 JS 对象/数组 转换为 JSON 字符串。
• JSON.parse(text[, reviver])：将 JSON 字符串转换为 JS 对象/数组。

DOM

什么是 DOM？
文档对象模型（DOM）是 HTML 和 XML 文档的编程接口。它提供了对文档的结构化表述，并定义了一种方式使得程序可以对该结构进行访问，从而改变文档的结构，样式和内容。DOM 将文档解析为一个由节点和对象（包含属性和方法的对象）组成的结构集合。简言之，它会将 web 页面和脚本或程序语言连接起来。

一个 web 页面是一个文档。这个文档可以在浏览器窗口或作为 HTML 源码显示出来。但上述两个情况中都是同一份文档。文档对象模型（DOM）提供了对同一份文档的另一种表现，存储和操作的方式。DOM 是 web 页面的完全的面向对象表述，它能够使用如 JavaScript 等脚本语言进行修改。

W3C DOM 和 WHATWG DOM 标准在绝大多数现代浏览器中都有对 DOM 的基本实现。许多浏览器提供了对 W3C 标准的扩展，所以在使用时必须注意，文档可能会在多种浏览器上使用不同的 DOM 来访问。

如何访问 DOM？
在 JS 中，一般通过 document 和 window 两个全局对象提供的 API 来操作 DOM。

DOM 其实就是文档树（Tree），既然是一棵树，那么肯定就有节点（Node）了。文档树就是由若干个节点组成的，如图所示：

Node 节点的类型

• Node.ELEMENT_NODE：1，HTML元素
• Node.ATTRIBUTE_NODE：2，元素属性
• Node.TEXT_NODE：3，文本节点
• Node.COMMENT_NODE：8，HTML注释
• Node.DOCUMENT_NODE：9，根节点
• Node.DOCUMENT_TYPE_NODE：10，DOCTYPE
• Node.DOCUMENT_FRAGMENT_NODE：11，文档片段

Node 是一个接口，上述的节点类型都实现了 Node 接口，因此它们具有一些共同的属性和方法。Node 有一个 nodeType 属性，表示 Node 的类型，它是一个整数，其对应的数值如上所示。

这些 Node 类型中，我们最常用的就是 element，text，attribute，comment，document，document_fragment这几种类型。

Element 类型
Element 提供了对元素标签名，子节点和特性的访问，我们常用 HTML 元素比如 div，span，a 等标签就是 element 中的一种。Element 有下面几条特性：

• nodeType 为 1
• nodeName 为元素标签名，tagName 也是返回标签名
• nodeValue 为 null
• parentNode 可能是 Document 或 Element
• 子节点可能是 Element，Text，Comment，Processing_Instruction，CDATASection 或 EntityReference

Text 类型
Text 表示文本节点，它包含的是纯文本内容，不能包含 html 代码，但可以包含转义后的 html 代码。Text 有下面的特性：

• nodeType 为 3
• nodeName 为 #text
• nodeValue 为文本内容
• parentNode 是一个 Element
• 没有子节点

Attr 类型
Attr 类型表示元素的属性，相当于元素的 attributes 属性中的节点，它有下面的特性：

• nodeType 值为 2
• nodeName 是属性的名称
• nodeValue 是属性的值
• parentNode 为 null

Comment 类型
Comment 表示 HTML 文档中的注释，它有下面的几种特征：

• nodeType 为 8
• nodeName 为 #comment
• nodeValue 为注释的内容
• parentNode 可能是 Document 或 Element
• 没有子节点

Document 类型
Document 表示文档，在浏览器中，document 对象是 HTMLDocument 的一个实例，表示整个页面，它同时也是 window 对象的一个属性。Document 有下面的特性：

• nodeType 为 9
• nodeName 为 #document
• nodeValue 为 null
• parentNode 为 null
• 子节点可能是一个 DocumentType 或 Element

DocumentFragment 类型
DocumentFragment 是所有节点中唯一一个没有对应标记的类型，它表示一种轻量级的文档，可能当作一个临时的仓库用来保存可能会添加到文档中的节点。DocumentFragment 有下面的特性：

• nodeType 为 11
• nodeName 为 #document-fragment
• nodeValue 为 null
• parentNode 为 null

节点创建型 API
createElement
createElement 通过传入指定的一个标签名来创建一个元素，如果传入的标签名是一个未知的，则会创建一个自定义的标签，注意：IE8 以下浏览器不支持自定义标签。
var div = document.createElement("div");
使用 createElement 要注意：通过 createElement 创建的元素并不属于 html 文档，它只是创建出来，并未添加到 html 文档中，要调用 appendChild 或 insertBefore 等方法将其添加到 HTML 文档树中。

createTextNode
createTextNode 用来创建一个文本节点，用法如下：
var textNode = document.createTextNode("一个 textNode");
createTextNode 接收一个参数，这个参数就是文本节点中的文本，和 createElement 一样，创建后的文本节点也只是独立的一个节点，同样需要 appendChild 将其添加到 HTML 文档树中。

cloneNode
cloneNode 会返回当前节点的一个副本，它接收一个 bool 参数，用来表示是否复制子元素，使用如下：

var parent = document.getElementById("parentElement"); 
var parent2 = parent.cloneNode(true);// 传入true
parent2.id = "parent2";

这段代码通过 cloneNode 复制了一份 parent 元素，其中 cloneNode 的参数为 true，表示 parent 的子节点也被复制，如果传入 false，则表示只复制了 parent 节点。要注意的几点：
1）和 createElement 一样，cloneNode 创建的节点只是游离于 html 文档外的节点，要调用 appendChild 方法才能添加到文档树中；
2）如果复制的元素有 id，则其副本同样会包含该 id，由于 id 具有唯一性，所以在复制节点后必须要修改其 id；
3）调用接收的 bool 参数最好传入，如果不传入该参数，不同浏览器对其默认值的处理可能不同。
4）如果是通过 addEventListener 或如 onclick 进行绑定事件，则副本节点不会绑定该事件；
5）如果是内联方式绑定比如<div onclick="showParent()"></div>，这样的话，副本节点同样会触发事件。

createDocumentFragment
createDocumentFragment 方法用来创建一个 DocumentFragment。在前面我们说到 DocumentFragment 表示一种轻量级的文档，它的作用主要是存储临时的节点用来准备添加到文档中。
createDocumentFragment 方法主要是用于添加大量节点到文档中时会使用到。假设要循环一组数据，然后创建多个节点添加到文档中，初始版本如下：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>hello, world!</title>
  </head>
  <body>
    <ul id="list"></ul>
    <button type="button" id="btnAdd">点我添加</button>
    <script>
      document.getElementById('btnAdd').onclick = function() {
        let list = document.getElementById('list');
        for (let i = 0, item; i < 1000; i++) {
          item = document.createElement('li');
          item.textContent = i;
          list.appendChild(item);
        }
      };
    </script>
  </body>
</html>

可以看出，每循环一次，就要调用一次 list.appendChild(item)，即每次循环都要修改 DOM 树。这个过程会造成浏览器的回流，所谓回流简单说就是指元素大小和位置会被重新计算，如果添加的元素太多，会造成性能问题。这个时候就需要使用 createDocumentFragment 了，无论多少次循环，都只是在内存中添加节点而已，只需在循环结束后一次性添加到 DOM 树即可。改进版本如下：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>hello, world!</title>
  </head>
  <body>
    <ul id="list"></ul>
    <button type="button" id="btnAdd">点我添加</button>
    <script>
      document.getElementById('btnAdd').onclick = function() {
        let list = document.getElementById('list');
        let frag = document.createDocumentFragment();
        for (let item, i = 0; i < 1000; i++) {
          item = document.createElement('li');
          item.textContent = i;
          frag.appendChild(item);
        }
        list.appendChild(frag);
      };
    </script>
  </body>
</html>

创建型 API 总结
创建型 API 主要包括 createElement，createTextNode，cloneNode 和 createDocumentFragment 四个方法，需要注意下面几点：
1）新创建的节点只是一个孤立的节点，要通过 appendChild 等方法添加到文档中
2）cloneNode 要注意被复制的节点是否包含子节点以及事件绑定等问题
3）使用 createDocumentFragment 来解决添加大量节点时的性能问题

页面修改型 API
前面我们提到创建型 API，它们只是创建节点（只存在于内存中），并没有真正修改页面内容，必须要调用 appendChild 等方法来将其添加到文档树中。修改页面内容的 API 主要包括：appendChild，insertBefore，removeChild，replaceChild。

appendChild
appendChild 我们在前面已经用到多次，就是将指定的节点添加到调用节点的子元素的末尾。调用方法如下：parent.appendChild(child);
child 节点将会作为 parent 节点的最后一个子节点。appendChild 这个方法很简单，但是还有一点需要注意：如果被添加的节点是一个页面中已存在（同一个引用）的节点，则执行后这个节点将会添加到指定位置，其原本所在的位置将移除该节点，也就是说不会同时存在两个相同节点在页面上，相当于把这个节点移动到另一个地方。我们来看例子：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>hello, world!</title>
  </head>
  <body>
    <ul id="list">
      <li id="1th-child">第一个子节点</li>
      <li id="2th-child">第二个子节点</li>
      <li id="3th-child">第三个子节点</li>
    </ul>
    <button type="button" id="btnAdd">点击添加</button>
    <button type="button" id="btnMov">点击移动</button>
    <script>
      document.getElementById('btnAdd').onclick = function() {
        let child3 = document.getElementById('3th-child');
        let child4 = child3.cloneNode(true);
        child4.id = '4th-child';
        child4.textContent = '第四个子节点';
        document.getElementById('list').appendChild(child4);
      };
      document.getElementById('btnMov').onclick = function() {
        let child1 = document.getElementById('1th-child');
        document.getElementById('list').appendChild(child1);
      };
    </script>
  </body>
</html>

insertBefore
insertBefore 用来在指定节点前面插入一个新节点，用法如下：
parentNode.insertBefore(newNode, refNode);
parentNode 表示新节点所属的父节点，newNode 表示要添加的新节点，refNode 表示参照节点，新节点会添加到这个节点之前。

个人感觉这个 API 设计的不太好，parentNode 完全是多余的，我只需要知道 refNode 即可，即 refNode.insertBefore(newNode)。

和 appendChild 一样，如果插入的节点是页面上的节点（同一引用），则会移动该节点到指定位置，并且保留其绑定的事件。

关于第二个参数参照节点还有几个注意的地方：
1）refNode 是必传的，如果不传该参数会报错
2）如果 refNode 是 undefined 或 null，则 insertBefore 会将节点添加到子元素的末尾

removeChild
删除调用节点的指定子节点，并返回被删子节点的引用（依然存在于内存之中），用法：parentNode.removeChild(node)。为了确保不会出错，我们可以先通过子节点自身获取它的父节点，然后再删除它自己，即 node.parentNode.removeChild(node)。

replaceChild
替换调用节点的指定子节点，并返回被替换掉的子节点引用。用法如下：
parent.replaceChild(newChild, oldChild);
newChild 是替换的节点，可以是新的节点，也可以是页面上的节点，如果是页面上的节点，它将被移动到新的位置；oldChild 是被替换的节点。

页面修改型 API 总结
页面修改型 API 主要是这四个接口，要注意是：
不管是新增还是替换节点，如果新增或替换的节点是原本存在页面上的，则只会移动原有节点；并且节点本身绑定的事件不会消失，会一直保留着。

节点查询型 API

• document.getElementById(id)：返回给定 id 的 Element，不存在则返回 null。
• document.getElementsByClassName(class)：返回给定 class 的 Elements（实时的 HTMLCollection），不存在则返回空 HTMLCollection。可同时指定多个 class，多个 className 之间使用空格分隔。
• document.getElementsByTagName(tag)：返回给定 tagName 的 Elements（实时的 HTMLCollection），不存在则返回空 HTMLCollection。如果标签名为 * 则表示获取所有标签。
• document.querySelector(cssSelector)：返回给定 CSS选择器 匹配的第一个 Element，如果没有则返回 null。
• document.querySelectorAll(cssSelector)：返回给定 CSS 选择器匹配的 Elements（非实时 NodeList），不存在则返回空 NodeList。

节点关系型 API
父关系型 API
parentNode：返回当前节点的父节点，根节点的父节点为 null。
parentElement：返回当前节点的父元素，父节点必须是 Element，否则返回 null。

兄弟关系型 API
previousSibling：返回当前节点的前一兄弟节点。
nextSibling：返回当前节点的后一兄弟节点。
previousElementSibling：返回当前节点的前一兄弟节点，其类型须为 Element，否则返回 null。
nextElementSibling：返回当前节点的后一兄弟节点，其类型须为 Element，否则返回 null。

子关系型 API
childNodes：返回当前节点的直接子节点（实时 NodeList）。
children：返回当前节点的直接子节点（实时 HTMLCollection），类型均为 Element。
firstNode：返回当前节点的第一个直接子节点。
lastNode：返回当前节点的最后一个直接子节点。
hasChildNodes()：判断当前节点是否包含子节点。

元素属性型 API
hasAttribute(attrName)：判断当前元素是否存在给定属性，返回布尔值。
getAttribute(attrName)：获取当前元素的给定属性值（字符串），不存在则返回 null 或空串，建议在 getAttribute 前使用 hasAttribute 来检测是否存在给定属性。
setAttribute(attrName, attrValue)：设置当前元素的给定属性值（修改或新增）。
removeAttribute(attrName)：删除当前元素的给定属性。

HTMLCollection 与 NodeList 的区别，都是类数组对象。

• HTMLCollection 实例对象的成员只能是 Element 节点，NodeList 实例对象的成员可以包含其他节点。
• HTMLCollection 实例对象都是动态集合，节点的变化会实时反映在集合中。NodeList 实例对象可以是静态集合。
• HTMLCollection 实例对象可以用 id 属性或 name 属性引用节点元素，NodeList 只能使用数字索引引用。

window/document 对象

'use strict';
/* 文档结构，从上到下 */
console.log(window); // 浏览器窗口
console.log(document); // 整个 HTML 文档
console.log(document.doctype); // DOCTYPE 声明
console.log(document.documentElement); // <html>...</html>
console.log(document.head); // <head>...</head>
console.log(document.body); // <body>...</body>
/* window.location */
$('<button type="button">window.location.reload()</button>').click(function() {
    window.location.reload(); // 重新加载当前页面
}).appendTo(document.body);
$('<br>').appendTo(document.body);
$('<button type="button">window.location.assign()</button>').click(function() {
    window.location.assign('https://www.baidu.com/'); // 跳转至给定 url，相当于点击超链接
}).appendTo(document.body);
$('<br>').appendTo(document.body);
$('<button type="button">window.location.replace()</button>').click(function() {
    window.location.replace('https://www.baidu.com/'); // 跳转至给定 url，并删除当前页面的浏览历史
}).appendTo(document.body);
$('<br>').appendTo(document.body);
console.log(window.location.href);      // http://www.zfl.com/index.html?lang=zh_CN#debug
console.log(window.location.protocol);  // 协议 http:
console.log(window.location.hostname);  // 主机 www.zfl.com
console.log(window.location.port);      // 端口 (空，默认 80)
console.log(window.location.host);      // 主机+端口 www.zfl.com
console.log(window.location.pathname);  // 路径 /index.html
console.log(window.location.search);    // 参数 ?lang=zh_CN
console.log(window.location.hash);      // 描点 #debug
/* window.history */
console.log(history.length);    // 历史记录的长度
$('<button type="button">后退一页</button>').click(function() {
    history.back();
}).appendTo(document.body);
$('<br>').appendTo(document.body);
$('<button type="button">前进一页</button>').click(function() {
    history.forward();
}).appendTo(document.body);
$('<br>').appendTo(document.body);
// history.go(offset|url);
$('<button type="button">后退 2 页</button>').click(function() {
    history.go(-2);
}).appendTo(document.body);
$('<br>').appendTo(document.body);
$('<button type="button">前进 2 页</button>').click(function() {
    history.go(2);
}).appendTo(document.body);
$('<br>').appendTo(document.body);
/* window 输入输出 */
// alert() 方法用于显示带有一条指定消息和一个确认按钮的警告框
$('<button type="button">alert()</button>').click(() => alert('hello, world!')).appendTo(document.body);
$('<br>').appendTo(document.body);
// confirm() 方法用于显示一个带有指定消息和确认及取消按钮的对话框
// 如果访问者点击"确定"，此方法返回 true，否则返回 false
$('<button type="button">confirm()</button>').click(
    () => console.log(confirm('hello, world!'))
).appendTo(document.body);
$('<br>').appendTo(document.body);
// prompt() 方法用于显示可提示用户进行输入的对话框，并返回输入的字符串
$('<button type="button">prompt()</button>').click(function() {
    // prompt(msg, defaultText), 两个参数均为可选的
    console.log(prompt('请输入任意字符串', '请输入任意字符串'));
}).appendTo(document.body);
$('<br>').appendTo(document.body);
/* window.close() 关闭当前窗口 Chrome 无效 */
$('<button type="button">close()</button>').click(() => window.close()).appendTo(document.body);
$('<br>').appendTo(document.body);