JavaScript的数据类型

概述

简介

JavaScript 语言的每一个值，都属于某一种数据类型。JavaScript 的数据类型，共有六种。（ES6 又新增了第七种 Symbol 类型的值，本教程不涉及。）

• 数值（number）：整数和小数（比如1和3.14）。
• 字符串（string）：文本（比如Hello World）。
• 布尔值（boolean）：表示真伪的两个特殊值，即true（真）和false（假）。
• undefined：表示“未定义”或不存在，即由于目前没有定义，所以此处暂时没有任何值。
• null：表示空值，即此处的值为空。
• 对象（object）：各种值组成的集合。

通常，数值、字符串、布尔值这三种类型，合称为原始类型（primitive type）的值，即它们是最基本的数据类型，不能再细分了。对象则称为合成类型（complex type）的值，因为一个对象往往是多个原始类型的值的合成，可以看作是一个存放各种值的容器。至于undefined和null，一般将它们看成两个特殊值。

对象是最复杂的数据类型，又可以分成三个子类型。

• 狭义的对象（object）
• 数组（array）
• 函数（function）

狭义的对象和数组是两种不同的数据组合方式，除非特别声明，本教程的“对象”都特指狭义的对象。函数其实是处理数据的方法，JavaScript 把它当成一种数据类型，可以赋值给变量，这为编程带来了很大的灵活性，也为 JavaScript 的“函数式编程”奠定了基础。

总结：

• JavaScript 共有六种数据类型（ES6 又新增了第七种 Symbol类型）：数值、字符串、布尔值、undefined、null、对象。
• 数值、字符串、布尔值合称为原始类型，即不可再分，为最基本的数据类型。
• 对象被称为合成类型的值，一个对象往往是多个原始类型的值的合成，又可以分为三个子类型：狭义的对象（object）、数组（array）、函数（function）

typeof 运算符

typeof运算符可以返回一个值的数据类型。

数值、字符串、布尔值分别返回number、string、boolean。

复制代码

typeof 123 // "number"
typeof '123' // "string"
typeof false // "boolean"

函数返回function。

复制代码

function f() {}
typeof f
// "function"

undefined返回undefined。

复制代码

typeof undefined
// "undefined"

利用这一点，typeof可以用来检查一个没有声明的变量，而不报错。

复制代码

v
// ReferenceError: v is not defined

typeof v
// "undefined"

上面代码中，变量v没有用var命令声明，直接使用就会报错。但是，放在typeof后面，就不报错了，而是返回undefined。

实际编程中，这个特点通常用在判断语句。

复制代码

// 错误的写法
if (v) {
  // ...
}
// ReferenceError: v is not defined

// 正确的写法
if (typeof v === "undefined") {
  // ...
}

对象返回object。

利用这一点，typeof可以用来检查一个没有声明的变量，而不报错。

复制代码

v
// ReferenceError: v is not defined

typeof v
// "undefined"

上面代码中，变量v没有用var命令声明，直接使用就会报错。但是，放在typeof后面，就不报错了，而是返回undefined。

实际编程中，这个特点通常用在判断语句。

复制代码

// 错误的写法
if (v) {
  // ...
}
// ReferenceError: v is not defined

// 正确的写法
if (typeof v === "undefined") {
  // ...
}

对象返回object。

instanceof运算符可以区分数组和对象。

复制代码

var o = {};
var a = [];

o instanceof Array // false
a instanceof Array // true

null返回object。

复制代码

typeof null // "object"

null的类型是object，这是由于历史原因造成的。1995年的 JavaScript 语言第一版，只设计了五种数据类型（对象、整数、浮点数、字符串和布尔值），没考虑null，只把它当作object的一种特殊值。后来null独立出来，作为一种单独的数据类型，为了兼容以前的代码，typeof null返回object就没法改变了。

总结：

• typeof运算符可以返回一个值的数据类型。
• 数值、字符串、布尔值分别返回number、string、boolean。
• 函数返回function。undefined返回undefined。null返回object。
• typeof可以用来检查一个没有声明的变量，而不报错。
• instanceof运算符可以区分数组和对象。

null, undefined 和布尔值

null 和 undefined

null与undefined都可以表示“没有”，含义非常相似。将一个变量赋值为undefined或null，老实说，语法效果几乎没区别。

复制代码

var a = undefined;
// 或者
var a = null;

上面代码中，变量a分别被赋值为undefined和null，这两种写法的效果几乎等价。

在if语句中，它们都会被自动转为false，相等运算符（==）甚至直接报告两者相等。

复制代码

if (!undefined) {
  console.log('undefined is false');
}
// undefined is false

if (!null) {
  console.log('null is false');
}
// null is false

undefined == null
// true

从上面代码可见，两者的行为是何等相似！谷歌公司开发的 JavaScript 语言的替代品 Dart 语言，就明确规定只有null，没有undefined！

既然含义与用法都差不多，为什么要同时设置两个这样的值，这不是无端增加复杂度，令初学者困扰吗？这与历史原因有关。

1995年 JavaScript 诞生时，最初像 Java 一样，只设置了null表示"无"。根据 C 语言的传统，null可以自动转为0。

复制代码

Number(null) // 0
5 + null // 5

上面代码中，null转为数字时，自动变成0。

但是，JavaScript 的设计者 Brendan Eich，觉得这样做还不够。首先，第一版的 JavaScript 里面，null就像在 Java 里一样，被当成一个对象，Brendan Eich 觉得表示“无”的值最好不是对象。其次，那时的 JavaScript 不包括错误处理机制，Brendan Eich 觉得，如果null自动转为0，很不容易发现错误。

因此，他又设计了一个undefined。区别是这样的：null是一个表示“空”的对象，转为数值时为0；undefined是一个表示"此处无定义"的原始值，转为数值时为NaN。

复制代码

Number(undefined) // NaN
5 + undefined // NaN

对于null和undefined，大致可以像下面这样理解。

null表示空值，即该处的值现在为空。调用函数时，某个参数未设置任何值，这时就可以传入null，表示该参数为空。比如，某个函数接受引擎抛出的错误作为参数，如果运行过程中未出错，那么这个参数就会传入null，表示未发生错误。

undefined表示“未定义”，下面是返回undefined的典型场景。

复制代码

// 变量声明了，但没有赋值
var i;
i // undefined

// 调用函数时，应该提供的参数没有提供，该参数等于 undefined
function f(x) {
  return x;
}
f() // undefined

// 对象没有赋值的属性
var  o = new Object();
o.p // undefined

// 函数没有返回值时，默认返回 undefined
function f() {}
f() // undefined

总结：

• null与undefined都可以表示“没有”，含义非常相似，语法效果几乎没区别。
• null表示空值，即该处的值现在为空。调用函数时，某个参数未设置任何值，这时就可以传入null，表示该参数为空。
• undefined表示“未定义”。

布尔值

布尔值代表“真”和“假”两个状态。“真”用关键字true表示，“假”用关键字false表示。布尔值只有这两个值。

下列运算符会返回布尔值：

• 前置逻辑运算符： ! (Not)
• 相等运算符：===，!==，==，!=
• 比较运算符：>，>=，<，<=

如果 JavaScript 预期某个位置应该是布尔值，会将该位置上现有的值自动转为布尔值。转换规则是除了下面六个值被转为false，其他值都视为true。

• undefined
• null
• false
• 0
• NaN
• ""或''（空字符串）

布尔值往往用于程序流程的控制，请看一个例子。

复制代码

if ('') {
  console.log('true');
}
// 没有任何输出

上面代码中，if命令后面的判断条件，预期应该是一个布尔值，所以 JavaScript 自动将空字符串，转为布尔值false，导致程序不会进入代码块，所以没有任何输出。

注意，空数组（[]）和空对象（{}）对应的布尔值，都是true。

复制代码

if ([]) {
  console.log('true');
}
// true

if ({}) {
  console.log('true');
}
// true

总结：

• 布尔值代表“真”和“假”两个状态。“真”用关键字true表示，“假”用关键字false表示。布尔值只有这两个值。
• 除了undefined、null、false、0、NaN、(""或'')六个值被转为false，其他值都视为true。
• 空数组（[]）和空对象（{}）对应的布尔值，都是true。

数值

概述

JavaScript 内部，所有数字都是以64位浮点数形式储存，即使整数也是如此。所以，1与1.0是相同的，是同一个数。

复制代码

1 === 1.0 // true

这就是说，JavaScript 语言的底层根本没有整数，所有数字都是小数（64位浮点数）。容易造成混淆的是，某些运算只有整数才能完成，此时 JavaScript 会自动把64位浮点数，转成32位整数，然后再进行运算。

由于浮点数不是精确的值，所以涉及小数的比较和运算要特别小心。

复制代码

0.1 + 0.2 === 0.3
// false

0.3 / 0.1
// 2.9999999999999996

(0.3 - 0.2) === (0.2 - 0.1)
// false

根据国际标准 IEEE 754，JavaScript 浮点数的64个二进制位，从最左边开始，是这样组成的。

• 第1位：符号位，0表示正数，1表示负数
• 第2位到第12位（共11位）：指数部分
• 第13位到第64位（共52位）：小数部分（即有效数字）

符号位决定了一个数的正负，指数部分决定了数值的大小，小数部分决定了数值的精度。

指数部分一共有11个二进制位，因此大小范围就是0到2047。IEEE 754 规定，如果指数部分的值在0到2047之间（不含两个端点），那么有效数字的第一位默认总是1，不保存在64位浮点数之中。也就是说，有效数字这时总是1.xx...xx的形式，其中xx..xx的部分保存在64位浮点数之中，最长可能为52位。因此，JavaScript 提供的有效数字最长为53个二进制位。

复制代码

(-1)^符号位 * 1.xx...xx * 2^指数部分

上面公式是正常情况下（指数部分在0到2047之间），一个数在 JavaScript 内部实际的表示形式。

精度最多只能到53个二进制位，这意味着，绝对值小于2的53次方的整数，即-253到253，都可以精确表示。

复制代码

Math.pow(2, 53)
// 9007199254740992

Math.pow(2, 53) + 1
// 9007199254740992

Math.pow(2, 53) + 2
// 9007199254740994

Math.pow(2, 53) + 3
// 9007199254740996

Math.pow(2, 53) + 4
// 9007199254740996

上面代码中，大于2的53次方以后，整数运算的结果开始出现错误。所以，大于2的53次方的数值，都无法保持精度。由于2的53次方是一个16位的十进制数值，所以简单的法则就是，JavaScript 对15位的十进制数都可以精确处理。

复制代码

Math.pow(2, 53)
// 9007199254740992

// 多出的三个有效数字，将无法保存
9007199254740992111
// 9007199254740992000

上面示例表明，大于2的53次方以后，多出来的有效数字（最后三位的111）都会无法保存，变成0。

根据标准，64位浮点数的指数部分的长度是11个二进制位，意味着指数部分的最大值是2047（2的11次方减1）。也就是说，64位浮点数的指数部分的值最大为2047，分出一半表示负数，则 JavaScript 能够表示的数值范围为21024到2-1023（开区间），超出这个范围的数无法表示。

如果一个数大于等于2的1024次方，那么就会发生“正向溢出”，即 JavaScript 无法表示这么大的数，这时就会返回Infinity。

复制代码

Math.pow(2, 1024) // Infinity

如果一个数小于等于2的-1075次方（指数部分最小值-1023，再加上小数部分的52位），那么就会发生为“负向溢出”，即 JavaScript 无法表示这么小的数，这时会直接返回0。

复制代码

Math.pow(2, -1075) // 0

下面是一个实际的例子。

复制代码

var x = 0.5;

for(var i = 0; i < 25; i++) {
  x = x * x;
}

x // 0

上面代码中，对0.5连续做25次平方，由于最后结果太接近0，超出了可表示的范围，JavaScript 就直接将其转为0。

JavaScript 提供Number对象的MAX_VALUE和MIN_VALUE属性，返回可以表示的具体的最大值和最小值。

复制代码

Number.MAX_VALUE // 1.7976931348623157e+308
Number.MIN_VALUE // 5e-324

总结：

• JavaScript 内部，所有数字都是以64位浮点数形式储存。
• JavaScript 浮点数的64个二进制位，从最左边开始：第1位是符号位，0表示正数，1表示负数；第2位到第12位（共11位）是指数部分；第12位到第64位（共52位）是小数部分（即有效数字）。
• 符号位决定了一个数的正负，指数部分决定了数值的大小，小数部分决定了数值的精度。
• JavaScript 提供Number对象的MAX_VALUE和MIN_VALUE属性，返回可以表示的具体的最大值和最小值。
• 无法表示的数字，就会返回Infinity表示“无穷”。

数值的表示法

JavaScript 的数值有多种表示方法，可以用字面形式直接表示，比如35（十进制）和0xFF（十六进制）。

数值也可以采用科学计数法表示，下面是几个科学计数法的例子。

复制代码

123e3 // 123000
123e-3 // 0.123
-3.1E+12
.1e-23

科学计数法允许字母e或E的后面，跟着一个整数，表示这个数值的指数部分。

以下两种情况，JavaScript 会自动将数值转为科学计数法表示，其他情况都采用字面形式直接表示。

（1）小数点前的数字多于21位。

复制代码

1234567890123456789012
// 1.2345678901234568e+21

123456789012345678901
// 123456789012345680000

（2）小数点后的零多于5个。

复制代码

// 小数点后紧跟5个以上的零，
// 就自动转为科学计数法
0.0000003 // 3e-7

// 否则，就保持原来的字面形式
0.000003 // 0.000003

数值的进制

使用字面量（literal）直接表示一个数值时，JavaScript 对整数提供四种进制的表示方法：十进制、十六进制、八进制、二进制。

• 十进制：没有前导0的数值。
• 八进制：有前缀0o或0O的数值，或者有前导0、且只用到0-7的八个阿拉伯数字的数值。
• 十六进制：有前缀0x或0X的数值。
• 二进制：有前缀0b或0B的数值。

默认情况下，JavaScript 内部会自动将八进制、十六进制、二进制转为十进制。下面是一些例子。

复制代码

0xff // 255
0o377 // 255
0b11 // 3

如果八进制、十六进制、二进制的数值里面，出现不属于该进制的数字，就会报错。

复制代码

0xzz // 报错
0o88 // 报错
0b22 // 报错

上面代码中，十六进制出现了字母z、八进制出现数字8、二进制出现数字2，因此报错。

通常来说，有前导0的数值会被视为八进制，但是如果前导0后面有数字8和9，则该数值被视为十进制。

复制代码

0888 // 888
0777 // 511

前导0表示八进制，处理时很容易造成混乱。ES5 的严格模式和 ES6，已经废除了这种表示法，但是浏览器为了兼容以前的代码，目前还继续支持这种表示法。

特殊数值

JavaScript 提供了几个特殊的数值。

正零和负零

前面说过，JavaScript 的64位浮点数之中，有一个二进制位是符号位。这意味着，任何一个数都有一个对应的负值，就连0也不例外。

JavaScript 内部实际上存在2个0：一个是+0，一个是-0，区别就是64位浮点数表示法的符号位不同。它们是等价的。

复制代码

-0 === +0 // true
0 === -0 // true
0 === +0 // true

几乎所有场合，正零和负零都会被当作正常的0。

复制代码

+0 // 0
-0 // 0
(-0).toString() // '0'
(+0).toString() // '0'

唯一有区别的场合是，+0或-0当作分母，返回的值是不相等的。

复制代码

(1 / +0) === (1 / -0) // false

上面的代码之所以出现这样结果，是因为除以正零得到+Infinity，除以负零得到-Infinity，这两者是不相等的（关于Infinity详见下文）。

NaN

1）含义

NaN是 JavaScript 的特殊值，表示“非数字”（Not a Number），主要出现在将字符串解析成数字出错的场合。

复制代码

5 - 'x' // NaN

上面代码运行时，会自动将字符串x转为数值，但是由于x不是数值，所以最后得到结果为NaN，表示它是“非数字”（NaN）。

另外，一些数学函数的运算结果会出现NaN。

复制代码

Math.acos(2) // NaN
Math.log(-1) // NaN
Math.sqrt(-1) // NaN

0除以0也会得到NaN。

复制代码

0 / 0 // NaN

需要注意的是，NaN不是独立的数据类型，而是一个特殊数值，它的数据类型依然属于Number，使用typeof运算符可以看得很清楚。

复制代码

typeof NaN // 'number'

（2）运算规则

NaN不等于任何值，包括它本身。

复制代码

NaN === NaN // false

数组的indexOf方法内部使用的是严格相等运算符，所以该方法对NaN不成立。

复制代码

[NaN].indexOf(NaN) // -1

NaN在布尔运算时被当作false。

复制代码

Boolean(NaN) // false

NaN与任何数（包括它自己）的运算，得到的都是NaN。

复制代码

NaN + 32 // NaN
NaN - 32 // NaN
NaN * 32 // NaN
NaN / 32 // NaN

Infinity

（1）含义

Infinity表示“无穷”，用来表示两种场景。一种是一个正的数值太大，或一个负的数值太小，无法表示；另一种是非0数值除以0，得到Infinity。

复制代码

// 场景一
Math.pow(2, 1024)
// Infinity

// 场景二
0 / 0 // NaN
1 / 0 // Infinity

上面代码中，第一个场景是一个表达式的计算结果太大，超出了能够表示的范围，因此返回Infinity。第二个场景是0除以0会得到NaN，而非0数值除以0，会返回Infinity。

Infinity有正负之分，Infinity表示正的无穷，-Infinity表示负的无穷。

复制代码

Infinity === -Infinity // false

1 / -0 // -Infinity
-1 / -0 // Infinity

上面代码中，非零正数除以-0，会得到-Infinity，负数除以-0，会得到Infinity。

由于数值正向溢出（overflow）、负向溢出（underflow）和被0除，JavaScript 都不报错，所以单纯的数学运算几乎没有可能抛出错误。

Infinity大于一切数值（除了NaN），-Infinity小于一切数值（除了NaN）。

复制代码

Infinity > 1000 // true
-Infinity < -1000 // true

Infinity与NaN比较，总是返回false。

复制代码

Infinity > NaN // false
-Infinity > NaN // false

Infinity < NaN // false
-Infinity < NaN // false

（2）运算规则

Infinity的四则运算，符合无穷的数学计算规则。

复制代码

5 * Infinity // Infinity
5 - Infinity // -Infinity
Infinity / 5 // Infinity
5 / Infinity // 0

0乘以Infinity，返回NaN；0除以Infinity，返回0；Infinity除以0，返回Infinity。

复制代码

0 * Infinity // NaN
0 / Infinity // 0
Infinity / 0 // Infinity

Infinity加上或乘以Infinity，返回的还是Infinity。

复制代码

Infinity + Infinity // Infinity
Infinity * Infinity // Infinity

Infinity减去或除以Infinity，得到NaN。

复制代码

Infinity - Infinity // NaN
Infinity / Infinity // NaN

Infinity与null计算时，null会转成0，等同于与0的计算。

复制代码

null * Infinity // NaN
null / Infinity // 0
Infinity / null // Infinity

Infinity与undefined计算，返回的都是NaN。

复制代码

undefined + Infinity // NaN
undefined - Infinity // NaN
undefined * Infinity // NaN
undefined / Infinity // NaN
Infinity / undefined // NaN

总结：

• 数值可以采用科学计数法表示，当小数点前的数字多于21位或小数点后的零多于5个时，JavaScript 会自动将数值转为科学计数法表示。
• 科学计数法允许字母e或E的后面，跟着一个整数，表示这个数值的指数部分。
• JavaScript 对整数提供四种进制的表示方法：十进制、十六进制、八进制、二进制。
• JavaScript 提供了几个特殊的数值。
• 正零和负零：JavaScript 内部实际上存在2个0：一个是+0，一个是-0，区别就是64位浮点数表示法的符号位不同。它们是等价的。
• NaN是 JavaScript 的特殊值，表示“非数字”（Not a Number），主要出现在将字符串解析成数字出错的场合。
• NaN不等于任何值，包括它本身。NaN在布尔运算时被当作false。NaN与任何数（包括它自己）的运算，得到的都是NaN。
• Infinity表示“无穷”，用来表示两种场景。一种是一个正的数值太大，或一个负的数值太小，无法表示；另一种是非0数值除以0，得到Infinity。
• Infinity有正负之分，Infinity表示正的无穷，-Infinity表示负的无穷。
• Infinity与NaN比较，总是返回false。
• Infinity的四则运算，符合无穷的数学计算规则。

与数值相关的全局方法

parseInt()

（1）基本用法

parseInt方法用于将字符串转为整数。

复制代码

parseInt('123') // 123

如果字符串头部有空格，空格会被自动去除。

复制代码

parseInt('   81') // 81

如果parseInt的参数不是字符串，则会先转为字符串再转换。

复制代码

parseInt(1.23) // 1
// 等同于
parseInt('1.23') // 1

字符串转为整数的时候，是一个个字符依次转换，如果遇到不能转为数字的字符，就不再进行下去，返回已经转好的部分。

复制代码

parseInt('8a') // 8
parseInt('12**') // 12
parseInt('12.34') // 12
parseInt('15e2') // 15
parseInt('15px') // 15

上面代码中，parseInt的参数都是字符串，结果只返回字符串头部可以转为数字的部分。

如果字符串的第一个字符不能转化为数字（后面跟着数字的正负号除外），返回NaN。

复制代码

parseInt('abc') // NaN
parseInt('.3') // NaN
parseInt('') // NaN
parseInt('+') // NaN
parseInt('+1') // 1

所以，parseInt的返回值只有两种可能，要么是一个十进制整数，要么是NaN。

如果字符串以0x或0X开头，parseInt会将其按照十六进制数解析。

复制代码

parseInt('0x10') // 16

如果字符串以0开头，将其按照10进制解析。

复制代码

parseInt('011') // 11

对于那些会自动转为科学计数法的数字，parseInt会将科学计数法的表示方法视为字符串，因此导致一些奇怪的结果。

复制代码

parseInt(1000000000000000000000.5) // 1
// 等同于
parseInt('1e+21') // 1

parseInt(0.0000008) // 8
// 等同于
parseInt('8e-7') // 8

2）进制转换

parseInt方法还可以接受第二个参数（2到36之间），表示被解析的值的进制，返回该值对应的十进制数。默认情况下，parseInt的第二个参数为10，即默认是十进制转十进制。

复制代码

parseInt('1000') // 1000
// 等同于
parseInt('1000', 10) // 1000

下面是转换指定进制的数的例子。

复制代码

parseInt('1000', 2) // 8
parseInt('1000', 6) // 216
parseInt('1000', 8) // 512

上面代码中，二进制、六进制、八进制的1000，分别等于十进制的8、216和512。这意味着，可以用parseInt方法进行进制的转换。

如果第二个参数不是数值，会被自动转为一个整数。这个整数只有在2到36之间，才能得到有意义的结果，超出这个范围，则返回NaN。如果第二个参数是0、undefined和null，则直接忽略。

复制代码

parseInt('10', 37) // NaN
parseInt('10', 1) // NaN
parseInt('10', 0) // 10
parseInt('10', null) // 10
parseInt('10', undefined) // 10

如果字符串包含对于指定进制无意义的字符，则从最高位开始，只返回可以转换的数值。如果最高位无法转换，则直接返回NaN。

复制代码

parseInt('1546', 2) // 1
parseInt('546', 2) // NaN

上面代码中，对于二进制来说，1是有意义的字符，5、4、6都是无意义的字符，所以第一行返回1，第二行返回NaN。

前面说过，如果parseInt的第一个参数不是字符串，会被先转为字符串。这会导致一些令人意外的结果。

复制代码

parseInt(0x11, 36) // 43
parseInt(0x11, 2) // 1

// 等同于
parseInt(String(0x11), 36)
parseInt(String(0x11), 2)

// 等同于
parseInt('17', 36)
parseInt('17', 2)

上面代码中，十六进制的0x11会被先转为十进制的17，再转为字符串。然后，再用36进制或二进制解读字符串17，最后返回结果43和1。

这种处理方式，对于八进制的前缀0，尤其需要注意。

复制代码

parseInt(011, 2) // NaN

// 等同于
parseInt(String(011), 2)

// 等同于
parseInt(String(9), 2)

上面代码中，第一行的011会被先转为字符串9，因为9不是二进制的有效字符，所以返回NaN。如果直接计算parseInt('011', 2)，011则是会被当作二进制处理，返回3。

JavaScript 不再允许将带有前缀0的数字视为八进制数，而是要求忽略这个0。但是，为了保证兼容性，大部分浏览器并没有部署这一条规定。

总结：

• parseInt方法用于将字符串转为整数。
• 如果字符串头部有空格，空格会被自动去除。
• 如果parseInt的参数不是字符串，则会先转为字符串再转换。字符串转为整数的时候，是一个个字符依次转换，如果遇到不能转为数字的字符，就不再进行下去，返回已经转好的部分。
• 如果字符串的第一个字符不能转化为数字（后面跟着数字的正负号除外），返回NaN。所以，parseInt的返回值只有两种可能，要么是一个十进制整数，要么是NaN。
• 如果字符串以0x或0X开头，parseInt会将其按照十六进制数解析。
• 对于那些会自动转为科学计数法的数字，parseInt会将科学计数法的表示方法视为字符串，因此导致一些奇怪的结果。
• parseInt方法还可以接受第二个参数（2到36之间），表示被解析的值的进制，返回该值对应的十进制数。默认情况下，parseInt的第二个参数为10，即默认是十进制转十进制。
• 如果第二个参数不是数值，会被自动转为一个整数。这个整数只有在2到36之间，才能得到有意义的结果，超出这个范围，则返回NaN。如果第二个参数是0、undefined和null，则直接忽略。

parseFloat()

parseFloat方法用于将一个字符串转为浮点数。

复制代码

parseFloat('3.14') // 3.14

如果字符串符合科学计数法，则会进行相应的转换。

复制代码

parseFloat('314e-2') // 3.14
parseFloat('0.0314E+2') // 3.14

如果字符串包含不能转为浮点数的字符，则不再进行往后转换，返回已经转好的部分。

复制代码

parseFloat('3.14more non-digit characters') // 3.14

parseFloat方法会自动过滤字符串前导的空格。

复制代码

parseFloat('\t\v\r12.34\n ') // 12.34

如果参数不是字符串，或者字符串的第一个字符不能转化为浮点数，则返回NaN。

复制代码

parseFloat([]) // NaN
parseFloat('FF2') // NaN
parseFloat('') // NaN

上面代码中，尤其值得注意，parseFloat会将空字符串转为NaN。

这些特点使得parseFloat的转换结果不同于Number函数。

复制代码

parseFloat(true)  // NaN
Number(true) // 1

parseFloat(null) // NaN
Number(null) // 0

parseFloat('') // NaN
Number('') // 0

parseFloat('123.45#') // 123.45
Number('123.45#') // NaN

总结：

• parseFloat方法用于将一个字符串转为浮点数。
• 如果字符串符合科学计数法，则会进行相应的转换。
• 如果字符串包含不能转为浮点数的字符，则不再进行往后转换，返回已经转好的部分。
• parseFloat方法会自动过滤字符串前导的空格。
• 如果参数不是字符串，或者字符串的第一个字符不能转化为浮点数，则返回NaN。

isNaN()

isNaN方法可以用来判断一个值是否为NaN。

复制代码

isNaN(NaN) // true
isNaN(123) // false

但是，isNaN只对数值有效，如果传入其他值，会被先转成数值。比如，传入字符串的时候，字符串会被先转成NaN，所以最后返回true，这一点要特别引起注意。也就是说，isNaN为true的值，有可能不是NaN，而是一个字符串。

复制代码

isNaN('Hello') // true
// 相当于
isNaN(Number('Hello')) // true

出于同样的原因，对于对象和数组，isNaN也返回true。

复制代码

isNaN({}) // true
// 等同于
isNaN(Number({})) // true

isNaN(['xzy']) // true
// 等同于
isNaN(Number(['xzy'])) // true

但是，对于空数组和只有一个数值成员的数组，isNaN返回false。

复制代码

isNaN([]) // false
isNaN([123]) // false
isNaN(['123']) // false

上面代码之所以返回false，原因是这些数组能被Number函数转成数值。

因此，使用isNaN之前，最好判断一下数据类型。

复制代码

function myIsNaN(value) {
  return typeof value === 'number' && isNaN(value);
}

判断NaN更可靠的方法是，利用NaN为唯一不等于自身的值的这个特点，进行判断。

复制代码

function myIsNaN(value) {
  return value !== value;
}

总结：

• isNaN方法可以用来判断一个值是否为NaN。
• isNaN只对数值有效，如果传入其他值，会被先转成数值。

isFinite()

isFinite方法返回一个布尔值，表示某个值是否为正常的数值。

复制代码

isFinite(Infinity) // false
isFinite(-Infinity) // false
isFinite(NaN) // false
isFinite(undefined) // false
isFinite(null) // true
isFinite(-1) // true

除了Infinity、-Infinity、NaN和undefined这几个值会返回false，isFinite对于其他的数值都会返回true。

字符串

概述

定义

字符串就是零个或多个排在一起的字符，放在单引号或双引号之中。

复制代码

'abc'
"abc"

单引号字符串的内部，可以使用双引号。双引号字符串的内部，可以使用单引号。

复制代码

'key = "value"'
"It's a long journey"

上面两个都是合法的字符串。

如果要在单引号字符串的内部，使用单引号，就必须在内部的单引号前面加上反斜杠，用来转义。双引号字符串内部使用双引号，也是如此。

复制代码

'Did she say \'Hello\'?'
// "Did she say 'Hello'?"

"Did she say \"Hello\"?"
// "Did she say "Hello"?"

由于 HTML 语言的属性值使用双引号，所以很多项目约定 JavaScript 语言的字符串只使用单引号，本教程遵守这个约定。当然，只使用双引号也完全可以。重要的是坚持使用一种风格，不要一会使用单引号表示字符串，一会又使用双引号表示。

字符串默认只能写在一行内，分成多行将会报错。

复制代码

'a
b
c'
// SyntaxError: Unexpected token ILLEGAL

上面代码将一个字符串分成三行，JavaScript 就会报错。

如果长字符串必须分成多行，可以在每一行的尾部使用反斜杠。

复制代码

var longString = 'Long \
long \
long \
string';

longString
// "Long long long string"

上面代码表示，加了反斜杠以后，原来写在一行的字符串，可以分成多行书写。但是，输出的时候还是单行，效果与写在同一行完全一样。注意，反斜杠的后面必须是换行符，而不能有其他字符（比如空格），否则会报错。

连接运算符（+）可以连接多个单行字符串，将长字符串拆成多行书写，输出的时候也是单行。

复制代码

var longString = 'Long '
  + 'long '
  + 'long '
  + 'string';

如果想输出多行字符串，有一种利用多行注释的变通方法。

复制代码

(function () { /*
line 1
line 2
line 3
*/}).toString().split('\n').slice(1, -1).join('\n')
// "line 1
// line 2
// line 3"

上面的例子中，输出的字符串就是多行。

转义

反斜杠（\）在字符串内有特殊含义，用来表示一些特殊字符，所以又称为转义符。

需要用反斜杠转义的特殊字符，主要有下面这些。

• \0 ：null（\u0000）
• \b ：后退键（\u0008）
• \f ：换页符（\u000C）
• \n ：换行符（\u000A）
• \r ：回车键（\u000D）
• \t ：制表符（\u0009）
• \v ：垂直制表符（\u000B）
• \' ：单引号（\u0027）
• \" ：双引号（\u0022）
• \\ ：反斜杠（\u005C）

上面这些字符前面加上反斜杠，都表示特殊含义。

复制代码

console.log('1\n2')
// 1
// 2

上面代码中，\n表示换行，输出的时候就分成了两行。

反斜杠还有三种特殊用法。

（1）\HHH

反斜杠后面紧跟三个八进制数（000到377），代表一个字符。HHH对应该字符的 Unicode 码点，比如\251表示版权符号。显然，这种方法只能输出256种字符。

（2）\xHH

\x后面紧跟两个十六进制数（00到FF），代表一个字符。HH对应该字符的 Unicode 码点，比如\xA9表示版权符号。这种方法也只能输出256种字符。

（3）\uXXXX

\u后面紧跟四个十六进制数（0000到FFFF），代表一个字符。XXXX对应该字符的 Unicode 码点，比如\u00A9表示版权符号。

下面是这三种字符特殊写法的例子。

复制代码

'\251' // "©"
'\xA9' // "©"
'\u00A9' // "©"

'\172' === 'z' // true
'\x7A' === 'z' // true
'\u007A' === 'z' // true

如果在非特殊字符前面使用反斜杠，则反斜杠会被省略。

复制代码

'\a'
// "a"

上面代码中，a是一个正常字符，前面加反斜杠没有特殊含义，反斜杠会被自动省略。

如果字符串的正常内容之中，需要包含反斜杠，则反斜杠前面需要再加一个反斜杠，用来对自身转义。

复制代码

"Prev \\ Next"
// "Prev \ Next"

字符串与数组

字符串可以被视为字符数组，因此可以使用数组的方括号运算符，用来返回某个位置的字符（位置编号从0开始）。

复制代码

var s = 'hello';
s[0] // "h"
s[1] // "e"
s[4] // "o"

// 直接对字符串使用方括号运算符
'hello'[1] // "e"

如果方括号中的数字超过字符串的长度，或者方括号中根本不是数字，则返回undefined。

复制代码

'abc'[3] // undefined
'abc'[-1] // undefined
'abc'['x'] // undefined

但是，字符串与数组的相似性仅此而已。实际上，无法改变字符串之中的单个字符。

复制代码

var s = 'hello';

delete s[0];
s // "hello"

s[1] = 'a';
s // "hello"

s[5] = '!';
s // "hello"

上面代码表示，字符串内部的单个字符无法改变和增删，这些操作会默默地失败。

length 属性

length属性返回字符串的长度，该属性也是无法改变的。

复制代码

var s = 'hello';
s.length // 5

s.length = 3;
s.length // 5

s.length = 7;
s.length // 5

上面代码表示字符串的length属性无法改变，但是不会报错。

总结：

• 字符串就是零个或多个排在一起的字符，放在单引号或双引号之中。
• 字符串默认只能写在一行内，分成多行将会报错。如果长字符串必须分成多行，可以在每一行的尾部使用反斜杠。
• 反斜杠（\）在字符串内有特殊含义，用来表示一些特殊字符，所以又称为转义符。
• 反斜杠还有三种特殊用法。反斜杠后面紧跟三个八进制数（000到377），代表一个字符。\x后面紧跟两个十六进制数（00到FF），代表一个字符。\u后面紧跟四个十六进制数（0000到FFFF），代表一个字符。
• 如果字符串的正常内容之中，需要包含反斜杠，则反斜杠前面需要再加一个反斜杠，用来对自身转义。
• 字符串可以被视为字符数组，因此可以使用数组的方括号运算符，用来返回某个位置的字符（位置编号从0开始）。
• 如果方括号中的数字超过字符串的长度，或者方括号中根本不是数字，则返回undefined。
• length属性返回字符串的长度，该属性也是无法改变的。

字符集

JavaScript 使用 Unicode 字符集。JavaScript 引擎内部，所有字符都用 Unicode 表示。

JavaScript 不仅以 Unicode 储存字符，还允许直接在程序中使用 Unicode 码点表示字符，即将字符写成\uxxxx的形式，其中xxxx代表该字符的 Unicode 码点。比如，\u00A9代表版权符号。

复制代码

var s = '\u00A9';
s // "©"

解析代码的时候，JavaScript 会自动识别一个字符是字面形式表示，还是 Unicode 形式表示。输出给用户的时候，所有字符都会转成字面形式。

复制代码

var f\u006F\u006F = 'abc';
foo // "abc"

上面代码中，第一行的变量名foo是 Unicode 形式表示，第二行是字面形式表示。JavaScript 会自动识别。

我们还需要知道，每个字符在 JavaScript 内部都是以16位（即2个字节）的 UTF-16 格式储存。也就是说，JavaScript 的单位字符长度固定为16位长度，即2个字节。

但是，UTF-16 有两种长度：对于码点在U+0000到U+FFFF之间的字符，长度为16位（即2个字节）；对于码点在U+10000到U+10FFFF之间的字符，长度为32位（即4个字节），而且前两个字节在0xD800到0xDBFF之间，后两个字节在0xDC00到0xDFFF之间。举例来说，码点U+1D306对应的字符为𝌆，它写成 UTF-16 就是0xD834 0xDF06。

JavaScript 对 UTF-16 的支持是不完整的，由于历史原因，只支持两字节的字符，不支持四字节的字符。这是因为 JavaScript 第一版发布的时候，Unicode 的码点只编到U+FFFF，因此两字节足够表示了。后来，Unicode 纳入的字符越来越多，出现了四字节的编码。但是，JavaScript 的标准此时已经定型了，统一将字符长度限制在两字节，导致无法识别四字节的字符。上一节的那个四字节字符𝌆，浏览器会正确识别这是一个字符，但是 JavaScript 无法识别，会认为这是两个字符。

复制代码

'𝌆'.length // 2

上面代码中，JavaScript 认为𝌆的长度为2，而不是1。

总结一下，对于码点在U+10000到U+10FFFF之间的字符，JavaScript 总是认为它们是两个字符（length属性为2）。所以处理的时候，必须把这一点考虑在内，也就是说，JavaScript 返回的字符串长度可能是不正确的。

总结：

• JavaScript 使用 Unicode 字符集。JavaScript 引擎内部，所有字符都用 Unicode 表示。
• JavaScript 对 UTF-16 的支持是不完整的，对于码点在U+10000到U+10FFFF之间的字符，JavaScript 总是认为它们是两个字符（length属性为2）。

Base64 转码

有时，文本里面包含一些不可打印的符号，比如 ASCII 码0到31的符号都无法打印出来，这时可以使用 Base64 编码，将它们转成可以打印的字符。另一个场景是，有时需要以文本格式传递二进制数据，那么也可以使用 Base64 编码。

所谓 Base64 就是一种编码方法，可以将任意值转成 0～9、A～Z、a-z、+和/这64个字符组成的可打印字符。使用它的主要目的，不是为了加密，而是为了不出现特殊字符，简化程序的处理。

JavaScript 原生提供两个 Base64 相关的方法。

• btoa()：任意值转为 Base64 编码
• atob()：Base64 编码转为原来的值

复制代码

var string = 'Hello World!';
btoa(string) // "SGVsbG8gV29ybGQh"
atob('SGVsbG8gV29ybGQh') // "Hello World!"

注意，这两个方法不适合非 ASCII 码的字符，会报错。

复制代码

btoa('你好') // 报错

要将非 ASCII 码字符转为 Base64 编码，必须中间插入一个转码环节，再使用这两个方法。

复制代码

function b64Encode(str) {
  return btoa(encodeURIComponent(str));
}

function b64Decode(str) {
  return decodeURIComponent(atob(str));
}

b64Encode('你好') // "JUU0JUJEJUEwJUU1JUE1JUJE"
b64Decode('JUU0JUJEJUEwJUU1JUE1JUJE') // "你好"

对象

概述

生成方法

对象（object）是 JavaScript 语言的核心概念，也是最重要的数据类型。

什么是对象？简单说，对象就是一组“键值对”（key-value）的集合，是一种无序的复合数据集合。

复制代码

var obj = {
  foo: 'Hello',
  bar: 'World'
};

上面代码中，大括号就定义了一个对象，它被赋值给变量obj，所以变量obj就指向一个对象。该对象内部包含两个键值对（又称为两个“成员”），第一个键值对是foo: 'Hello'，其中foo是“键名”（成员的名称），字符串Hello是“键值”（成员的值）。键名与键值之间用冒号分隔。第二个键值对是bar: 'World'，bar是键名，World是键值。两个键值对之间用逗号分隔。

键名

对象的所有键名都是字符串（ES6 又引入了 Symbol 值也可以作为键名），所以加不加引号都可以。上面的代码也可以写成下面这样。

复制代码

var obj = {
  'foo': 'Hello',
  'bar': 'World'
};

如果键名是数值，会被自动转为字符串。

复制代码

var obj = {
  1: 'a',
  3.2: 'b',
  1e2: true,
  1e-2: true,
  .234: true,
  0xFF: true
};

obj
// Object {
//   1: "a",
//   3.2: "b",
//   100: true,
//   0.01: true,
//   0.234: true,
//   255: true
// }

obj['100'] // true

上面代码中，对象obj的所有键名虽然看上去像数值，实际上都被自动转成了字符串。

如果键名不符合标识名的条件（比如第一个字符为数字，或者含有空格或运算符），且也不是数字，则必须加上引号，否则会报错。

复制代码

// 报错
var obj = {
  1p: 'Hello World'
};

// 不报错
var obj = {
  '1p': 'Hello World',
  'h w': 'Hello World',
  'p+q': 'Hello World'
};

上面对象的三个键名，都不符合标识名的条件，所以必须加上引号。

对象的每一个键名又称为“属性”（property），它的“键值”可以是任何数据类型。如果一个属性的值为函数，通常把这个属性称为“方法”，它可以像函数那样调用。

复制代码

var obj = {
  p: function (x) {
    return 2 * x;
  }
};

obj.p(1) // 2

上面代码中，对象obj的属性p，就指向一个函数。

如果属性的值还是一个对象，就形成了链式引用。

复制代码

var o1 = {};
var o2 = { bar: 'hello' };

o1.foo = o2;
o1.foo.bar // "hello"

上面代码中，对象o1的属性foo指向对象o2，就可以链式引用o2的属性。

对象的属性之间用逗号分隔，最后一个属性后面可以加逗号（trailing comma），也可以不加。

复制代码

var obj = {
  p: 123,
  m: function () { ... },
}

上面的代码中，m属性后面的那个逗号，有没有都可以。

属性可以动态创建，不必在对象声明时就指定。

复制代码

var obj = {};
obj.foo = 123;
obj.foo // 123

上面代码中，直接对obj对象的foo属性赋值，结果就在运行时创建了foo属性。

对象的引用

如果不同的变量名指向同一个对象，那么它们都是这个对象的引用，也就是说指向同一个内存地址。修改其中一个变量，会影响到其他所有变量。

复制代码

var o1 = {};
var o2 = o1;

o1.a = 1;
o2.a // 1

o2.b = 2;
o1.b // 2

上面代码中，o1和o2指向同一个对象，因此为其中任何一个变量添加属性，另一个变量都可以读写该属性。

此时，如果取消某一个变量对于原对象的引用，不会影响到另一个变量。

复制代码

var o1 = {};
var o2 = o1;

o1 = 1;
o2 // {}

上面代码中，o1和o2指向同一个对象，然后o1的值变为1，这时不会对o2产生影响，o2还是指向原来的那个对象。

但是，这种引用只局限于对象，如果两个变量指向同一个原始类型的值。那么，变量这时都是值的拷贝。

复制代码

var x = 1;
var y = x;

x = 2;
y // 1

上面的代码中，当x的值发生变化后，y的值并不变，这就表示y和x并不是指向同一个内存地址。

表达式还是语句？

对象采用大括号表示，这导致了一个问题：如果行首是一个大括号，它到底是表达式还是语句？

复制代码

{ foo: 123 }

JavaScript 引擎读到上面这行代码，会发现可能有两种含义。第一种可能是，这是一个表达式，表示一个包含foo属性的对象；第二种可能是，这是一个语句，表示一个代码区块，里面有一个标签foo，指向表达式123。

为了避免这种歧义，JavaScript 引擎的做法是，如果遇到这种情况，无法确定是对象还是代码块，一律解释为代码块。

复制代码

{ console.log(123) } // 123

上面的语句是一个代码块，而且只有解释为代码块，才能执行。

如果要解释为对象，最好在大括号前加上圆括号。因为圆括号的里面，只能是表达式，所以确保大括号只能解释为对象。

复制代码

({ foo: 123 }) // 正确
({ console.log(123) }) // 报错

这种差异在eval语句（作用是对字符串求值）中反映得最明显。

复制代码

eval('{foo: 123}') // 123
eval('({foo: 123})') // {foo: 123}

上面代码中，如果没有圆括号，eval将其理解为一个代码块；加上圆括号以后，就理解成一个对象。

总结：

• 对象（object）是 JavaScript 语言的核心概念，也是最重要的数据类型。简单说，对象就是一组“键值对”（key-value）的集合，是一种无序的复合数据集合。
• 对象的所有键名都是字符串（ES6 又引入了 Symbol 值也可以作为键名），所以加不加引号都可以。
• 对象的每一个键名又称为“属性”（property），它的“键值”可以是任何数据类型。如果一个属性的值为函数，通常把这个属性称为“方法”，它可以像函数那样调用。
• 如果属性的值还是一个对象，就形成了链式引用。
• 如果不同的变量名指向同一个对象，那么它们都是这个对象的引用，也就是说指向同一个内存地址。修改其中一个变量，会影响到其他所有变量。
• 如果遇到如果行首是一个大括号，无法确定是对象还是代码块，JavaScript 引擎一律解释为代码块。如果要解释为对象，最好在大括号前加上圆括号。因为圆括号的里面，只能是表达式，所以确保大括号只能解释为对象。

属性的操作

属性的读取

读取对象的属性，有两种方法，一种是使用点运算符，还有一种是使用方括号运算符。

复制代码

var obj = {
  p: 'Hello World'
};

obj.p // "Hello World"
obj['p'] // "Hello World"

上面代码分别采用点运算符和方括号运算符，读取属性p。

请注意，如果使用方括号运算符，键名必须放在引号里面，否则会被当作变量处理。

复制代码

var foo = 'bar';

var obj = {
  foo: 1,
  bar: 2
};

obj.foo  // 1
obj[foo]  // 2

上面代码中，引用对象obj的foo属性时，如果使用点运算符，foo就是字符串；如果使用方括号运算符，但是不使用引号，那么foo就是一个变量，指向字符串bar。

方括号运算符内部还可以使用表达式。

复制代码

obj['hello' + ' world']
obj[3 + 3]

数字键可以不加引号，因为会自动转成字符串。

复制代码

var obj = {
  0.7: 'Hello World'
};

obj['0.7'] // "Hello World"
obj[0.7] // "Hello World"

上面代码中，对象obj的数字键0.7，加不加引号都可以，因为会被自动转为字符串。

注意，数值键名不能使用点运算符（因为会被当成小数点），只能使用方括号运算符。

复制代码

var obj = {
  123: 'hello world'
};

obj.123 // 报错
obj[123] // "hello world"

上面代码的第一个表达式，对数值键名123使用点运算符，结果报错。第二个表达式使用方括号运算符，结果就是正确的。

属性的赋值

点运算符和方括号运算符，不仅可以用来读取值，还可以用来赋值。

复制代码

var obj = {};

obj.foo = 'Hello';
obj['bar'] = 'World';

上面代码中，分别使用点运算符和方括号运算符，对属性赋值。

JavaScript 允许属性的“后绑定”，也就是说，你可以在任意时刻新增属性，没必要在定义对象的时候，就定义好属性。

复制代码

var obj = { p: 1 };

// 等价于

var obj = {};
obj.p = 1;

属性的查看

查看一个对象本身的所有属性，可以使用Object.keys方法。

复制代码

var obj = {
  key1: 1,
  key2: 2
};

Object.keys(obj);
// ['key1', 'key2']

属性的删除：delete 命令

delete命令用于删除对象的属性，删除成功后返回true。

复制代码

var obj = { p: 1 };
Object.keys(obj) // ["p"]

delete obj.p // true
obj.p // undefined
Object.keys(obj) // []

上面代码中，delete命令删除对象obj的p属性。删除后，再读取p属性就会返回undefined，而且Object.keys方法的返回值也不再包括该属性。

注意，删除一个不存在的属性，delete不报错，而且返回true。

复制代码

var obj = {};
delete obj.p // true

上面代码中，对象obj并没有p属性，但是delete命令照样返回true。因此，不能根据delete命令的结果，认定某个属性是存在的。

只有一种情况，delete命令会返回false，那就是该属性存在，且不得删除。

复制代码

var obj = Object.defineProperty({}, 'p', {
  value: 123,
  configurable: false
});

obj.p // 123
delete obj.p // false

上面代码之中，对象obj的p属性是不能删除的，所以delete命令返回false。

另外，需要注意的是，delete命令只能删除对象本身的属性，无法删除继承的属性。

复制代码

var obj = {};
delete obj.toString // true
obj.toString // function toString() { [native code] }

上面代码中，toString是对象obj继承的属性，虽然delete命令返回true，但该属性并没有被删除，依然存在。这个例子还说明，即使delete返回true，该属性依然可能读取到值。

属性是否存在：in 运算符

in运算符用于检查对象是否包含某个属性（注意，检查的是键名，不是键值），如果包含就返回true，否则返回false。它的左边是一个字符串，表示属性名，右边是一个对象。

复制代码

var obj = { p: 1 };
'p' in obj // true
'toString' in obj // true

in运算符的一个问题是，它不能识别哪些属性是对象自身的，哪些属性是继承的。就像上面代码中，对象obj本身并没有toString属性，但是in运算符会返回true，因为这个属性是继承的。

这时，可以使用对象的hasOwnProperty方法判断一下，是否为对象自身的属性。

复制代码

var obj = {};
if ('toString' in obj) {
  console.log(obj.hasOwnProperty('toString')) // false
}

属性的遍历：for...in 循环

for...in循环用来遍历一个对象的全部属性。

复制代码

var obj = {a: 1, b: 2, c: 3};

for (var i in obj) {
  console.log('键名：', i);
  console.log('键值：', obj[i]);
}
// 键名： a
// 键值： 1
// 键名： b
// 键值： 2
// 键名： c
// 键值： 3

for...in循环有两个使用注意点。

• 它遍历的是对象所有可遍历（enumerable）的属性，会跳过不可遍历的属性。
• 它不仅遍历对象自身的属性，还遍历继承的属性。

举例来说，对象都继承了toString属性，但是for...in循环不会遍历到这个属性。

复制代码

var obj = {};

// toString 属性是存在的
obj.toString // toString() { [native code] }

for (var p in obj) {
  console.log(p);
} // 没有任何输出

上面代码中，对象obj继承了toString属性，该属性不会被for...in循环遍历到，因为它默认是“不可遍历”的。关于对象属性的可遍历性，参见《标准库》章节中 Object 一章的介绍。

如果继承的属性是可遍历的，那么就会被for...in循环遍历到。但是，一般情况下，都是只想遍历对象自身的属性，所以使用for...in的时候，应该结合使用hasOwnProperty方法，在循环内部判断一下，某个属性是否为对象自身的属性。

复制代码

var person = { name: '老张' };

for (var key in person) {
  if (person.hasOwnProperty(key)) {
    console.log(key);
  }
}
// name

总结：

• 读取对象的属性，有两种方法，一种是使用点运算符，还有一种是使用方括号运算符。

• 如果使用方括号运算符，键名必须放在引号里面，否则会被当作变量处理。

• 方括号运算符内部还可以使用表达式。数字键可以不加引号，因为会自动转成字符串。

• 点运算符和方括号运算符，不仅可以用来读取值，还可以用来赋值。

• avaScript 允许属性的“后绑定”，也就是说，你可以在任意时刻新增属性，没必要在定义对象的时候，就定义好属性。

• 使用Object.keys方法，可以查看一个对象本身的所有属性。

• delete命令用于删除对象的属性，删除成功后返回true。

• in运算符用于检查对象是否包含某个属性（注意，检查的是键名，不是键值），如果包含就返回true，否则返回false。它的左边是一个字符串，表示属性名，右边是一个对象。`'p' in obj

• in运算符不能识别哪些属性是对象自身的，哪些属性是继承的。这时，可以使用对象的hasOwnProperty方法判断一下，是否为对象自身的属性。

• for...in循环用来遍历一个对象的全部属性。

• for...in遍历的是对象所有可遍历（enumerable）的属性，会跳过不可遍历的属性。

• for...in不仅遍历对象自身的属性，还遍历继承的属性。

with 语句

with语句的格式如下：

复制代码

with (对象) {
  语句;
}

它的作用是操作同一个对象的多个属性时，提供一些书写的方便。

复制代码

// 例一
var obj = {
  p1: 1,
  p2: 2,
};
with (obj) {
  p1 = 4;
  p2 = 5;
}
// 等同于
obj.p1 = 4;
obj.p2 = 5;

// 例二
with (document.links[0]){
  console.log(href);
  console.log(title);
  console.log(style);
}
// 等同于
console.log(document.links[0].href);
console.log(document.links[0].title);
console.log(document.links[0].style);

注意，如果with区块内部有变量的赋值操作，必须是当前对象已经存在的属性，否则会创造一个当前作用域的全局变量。

复制代码

var obj = {};
with (obj) {
  p1 = 4;
  p2 = 5;
}

obj.p1 // undefined
p1 // 4

上面代码中，对象obj并没有p1属性，对p1赋值等于创造了一个全局变量p1。正确的写法应该是，先定义对象obj的属性p1，然后在with区块内操作它。

这是因为with区块没有改变作用域，它的内部依然是当前作用域。这造成了with语句的一个很大的弊病，就是绑定对象不明确。

复制代码

with (obj) {
  console.log(x);
}

单纯从上面的代码块，根本无法判断x到底是全局变量，还是对象obj的一个属性。这非常不利于代码的除错和模块化，编译器也无法对这段代码进行优化，只能留到运行时判断，这就拖慢了运行速度。因此，建议不要使用with语句，可以考虑用一个临时变量代替with。

复制代码

with(obj1.obj2.obj3) {
  console.log(p1 + p2);
}

// 可以写成
var temp = obj1.obj2.obj3;
console.log(temp.p1 + temp.p2);

总结：

• with语句的作用是操作同一个对象的多个属性。
• 如果with区块内部有变量的赋值操作，必须是当前对象已经存在的属性，否则会创造一个当前作用域的全局变量。
• with语句的一个绑定对象不明确，建议不要使用。

函数

函数是一段可以反复调用的代码块。函数还能接受输入的参数，不同的参数会返回不同的值。

概述

函数的声明

JavaScript 有三种声明函数的方法。

（1）function 命令

function命令声明的代码区块，就是一个函数。function命令后面是函数名，函数名后面是一对圆括号，里面是传入函数的参数。函数体放在大括号里面。

复制代码

function print(s) {
  console.log(s);
}

上面的代码命名了一个print函数，以后使用print()这种形式，就可以调用相应的代码。这叫做函数的声明（Function Declaration）。

（2）函数表达式

除了用function命令声明函数，还可以采用变量赋值的写法。

复制代码

var print = function(s) {
  console.log(s);
};

这种写法将一个匿名函数赋值给变量。这时，这个匿名函数又称函数表达式（Function Expression），因为赋值语句的等号右侧只能放表达式。

采用函数表达式声明函数时，function命令后面不带有函数名。如果加上函数名，该函数名只在函数体内部有效，在函数体外部无效。

复制代码

var print = function x(){
  console.log(typeof x);
};

x
// ReferenceError: x is not defined

print()
// function

上面代码在函数表达式中，加入了函数名x。这个x只在函数体内部可用，指代函数表达式本身，其他地方都不可用。这种写法的用处有两个，一是可以在函数体内部调用自身，二是方便除错（除错工具显示函数调用栈时，将显示函数名，而不再显示这里是一个匿名函数）。因此，下面的形式声明函数也非常常见。

复制代码

var f = function f() {};

需要注意的是，函数的表达式需要在语句的结尾加上分号，表示语句结束。而函数的声明在结尾的大括号后面不用加分号。总的来说，这两种声明函数的方式，差别很细微，可以近似认为是等价的。

（3）Function 构造函数

第三种声明函数的方式是Function构造函数。

复制代码

var add = new Function(
  'x',
  'y',
  'return x + y'
);

// 等同于
function add(x, y) {
  return x + y;
}

上面代码中，Function构造函数接受三个参数，除了最后一个参数是add函数的“函数体”，其他参数都是add函数的参数。

你可以传递任意数量的参数给Function构造函数，只有最后一个参数会被当做函数体，如果只有一个参数，该参数就是函数体。

复制代码

var foo = new Function(
  'return "hello world";'
);

// 等同于
function foo() {
  return 'hello world';
}

Function构造函数可以不使用new命令，返回结果完全一样。

总的来说，这种声明函数的方式非常不直观，几乎无人使用。

函数的重复声明

如果同一个函数被多次声明，后面的声明就会覆盖前面的声明。

复制代码

function f() {
  console.log(1);
}
f() // 2

function f() {
  console.log(2);
}
f() // 2

上面代码中，后一次的函数声明覆盖了前面一次。而且，由于函数名的提升（参见下文），前一次声明在任何时候都是无效的，这一点要特别注意。

圆括号运算符，return 语句和递归

调用函数时，要使用圆括号运算符。圆括号之中，可以加入函数的参数。

复制代码

function add(x, y) {
  return x + y;
}

add(1, 1) // 2

上面代码中，函数名后面紧跟一对圆括号，就会调用这个函数。

函数体内部的return语句，表示返回。JavaScript 引擎遇到return语句，就直接返回return后面的那个表达式的值，后面即使还有语句，也不会得到执行。也就是说，return语句所带的那个表达式，就是函数的返回值。return语句不是必需的，如果没有的话，该函数就不返回任何值，或者说返回undefined。

函数可以调用自身，这就是递归（recursion）。下面就是通过递归，计算斐波那契数列的代码。

复制代码

function fib(num) {
  if (num === 0) return 0;
  if (num === 1) return 1;
  return fib(num - 2) + fib(num - 1);
}

fib(6) // 8

上面代码中，fib函数内部又调用了fib，计算得到斐波那契数列的第6个元素是8。

第一等公民

JavaScript 语言将函数看作一种值，与其它值（数值、字符串、布尔值等等）地位相同。凡是可以使用值的地方，就能使用函数。比如，可以把函数赋值给变量和对象的属性，也可以当作参数传入其他函数，或者作为函数的结果返回。函数只是一个可以执行的值，此外并无特殊之处。

由于函数与其他数据类型地位平等，所以在 JavaScript 语言中又称函数为第一等公民。

复制代码

function add(x, y) {
  return x + y;
}

// 将函数赋值给一个变量
var operator = add;

// 将函数作为参数和返回值
function a(op){
  return op;
}
a(add)(1, 1)
// 2

函数名的提升

avaScript 引擎将函数名视同变量名，所以采用function命令声明函数时，整个函数会像变量声明一样，被提升到代码头部。所以，下面的代码不会报错。

复制代码

f();

function f() {}

表面上，上面代码好像在声明之前就调用了函数f。但是实际上，由于“变量提升”，函数f被提升到了代码头部，也就是在调用之前已经声明了。但是，如果采用赋值语句定义函数，JavaScript 就会报错。

复制代码

f();
var f = function (){};
// TypeError: undefined is not a function

上面的代码等同于下面的形式。

复制代码

var f;
f();
f = function () {};

上面代码第二行，调用f的时候，f只是被声明了，还没有被赋值，等于undefined，所以会报错。

注意，如果像下面例子那样，采用function命令和var赋值语句声明同一个函数，由于存在函数提升，最后会采用var赋值语句的定义。

复制代码

var f = function () {
  console.log('1');
}

function f() {
  console.log('2');
}

f() // 1

上面例子中，表面上后面声明的函数f，应该覆盖前面的var赋值语句，但是由于存在函数提升，实际上正好反过来。

总结：

• 函数是一段可以反复调用的代码块。函数还能接受输入的参数，不同的参数会返回不同的值。
• JavaScript 有三种声明函数的方法。function 命令声明的代码区块，就是一个函数。函数表达式将一个匿名函数赋值给变量。Function 构造函数
• 如果同一个函数被多次声明，后面的声明就会覆盖前面的声明。
• 调用函数时，要使用圆括号运算符。圆括号之中，可以加入函数的参数。
• JavaScript 引擎将函数名视同变量名，所以采用function命令声明函数时，整个函数会像变量声明一样，被提升到代码头部。

函数的属性和方法

name 属性

函数的name属性返回函数的名字。

复制代码

function f1() {}
f1.name // "f1"

如果是通过变量赋值定义的函数，那么name属性返回变量名。

复制代码

var f2 = function () {};
f2.name // "f2"

但是，上面这种情况，只有在变量的值是一个匿名函数时才是如此。如果变量的值是一个具名函数，那么name属性返回function关键字之后的那个函数名。

复制代码

var f3 = function myName() {};
f3.name // 'myName'

上面代码中，f3.name返回函数表达式的名字。注意，真正的函数名还是f3，而myName这个名字只在函数体内部可用。

name属性的一个用处，就是获取参数函数的名字。

复制代码

var myFunc = function () {};

function test(f) {
  console.log(f.name);
}

test(myFunc) // myFunc

上面代码中，函数test内部通过name属性，就可以知道传入的参数是什么函数。

length 属性

函数的length属性返回函数预期传入的参数个数，即函数定义之中的参数个数。

复制代码

function f(a, b) {}
f.length // 2

上面代码定义了空函数f，它的length属性就是定义时的参数个数。不管调用时输入了多少个参数，length属性始终等于2。

length属性提供了一种机制，判断定义时和调用时参数的差异，以便实现面向对象编程的“方法重载”（overload）。

toString()

函数的toString()方法返回一个字符串，内容是函数的源码。

复制代码

function f() {
  a();
  b();
  c();
}

f.toString()
// function f() {
//  a();
//  b();
//  c();
// }

上面示例中，函数f的toString()方法返回了f的源码，包含换行符在内。

对于那些原生的函数，toString()方法返回function (){[native code]}。

复制代码

Math.sqrt.toString()
// "function sqrt() { [native code] }"

上面代码中，Math.sqrt()是 JavaScript 引擎提供的原生函数，toString()方法就返回原生代码的提示。

函数内部的注释也可以返回。

复制代码

function f() {/*
  这是一个
  多行注释
*/}

f.toString()
// "function f(){/*
//   这是一个
//   多行注释
// */}"

利用这一点，可以变相实现多行字符串。

复制代码

var multiline = function (fn) {
  var arr = fn.toString().split('\n');
  return arr.slice(1, arr.length - 1).join('\n');
};

function f() {/*
  这是一个
  多行注释
*/}

multiline(f);
// " 这是一个
//   多行注释"

上面示例中，函数f内部有一个多行注释，toString()方法拿到f的源码后，去掉首尾两行，就得到了一个多行字符串。

总结：

• 函数的name属性返回函数的名字。
• 函数的length属性返回函数预期传入的参数个数，即函数定义之中的参数个数。
• 函数的toString()方法返回一个字符串，内容是函数的源码。

函数作用域

定义

作用域（scope）指的是变量存在的范围。在 ES5 的规范中，JavaScript 只有两种作用域：一种是全局作用域，变量在整个程序中一直存在，所有地方都可以读取；另一种是函数作用域，变量只在函数内部存在。ES6 又新增了块级作用域，本教程不涉及。

对于顶层函数来说，函数外部声明的变量就是全局变量（global variable），它可以在函数内部读取。

复制代码

var v = 1;

function f() {
  console.log(v);
}

f()
// 1

上面的代码表明，函数f内部可以读取全局变量v。

在函数内部定义的变量，外部无法读取，称为“局部变量”（local variable）。

复制代码

function f(){
  var v = 1;
}

v // ReferenceError: v is not defined

上面代码中，变量v在函数内部定义，所以是一个局部变量，函数之外就无法读取。

函数内部定义的变量，会在该作用域内覆盖同名全局变量。

复制代码

var v = 1;

function f(){
  var v = 2;
  console.log(v);
}

f() // 2
v // 1

上面代码中，变量v同时在函数的外部和内部有定义。结果，在函数内部定义，局部变量v覆盖了全局变量v。

注意，对于var命令来说，局部变量只能在函数内部声明，在其他区块中声明，一律都是全局变量。

复制代码

if (true) {
  var x = 5;
}
console.log(x);  // 5

上面代码中，变量x在条件判断区块之中声明，结果就是一个全局变量，可以在区块之外读取。

函数内部的变量提升

与全局作用域一样，函数作用域内部也会产生“变量提升”现象。var命令声明的变量，不管在什么位置，变量声明都会被提升到函数体的头部。

复制代码

function foo(x) {
  if (x > 100) {
    var tmp = x - 100;
  }
}

// 等同于
function foo(x) {
  var tmp;
  if (x > 100) {
    tmp = x - 100;
  };
}

函数本身的作用域

函数本身也是一个值，也有自己的作用域。它的作用域与变量一样，就是其声明时所在的作用域，与其运行时所在的作用域无关。

复制代码

var a = 1;
var x = function () {
  console.log(a);
};

function f() {
  var a = 2;
  x();
}

f() // 1

上面代码中，函数x是在函数f的外部声明的，所以它的作用域绑定外层，内部变量a不会到函数f体内取值，所以输出1，而不是2。

总之，函数执行时所在的作用域，是定义时的作用域，而不是调用时所在的作用域。

很容易犯错的一点是，如果函数A调用函数B，却没考虑到函数B不会引用函数A的内部变量。

复制代码

var x = function () {
  console.log(a);
};

function y(f) {
  var a = 2;
  f();
}

y(x)
// ReferenceError: a is not defined

上面代码将函数x作为参数，传入函数y。但是，函数x是在函数y体外声明的，作用域绑定外层，因此找不到函数y的内部变量a，导致报错。

同样的，函数体内部声明的函数，作用域绑定函数体内部。

复制代码

function foo() {
  var x = 1;
  function bar() {
    console.log(x);
  }
  return bar;
}

var x = 2;
var f = foo();
f() // 1

上面代码中，函数foo内部声明了一个函数bar，bar的作用域绑定foo。当我们在foo外部取出bar执行时，变量x指向的是foo内部的x，而不是foo外部的x。正是这种机制，构成了下文要讲解的“闭包”现象。

总结：

• 作用域（scope）指的是变量存在的范围。
• JavaScript 只有两种作用域：一种是全局作用域，变量在整个程序中一直存在，所有地方都可以读取；另一种是函数作用域，变量只在函数内部存在。ES6 又新增了块级作用域，本教程不涉及。
• 对于顶层函数来说，函数外部声明的变量就是全局变量（global variable），它可以在函数内部读取。
• 在函数内部定义的变量，外部无法读取，称为“局部变量”（local variable）。
• var命令声明的变量，不管在什么位置，变量声明都会被提升到函数体的头部。
• 函数本身也是一个值，也有自己的作用域。它的作用域与变量一样，就是其声明时所在的作用域，与其运行时所在的作用域无关。

参数

概述

函数运行的时候，有时需要提供外部数据，不同的外部数据会得到不同的结果，这种外部数据就叫参数。

复制代码

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

square(2) // 4
square(3) // 9

上式的x就是square函数的参数。每次运行的时候，需要提供这个值，否则得不到结果。

参数的省略

函数参数不是必需的，JavaScript 允许省略参数。

复制代码

function f(a, b) {
  return a;
}

f(1, 2, 3) // 1
f(1) // 1
f() // undefined

f.length // 2

上面代码的函数f定义了两个参数，但是运行时无论提供多少个参数（或者不提供参数），JavaScript 都不会报错。省略的参数的值就变为undefined。需要注意的是，函数的length属性与实际传入的参数个数无关，只反映函数预期传入的参数个数。

但是，没有办法只省略靠前的参数，而保留靠后的参数。如果一定要省略靠前的参数，只有显式传入undefined。

复制代码

function f(a, b) {
  return a;
}

f( , 1) // SyntaxError: Unexpected token ,(…)
f(undefined, 1) // undefined

上面代码中，如果省略第一个参数，就会报错。

传递方式

函数参数如果是原始类型的值（数值、字符串、布尔值），传递方式是传值传递（passes by value）。这意味着，在函数体内修改参数值，不会影响到函数外部。

复制代码

var p = 2;

function f(p) {
  p = 3;
}
f(p);

p // 2

上面代码中，变量p是一个原始类型的值，传入函数f的方式是传值传递。因此，在函数内部，p的值是原始值的拷贝，无论怎么修改，都不会影响到原始值。

但是，如果函数参数是复合类型的值（数组、对象、其他函数），传递方式是传址传递（pass by reference）。也就是说，传入函数的原始值的地址，因此在函数内部修改参数，将会影响到原始值。

复制代码

var obj = { p: 1 };

function f(o) {
  o.p = 2;
}
f(obj);

obj.p // 2

上面代码中，传入函数f的是参数对象obj的地址。因此，在函数内部修改obj的属性p，会影响到原始值。

注意，如果函数内部修改的，不是参数对象的某个属性，而是替换掉整个参数，这时不会影响到原始值。

复制代码

var obj = [1, 2, 3];

function f(o) {
  o = [2, 3, 4];
}
f(obj);

obj // [1, 2, 3]

上面代码中，在函数f()内部，参数对象obj被整个替换成另一个值。这时不会影响到原始值。这是因为，形式参数（o）的值实际是参数obj的地址，重新对o赋值导致o指向另一个地址，保存在原地址上的值当然不受影响。

同名参数

如果有同名的参数，则取最后出现的那个值。

复制代码

function f(a, a) {
  console.log(a);
}

f(1, 2) // 2

上面代码中，函数f()有两个参数，且参数名都是a。取值的时候，以后面的a为准，即使后面的a没有值或被省略，也是以其为准。

复制代码

function f(a, a) {
  console.log(a);
}

f(1) // undefined

调用函数f()的时候，没有提供第二个参数，a的取值就变成了undefined。这时，如果要获得第一个a的值，可以使用arguments对象。

复制代码

function f(a, a) {
  console.log(arguments[0]);
}

f(1) // 1

arguments 对象

1）定义

由于 JavaScript 允许函数有不定数目的参数，所以需要一种机制，可以在函数体内部读取所有参数。这就是arguments对象的由来。

arguments对象包含了函数运行时的所有参数，arguments[0]就是第一个参数，arguments[1]就是第二个参数，以此类推。这个对象只有在函数体内部，才可以使用。

复制代码

var f = function (one) {
  console.log(arguments[0]);
  console.log(arguments[1]);
  console.log(arguments[2]);
}

f(1, 2, 3)
// 1
// 2
// 3

正常模式下，arguments对象可以在运行时修改。

复制代码

var f = function(a, b) {
  arguments[0] = 3;
  arguments[1] = 2;
  return a + b;
}

f(1, 1) // 5

上面代码中，函数f()调用时传入的参数，在函数内部被修改成3和2。

严格模式下，arguments对象与函数参数不具有联动关系。也就是说，修改arguments对象不会影响到实际的函数参数。

复制代码

var f = function(a, b) {
  'use strict'; // 开启严格模式
  arguments[0] = 3;
  arguments[1] = 2;
  return a + b;
}

f(1, 1) // 2

上面代码中，函数体内是严格模式，这时修改arguments对象，不会影响到真实参数a和b。

通过arguments对象的length属性，可以判断函数调用时到底带几个参数。

复制代码

function f() {
  return arguments.length;
}

f(1, 2, 3) // 3
f(1) // 1
f() // 0

（2）与数组的关系

需要注意的是，虽然arguments很像数组，但它是一个对象。数组专有的方法（比如slice和forEach），不能在arguments对象上直接使用。

如果要让arguments对象使用数组方法，真正的解决方法是将arguments转为真正的数组。下面是两种常用的转换方法：slice方法和逐一填入新数组。

复制代码

var args = Array.prototype.slice.call(arguments);

// 或者
var args = [];
for (var i = 0; i < arguments.length; i++) {
  args.push(arguments[i]);
}

（3）callee 属性

arguments对象带有一个callee属性，返回它所对应的原函数。

复制代码

var f = function () {
  console.log(arguments.callee === f);
}

f() // true

可以通过arguments.callee，达到调用函数自身的目的。这个属性在严格模式里面是禁用的，因此不建议使用。

总结：

• 函数运行的时候，有时需要提供外部数据，不同的外部数据会得到不同的结果，这种外部数据就叫参数。
• 函数参数不是必需的，JavaScript 允许省略参数。
• 如果有同名的参数，则取最后出现的那个值。
• arguments对象可以在函数体内部读取所有参数。

函数的其他知识点

闭包

闭包（closure）是 JavaScript 语言的一个难点，也是它的特色，很多高级应用都要依靠闭包实现。

理解闭包，首先必须理解变量作用域。前面提到，JavaScript 有两种作用域：全局作用域和函数作用域。函数内部可以直接读取全局变量。

复制代码

var n = 999;

function f1() {
  console.log(n);
}
f1() // 999

上面代码中，函数f1可以读取全局变量n。

但是，正常情况下，函数外部无法读取函数内部声明的变量。

复制代码

function f1() {
  var n = 999;
}

console.log(n)
// Uncaught ReferenceError: n is not defined(

上面代码中，函数f1内部声明的变量n，函数外是无法读取的。

如果出于种种原因，需要得到函数内的局部变量。正常情况下，这是办不到的，只有通过变通方法才能实现。那就是在函数的内部，再定义一个函数。

复制代码

function f1() {
  var n = 999;
  function f2() {
　　console.log(n); // 999
  }
}

上面代码中，函数f2就在函数f1内部，这时f1内部的所有局部变量，对f2都是可见的。但是反过来就不行，f2内部的局部变量，对f1就是不可见的。这就是 JavaScript 语言特有的"链式作用域"结构（chain scope），子对象会一级一级地向上寻找所有父对象的变量。所以，父对象的所有变量，对子对象都是可见的，反之则不成立。

既然f2可以读取f1的局部变量，那么只要把f2作为返回值，我们不就可以在f1外部读取它的内部变量了吗！

复制代码

function f1() {
  var n = 999;
  function f2() {
    console.log(n);
  }
  return f2;
}

var result = f1();
result(); // 999

上面代码中，函数f1的返回值就是函数f2，由于f2可以读取f1的内部变量，所以就可以在外部获得f1的内部变量了。

闭包就是函数f2，即能够读取其他函数内部变量的函数。由于在 JavaScript 语言中，只有函数内部的子函数才能读取内部变量，因此可以把闭包简单理解成“定义在一个函数内部的函数”。闭包最大的特点，就是它可以“记住”诞生的环境，比如f2记住了它诞生的环境f1，所以从f2可以得到f1的内部变量。在本质上，闭包就是将函数内部和函数外部连接起来的一座桥梁。

闭包的最大用处有两个，一个是可以读取外层函数内部的变量，另一个就是让这些变量始终保持在内存中，即闭包可以使得它诞生环境一直存在。请看下面的例子，闭包使得内部变量记住上一次调用时的运算结果。

复制代码

function createIncrementor(start) {
  return function () {
    return start++;
  };
}

var inc = createIncrementor(5);

inc() // 5
inc() // 6
inc() // 7

上面代码中，start是函数createIncrementor的内部变量。通过闭包，start的状态被保留了，每一次调用都是在上一次调用的基础上进行计算。从中可以看到，闭包inc使得函数createIncrementor的内部环境，一直存在。所以，闭包可以看作是函数内部作用域的一个接口。

为什么闭包能够返回外层函数的内部变量？原因是闭包（上例的inc）用到了外层变量（start），导致外层函数（createIncrementor）不能从内存释放。只要闭包没有被垃圾回收机制清除，外层函数提供的运行环境也不会被清除，它的内部变量就始终保存着当前值，供闭包读取。

闭包的另一个用处，是封装对象的私有属性和私有方法。

复制代码

function Person(name) {
  var _age;
  function setAge(n) {
    _age = n;
  }
  function getAge() {
    return _age;
  }

  return {
    name: name,
    getAge: getAge,
    setAge: setAge
  };
}

var p1 = Person('张三');
p1.setAge(25);
p1.getAge() // 25

上面代码中，函数Person的内部变量_age，通过闭包getAge和setAge，变成了返回对象p1的私有变量。

注意，外层函数每次运行，都会生成一个新的闭包，而这个闭包又会保留外层函数的内部变量，所以内存消耗很大。因此不能滥用闭包，否则会造成网页的性能问题。

立即调用的函数表达式（IIFE）

根据 JavaScript 的语法，圆括号()跟在函数名之后，表示调用该函数。比如，print()就表示调用print函数。

有时，我们需要在定义函数之后，立即调用该函数。这时，你不能在函数的定义之后加上圆括号，这会产生语法错误。

复制代码

function(){ /* code */ }();
// SyntaxError: Unexpected token (

产生这个错误的原因是，function这个关键字既可以当作语句，也可以当作表达式。

复制代码

// 语句
function f() {}

// 表达式
var f = function f() {}

当作表达式时，函数可以定义后直接加圆括号调用。

复制代码

var f = function f(){ return 1}();
f // 1

上面的代码中，函数定义后直接加圆括号调用，没有报错。原因就是function作为表达式，引擎就把函数定义当作一个值。这种情况下，就不会报错。

为了避免解析的歧义，JavaScript 规定，如果function关键字出现在行首，一律解释成语句。因此，引擎看到行首是function关键字之后，认为这一段都是函数的定义，不应该以圆括号结尾，所以就报错了。

函数定义后立即调用的解决方法，就是不要让function出现在行首，让引擎将其理解成一个表达式。最简单的处理，就是将其放在一个圆括号里面。

复制代码

(function(){ /* code */ }());
// 或者
(function(){ /* code */ })();

上面两种写法都是以圆括号开头，引擎就会认为后面跟的是一个表达式，而不是函数定义语句，所以就避免了错误。这就叫做“立即调用的函数表达式”（Immediately-Invoked Function Expression），简称 IIFE。

注意，上面两种写法最后的分号都是必须的。如果省略分号，遇到连着两个 IIFE，可能就会报错。

复制代码

// 报错
(function(){ /* code */ }())
(function(){ /* code */ }())

上面代码的两行之间没有分号，JavaScript 会将它们连在一起解释，将第二行解释为第一行的参数。

推而广之，任何让解释器以表达式来处理函数定义的方法，都能产生同样的效果，比如下面三种写法。

复制代码

var i = function(){ return 10; }();
true && function(){ /* code */ }();
0, function(){ /* code */ }();

甚至像下面这样写，也是可以的。

复制代码

!function () { /* code */ }();
~function () { /* code */ }();
-function () { /* code */ }();
+function () { /* code */ }();

通常情况下，只对匿名函数使用这种“立即执行的函数表达式”。它的目的有两个：一是不必为函数命名，避免了污染全局变量；二是 IIFE 内部形成了一个单独的作用域，可以封装一些外部无法读取的私有变量。

复制代码

// 写法一
var tmp = newData;
processData(tmp);
storeData(tmp);

// 写法二
(function () {
  var tmp = newData;
  processData(tmp);
  storeData(tmp);
}());

上面代码中，写法二比写法一更好，因为完全避免了污染全局变量。

总结：

• 在本质上，闭包就是将函数内部和函数外部连接起来的一座桥梁。
• 闭包的最大用处有两个，一个是可以读取外层函数内部的变量，另一个就是让这些变量始终保持在内存中，即闭包可以使得它诞生环境一直存在。
• 函数定义后立即调用的解决方法，就是不要让function出现在行首，让引擎将其理解成一个表达式。最简单的处理，就是将其放在一个圆括号里面。

eval 命令

基本用法

eval命令接受一个字符串作为参数，并将这个字符串当作语句执行。

复制代码

eval('var a = 1;');
a // 1

上面代码将字符串当作语句运行，生成了变量a。

如果参数字符串无法当作语句运行，那么就会报错。

复制代码

eval('3x') // Uncaught SyntaxError: Invalid or unexpected token

放在eval中的字符串，应该有独自存在的意义，不能用来与eval以外的命令配合使用。举例来说，下面的代码将会报错。

复制代码

eval('return;'); // Uncaught SyntaxError: Illegal return statement

上面代码会报错，因为return不能单独使用，必须在函数中使用。

如果eval的参数不是字符串，那么会原样返回。

复制代码

eval(123) // 123

eval没有自己的作用域，都在当前作用域内执行，因此可能会修改当前作用域的变量的值，造成安全问题。

复制代码

var a = 1;
eval('a = 2');

a // 2

上面代码中，eval命令修改了外部变量a的值。由于这个原因，eval有安全风险。

为了防止这种风险，JavaScript 规定，如果使用严格模式，eval内部声明的变量，不会影响到外部作用域。

复制代码

(function f() {
  'use strict';
  eval('var foo = 123');
  console.log(foo);  // ReferenceError: foo is not defined
})()

上面代码中，函数f内部是严格模式，这时eval内部声明的foo变量，就不会影响到外部。

不过，即使在严格模式下，eval依然可以读写当前作用域的变量。

复制代码

(function f() {
  'use strict';
  var foo = 1;
  eval('foo = 2');
  console.log(foo);  // 2
})()

上面代码中，严格模式下，eval内部还是改写了外部变量，可见安全风险依然存在。

总之，eval的本质是在当前作用域之中，注入代码。由于安全风险和不利于 JavaScript 引擎优化执行速度，一般不推荐使用。通常情况下，eval最常见的场合是解析 JSON 数据的字符串，不过正确的做法应该是使用原生的JSON.parse方法。

eval 的别名调用

前面说过eval不利于引擎优化执行速度。更麻烦的是，还有下面这种情况，引擎在静态代码分析的阶段，根本无法分辨执行的是eval。

复制代码

var m = eval;
m('var x = 1');
x // 1

上面代码中，变量m是eval的别名。静态代码分析阶段，引擎分辨不出m('var x = 1')执行的是eval命令。

为了保证eval的别名不影响代码优化，JavaScript 的标准规定，凡是使用别名执行eval，eval内部一律是全局作用域。

复制代码

var a = 1;

function f() {
  var a = 2;
  var e = eval;
  e('console.log(a)');
}

f() // 1

上面代码中，eval是别名调用，所以即使它是在函数中，它的作用域还是全局作用域，因此输出的a为全局变量。这样的话，引擎就能确认e()不会对当前的函数作用域产生影响，优化的时候就可以把这一行排除掉。

eval的别名调用的形式五花八门，只要不是直接调用，都属于别名调用，因为引擎只能分辨eval()这一种形式是直接调用。

复制代码

eval.call(null, '...')
window.eval('...')
(1, eval)('...')
(eval, eval)('...')

上面这些形式都是eval的别名调用，作用域都是全局作用域。

总结：

• eval命令接受一个字符串作为参数，并将这个字符串当作语句执行。
• 如果eval的参数不是字符串，那么会原样返回。
• eval没有自己的作用域，都在当前作用域内执行，因此可能会修改当前作用域的变量的值，造成安全问题。
• eval不利于引擎优化执行速度，引擎在静态代码分析的阶段，根本无法分辨执行的是eval。为了保证eval的别名不影响代码优化，JavaScript 的标准规定，凡是使用别名执行eval，eval内部一律是全局作用域。

数组

定义

数组（array）是按次序排列的一组值。每个值的位置都有编号（从0开始），整个数组用方括号表示。

复制代码

var arr = ['a', 'b', 'c'];

上面代码中的a、b、c就构成一个数组，两端的方括号是数组的标志。a是0号位置，b是1号位置，c是2号位置。

除了在定义时赋值，数组也可以先定义后赋值。

复制代码

var arr = [];

arr[0] = 'a';
arr[1] = 'b';
arr[2] = 'c';

任何类型的数据，都可以放入数组。

复制代码

var arr = [
  {a: 1},
  [1, 2, 3],
  function() {return true;}
];

arr[0] // Object {a: 1}
arr[1] // [1, 2, 3]
arr[2] // function (){return true;}

上面数组arr的3个成员依次是对象、数组、函数。

如果数组的元素还是数组，就形成了多维数组。

复制代码

var a = [[1, 2], [3, 4]];
a[0][1] // 2
a[1][1] // 4

数组的本质

本质上，数组属于一种特殊的对象。typeof运算符会返回数组的类型是object。

复制代码

typeof [1, 2, 3] // "object"

上面代码表明，typeof运算符认为数组的类型就是对象。

数组的特殊性体现在，它的键名是按次序排列的一组整数（0，1，2...）。

复制代码

var arr = ['a', 'b', 'c'];

Object.keys(arr)
// ["0", "1", "2"]

上面代码中，Object.keys方法返回数组的所有键名。可以看到数组的键名就是整数0、1、2。

由于数组成员的键名是固定的（默认总是0、1、2...），因此数组不用为每个元素指定键名，而对象的每个成员都必须指定键名。JavaScript 语言规定，对象的键名一律为字符串，所以，数组的键名其实也是字符串。之所以可以用数值读取，是因为非字符串的键名会被转为字符串。

复制代码

var arr = ['a', 'b', 'c'];

arr['0'] // 'a'
arr[0] // 'a'

上面代码分别用数值和字符串作为键名，结果都能读取数组。原因是数值键名被自动转为了字符串。

注意，这点在赋值时也成立。一个值总是先转成字符串，再作为键名进行赋值。

复制代码

var a = [];

a[1.00] = 6;
a[1] // 6

上面代码中，由于1.00转成字符串是1，所以通过数字键1可以读取值。

对象有两种读取成员的方法：点结构（object.key）和方括号结构（object[key]）。但是，对于数值的键名，不能使用点结构。

复制代码

var arr = [1, 2, 3];
arr.0 // SyntaxError

上面代码中，arr.0的写法不合法，因为单独的数值不能作为标识符（identifier）。所以，数组成员只能用方括号arr[0]表示（方括号是运算符，可以接受数值）。

length 属性

数组的length属性，返回数组的成员数量。

复制代码

['a', 'b', 'c'].length // 3

JavaScript 使用一个32位整数，保存数组的元素个数。这意味着，数组成员最多只有 4294967295 个（232 - 1）个，也就是说length属性的最大值就是 4294967295。

只要是数组，就一定有length属性。该属性是一个动态的值，等于键名中的最大整数加上1。

复制代码

var arr = ['a', 'b'];
arr.length // 2

arr[2] = 'c';
arr.length // 3

arr[9] = 'd';
arr.length // 10

arr[1000] = 'e';
arr.length // 1001

上面代码表示，数组的数字键不需要连续，length属性的值总是比最大的那个整数键大1。另外，这也表明数组是一种动态的数据结构，可以随时增减数组的成员。

length属性是可写的。如果人为设置一个小于当前成员个数的值，该数组的成员数量会自动减少到length设置的值。

复制代码

var arr = [ 'a', 'b', 'c' ];
arr.length // 3

arr.length = 2;
arr // ["a", "b"]

上面代码表示，当数组的length属性设为2（即最大的整数键只能是1）那么整数键2（值为c）就已经不在数组中了，被自动删除了。

清空数组的一个有效方法，就是将length属性设为0。

复制代码

var arr = [ 'a', 'b', 'c' ];

arr.length = 0;
arr // []

如果人为设置length大于当前元素个数，则数组的成员数量会增加到这个值，新增的位置都是空位。

复制代码

var a = ['a'];

a.length = 3;
a[1] // undefined

上面代码表示，当length属性设为大于数组个数时，读取新增的位置都会返回undefined。

如果人为设置length为不合法的值，JavaScript 会报错。

复制代码

// 设置负值
[].length = -1
// RangeError: Invalid array length

// 数组元素个数大于等于2的32次方
[].length = Math.pow(2, 32)
// RangeError: Invalid array length

// 设置字符串
[].length = 'abc'
// RangeError: Invalid array length

值得注意的是，由于数组本质上是一种对象，所以可以为数组添加属性，但是这不影响length属性的值。

复制代码

var a = [];

a['p'] = 'abc';
a.length // 0

a[2.1] = 'abc';
a.length // 0

上面代码将数组的键分别设为字符串和小数，结果都不影响length属性。因为，length属性的值就是等于最大的数字键加1，而这个数组没有整数键，所以length属性保持为0。

如果数组的键名是添加超出范围的数值，该键名会自动转为字符串。

复制代码

var arr = [];
arr[-1] = 'a';
arr[Math.pow(2, 32)] = 'b';

arr.length // 0
arr[-1] // "a"
arr[4294967296] // "b"

上面代码中，我们为数组arr添加了两个不合法的数字键，结果length属性没有发生变化。这些数字键都变成了字符串键名。最后两行之所以会取到值，是因为取键值时，数字键名会默认转为字符串。

in 运算符

检查某个键名是否存在的运算符in，适用于对象，也适用于数组。

复制代码

var arr = [ 'a', 'b', 'c' ];
2 in arr  // true
'2' in arr // true
4 in arr // false

上面代码表明，数组存在键名为2的键。由于键名都是字符串，所以数值2会自动转成字符串。

注意，如果数组的某个位置是空位，in运算符返回false。

复制代码

var arr = [];
arr[100] = 'a';

100 in arr // true
1 in arr // false

上面代码中，数组arr只有一个成员arr[100]，其他位置的键名都会返回false。

for...in 循环和数组的遍历

for...in循环不仅可以遍历对象，也可以遍历数组，毕竟数组只是一种特殊对象。

复制代码

var a = [1, 2, 3];

for (var i in a) {
  console.log(a[i]);
}
// 1
// 2
// 3

但是，for...in不仅会遍历数组所有的数字键，还会遍历非数字键。

复制代码

var a = [1, 2, 3];
a.foo = true;

for (var key in a) {
  console.log(key);
}
// 0
// 1
// 2
// foo

上面代码在遍历数组时，也遍历到了非整数键foo。所以，不推荐使用for...in遍历数组。

数组的遍历可以考虑使用for循环或while循环。

复制代码

var a = [1, 2, 3];

// for循环
for(var i = 0; i < a.length; i++) {
  console.log(a[i]);
}

// while循环
var i = 0;
while (i < a.length) {
  console.log(a[i]);
  i++;
}

var l = a.length;
while (l--) {
  console.log(a[l]);
}

上面代码是三种遍历数组的写法。最后一种写法是逆向遍历，即从最后一个元素向第一个元素遍历。

数组的forEach方法，也可以用来遍历数组，详见《标准库》的 Array 对象一章。

复制代码

var colors = ['red', 'green', 'blue'];
colors.forEach(function (color) {
  console.log(color);
});
// red
// green
// blue

数组的空位

当数组的某个位置是空元素，即两个逗号之间没有任何值，我们称该数组存在空位（hole）。

复制代码

var a = [1, , 1];
a.length // 3

上面代码表明，数组的空位不影响length属性。

需要注意的是，如果最后一个元素后面有逗号，并不会产生空位。也就是说，有没有这个逗号，结果都是一样的。

复制代码

var a = [1, 2, 3,];

a.length // 3
a // [1, 2, 3]

上面代码中，数组最后一个成员后面有一个逗号，这不影响length属性的值，与没有这个逗号时效果一样。

数组的空位是可以读取的，返回undefined。

复制代码

var a = [, , ,];
a[1] // undefined

使用delete命令删除一个数组成员，会形成空位，并且不会影响length属性。

复制代码

var a = [1, 2, 3];
delete a[1];

a[1] // undefined
a.length // 3

上面代码用delete命令删除了数组的第二个元素，这个位置就形成了空位，但是对length属性没有影响。也就是说，length属性不过滤空位。所以，使用length属性进行数组遍历，一定要非常小心。

数组的某个位置是空位，与某个位置是undefined，是不一样的。如果是空位，使用数组的forEach方法、for...in结构、以及Object.keys方法进行遍历，空位都会被跳过。

复制代码

var a = [, , ,];

a.forEach(function (x, i) {
  console.log(i + '. ' + x);
})
// 不产生任何输出

for (var i in a) {
  console.log(i);
}
// 不产生任何输出

Object.keys(a)
// []

如果某个位置是undefined，遍历的时候就不会被跳过。

复制代码

var a = [undefined, undefined, undefined];

a.forEach(function (x, i) {
  console.log(i + '. ' + x);
});
// 0. undefined
// 1. undefined
// 2. undefined

for (var i in a) {
  console.log(i);
}
// 0
// 1
// 2

Object.keys(a)
// ['0', '1', '2']

这就是说，空位就是数组没有这个元素，所以不会被遍历到，而undefined则表示数组有这个元素，值是undefined，所以遍历不会跳过。

类似数组的对象

如果一个对象的所有键名都是正整数或零，并且有length属性，那么这个对象就很像数组，语法上称为“类似数组的对象”（array-like object）。

复制代码

var obj = {
  0: 'a',
  1: 'b',
  2: 'c',
  length: 3
};

obj[0] // 'a'
obj[1] // 'b'
obj.length // 3
obj.push('d') // TypeError: obj.push is not a function

上面代码中，对象obj就是一个类似数组的对象。但是，“类似数组的对象”并不是数组，因为它们不具备数组特有的方法。对象obj没有数组的push方法，使用该方法就会报错。

“类似数组的对象”的根本特征，就是具有length属性。只要有length属性，就可以认为这个对象类似于数组。但是有一个问题，这种length属性不是动态值，不会随着成员的变化而变化。

复制代码

var obj = {
  length: 0
};
obj[3] = 'd';
obj.length // 0

上面代码为对象obj添加了一个数字键，但是length属性没变。这就说明了obj不是数组。

典型的“类似数组的对象”是函数的arguments对象，以及大多数 DOM 元素集，还有字符串。

复制代码

// arguments对象
function args() { return arguments }
var arrayLike = args('a', 'b');

arrayLike[0] // 'a'
arrayLike.length // 2
arrayLike instanceof Array // false

// DOM元素集
var elts = document.getElementsByTagName('h3');
elts.length // 3
elts instanceof Array // false

// 字符串
'abc'[1] // 'b'
'abc'.length // 3
'abc' instanceof Array // false

上面代码包含三个例子，它们都不是数组（instanceof运算符返回false），但是看上去都非常像数组。

数组的slice方法可以将“类似数组的对象”变成真正的数组。

复制代码

var arr = Array.prototype.slice.call(arrayLike);

除了转为真正的数组，“类似数组的对象”还有一个办法可以使用数组的方法，就是通过call()把数组的方法放到对象上面。

复制代码

function print(value, index) {
  console.log(index + ' : ' + value);
}

Array.prototype.forEach.call(arrayLike, print);

上面代码中，arrayLike代表一个类似数组的对象，本来是不可以使用数组的forEach()方法的，但是通过call()，可以把forEach()嫁接到arrayLike上面调用。

下面的例子就是通过这种方法，在arguments对象上面调用forEach方法。

复制代码

// forEach 方法
function logArgs() {
  Array.prototype.forEach.call(arguments, function (elem, i) {
    console.log(i + '. ' + elem);
  });
}

// 等同于 for 循环
function logArgs() {
  for (var i = 0; i < arguments.length; i++) {
    console.log(i + '. ' + arguments[i]);
  }
}

字符串也是类似数组的对象，所以也可以用Array.prototype.forEach.call遍历。

复制代码

Array.prototype.forEach.call('abc', function (chr) {
  console.log(chr);
});
// a
// b
// c

注意，这种方法比直接使用数组原生的forEach要慢，所以最好还是先将“类似数组的对象”转为真正的数组，然后再直接调用数组的forEach方法。

复制代码

var arr = Array.prototype.slice.call('abc');
arr.forEach(function (chr) {
  console.log(chr);
});
// a
// b
// c

总结：

• 数组（array）是按次序排列的一组值。每个值的位置都有编号（从0开始），整个数组用方括号表示。
• 除了在定义时赋值，数组也可以先定义后赋值。
• 任何类型的数据，都可以放入数组。
• 如果数组的元素还是数组，就形成了多维数组。
• 本质上，数组属于一种特殊的对象。typeof运算符会返回数组的类型是object。
• 数组的length属性，返回数组的成员数量。
• 如果人为设置length大于当前元素个数，则数组的成员数量会增加到这个值，新增的位置都是空位。如果人为设置length为不合法的值，JavaScript 会报错。
• 值得注意的是，由于数组本质上是一种对象，所以可以为数组添加属性，但是这不影响length属性的值。
• 如果数组的键名是添加超出范围的数值或者不合法，该键名会自动转为字符串。
• 检查某个键名是否存在的运算符in，适用于对象，也适用于数组。
• for...in不仅会遍历数组所有的数字键，还会遍历非数字键。
• 当数组的某个位置是空元素，即两个逗号之间没有任何值，我们称该数组存在空位（hole）。
• 数组的空位不影响length属性。
• 数组的空位是可以读取的，返回undefined。
• 使用delete命令删除一个数组成员，会形成空位，并且不会影响length属性。