在编程世界里，数据是程序的灵魂。JavaScript 作为一门动态弱类型语言，其数据类型灵活多样，既支持数值、文本、布尔等基础类型，也提供了数组、对象、Map、Set 等复杂结构。本篇将带你系统掌握 JavaScript 中的所有数据类型、变量声明、条件判断、循环以及 ES6 新增的迭代机制，为后续全栈开发打下坚实的地基。

本篇核心收获

• 理解 JavaScript 的 Number、String、Boolean、BigInt、null、undefined 等基础数据类型及其特性
• 掌握数组的创建、索引操作、常用方法（push/pop、slice、splice 等）以及多维数组的使用
• 学会对象的定义、属性访问、动态增删属性以及原型链上的属性检测
• 区分 == 与 === 的差异，始终坚持使用严格相等
• 熟练运用 if…else 条件判断与 for、while、do…while 循环
• 掌握 ES6 新增的 Map、Set 数据结构以及 for…of、forEach 遍历方法

数据类型概览

计算机不仅能处理数值，还能处理文本、图形、音频、视频等各种数据。不同的数据需要定义不同的数据类型。在 JavaScript 中定义了以下几种数据类型：Number、String、Boolean、BigInt、null、undefined、Array（数组）、Object（对象）。此外 ES6 还新增了 Map 和 Set。

Number 类型

JavaScript 不区分整数和浮点数，统一用 Number 表示。以下都是合法的 Number 类型：

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

计算机使用二进制，因此有时用十六进制表示整数比较方便。十六进制用 0x 前缀和 0-9、a-f 表示，例如：0xff00、0xa5b4c3d2，它们和十进制表示的数值完全一样。

Number 可以直接做四则运算，规则和数学一致：

1 + 2; // 3  
(1 + 2) * 5 / 2; // 7.5  
2 / 0; // Infinity  
0 / 0; // NaN  
10 % 3; // 1  
10.5 % 3; // 1.5

注意：% 是求余运算。

要注意，JavaScript 的 Number 不区分整数和浮点数，也就是说 12.00 === 12。并且，JavaScript 的整数最大范围不是 ±2^63，而是 ±2^53，因此超过 2^53 的整数就可能无法精确表示：

// 计算圆面积:
var r = 123.456;  
var s = 3.14 * r * r;  
console.log(s); // 47857.94555904001

// 打印Number能表示的最大整数：
console.log(Number.MAX_SAFE_INTEGER); // 9007199254740991
console.log(2**53-1 === Number.MAX_SAFE_INTEGER); // true

模块小结 Number 类型统一了整数与浮点数，支持科学计数法、十六进制，拥有特殊值 NaN 和 Infinity。需要注意其安全整数范围为 ±2^53，四则运算时留意 % 求余的结果可能为浮点数。

字符串

字符串是以单引号 ' 或双引号 " 括起来的任意文本，比如 'abc'、"xyz"。' 或 " 本身只是一种表示方式，不是字符串的一部分，因此字符串 'abc' 只有 a、b、c 三个字符。

字符串表示

• 如果字符串内部包含单引号 '，可以用双引号 " 包裹整个字符串，例如 "I'm OK" 包含的字符是 I、'、m、空格、O、K。
• 如果字符串内部既包含 ' 又包含 "，可以使用转义字符 \ 来标识，例如：'I\'m \"OK\"!';

转义字符 \ 可以转义很多字符：

• \n 表示换行
• \t 表示制表符
• 字符 \ 本身也需要转义，因此 \\ 表示的字符就是 \

ASCII 字符可以用 \x## 形式的十六进制表示，例如：'\x41' 完全等同于 'A'。

还可以用 \u#### 表示一个 Unicode 字符：'\u4e2d\u6587' 完全等同于 '中文'。

多行字符串

由于多行字符串用 \n 写起来比较费事，ES6 标准新增了一种多行字符串的表示方法，用反引号 `...` 表示：

`这是一个
多行
字符串`;

注意：反引号在键盘的 ESC 下方，数字键 1 的左边。

练习：测试你的浏览器是否支持 ES6 标准，如果不支持，请把多行字符串用 \n 重新表示出来：

// 如果浏览器不支持 ES6，将报 SyntaxError 错误：
console.log(`多行字符串测试`);

模板字符串

要把多个字符串连接起来，可以用 + 号连接：

let name = '小明';
let age = 20;
let message = '你好, ' + name + ', 你今年' + age + '岁了!';
alert(message);

如果有很多变量需要连接，用 + 号就比较麻烦。ES6 新增了模板字符串，表示方法和多行字符串一样，但它会自动替换字符串中的变量：

let name = '小明';
let age = 20;
let message = `你好，${name}，你今年${age}岁了！`;
alert(message);

练习：测试你的浏览器是否支持 ES6 模板字符串，如果不支持，请把模板字符串改为 + 连接的普通字符串：

// 如果浏览器支持模板字符串，将会替换字符串内部的变量：
let name = '小明';
let age = 20;
console.log(`你好，${name}，你今年${age}岁了！`);

操作字符串

获取字符串长度

let s = 'Hello, world!';
s.length; // 13

获取指定位置的字符

使用类似数组的下标操作，索引号从 0 开始：

let s = 'Hello, world!';
s[0]; // 'H'
s[6]; // ' '
s[7]; // 'w'
s[12]; // '!'
s[13]; // undefined，超出范围的索引不会报错，但一律返回 undefined

字符串的不可变性

字符串是不可变的，如果对字符串的某个索引赋值，不会有任何错误，但也没有任何效果：

let s = 'Test';
s[0] = 'X';
console.log(s); // s 仍然为 'Test'

常用字符串方法

JavaScript 为字符串提供了一些常用方法，注意调用这些方法本身不会改变原有字符串的内容，而是返回一个新字符串：

• toUpperCase()：把字符串全部变为大写

let s = 'Hello';
s.toUpperCase(); // 返回 'HELLO'

• toLowerCase()：把字符串全部变为小写

let s = 'Hello';
let lower = s.toLowerCase(); // 返回 'hello' 并赋值给变量 lower
lower; // 'hello'

• indexOf()：搜索指定字符串出现的位置

let s = 'hello, world';
s.indexOf('world'); // 返回 7
s.indexOf('World'); // 没有找到指定的子串，返回 -1

• substring()：返回指定索引区间的子串

let s = 'hello, world';
s.substring(0, 5); // 从索引 0 开始到 5（不包括 5），返回 'hello'
s.substring(7); // 从索引 7 开始到结束，返回 'world'

模块小结 字符串可用单引号或双引号，支持转义、多行（反引号）和模板字符串（${}）。字符串不可变，常用方法有 length、索引访问、toUpperCase、toLowerCase、indexOf、substring，所有方法均返回新字符串。

布尔值

布尔值只有 true 和 false 两种值，可以直接用 true、false 表示，也可以通过布尔运算计算出来：

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

• &&运算是与运算：只有所有都为 true，结果才是 true

true && true; // true
true && false; // false
false && true && false; // false

• ||运算是或运算：只要有一个为 true，结果就是 true

false || false; // false
true || false; // true
false || true || false; // true

• !运算是非运算（单目运算符）：把 true 变成 false，false 变成 true

!true; // false
!false; // true
!(2 > 5); // true

布尔值经常用在条件判断中，例如：

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

比较运算符

当我们对 Number 做比较时，可以通过比较运算符得到一个布尔值：

2 > 5; // false  
5 >= 2; // true  
7 == 7; // true

实际上，JavaScript 允许对任意数据类型做比较：

false == 0; // true
false === 0; // false

要特别注意相等运算符 ==。JavaScript 在设计时，有两种比较运算符：

1. ==比较：它会自动转换数据类型再比较，很多时候会得到非常诡异的结果。
2. ===比较：它不会自动转换数据类型，如果数据类型不一致，直接返回 false；如果一致，再比较。

由于这个设计缺陷，不要使用 == 比较，始终坚持使用 === 比较。

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

NaN === NaN; // false

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

isNaN(NaN); // true

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

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

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

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

BigInt

要精确表示比 2^53 还大的整数，可以使用内置的 BigInt 类型。它的表示方法是在整数后加一个 n，例如 9223372036854775808n，也可以使用 BigInt() 把 Number 和字符串转换成 BigInt：

// 使用BigInt:  
var bi1 = 9223372036854775807n;  
var bi2 = BigInt(12345);  
var bi3 = BigInt("0x7FFFFFFFFFFFF");  
console.log(bi1 === bi2); // false  
console.log(bi1 === bi3); // true  
console.log(bi1 + bi2);

使用 BigInt 可以正常进行加减乘除等运算，结果仍然是一个 BigInt，但不能把一个 BigInt 和一个 Number 放在一起运算：

// 使用BigInt:  
console.log(1234567n + 3456789n); // OK  
console.log(1234567n / 789n); // 1564，除法运算结果仍然是BigInt  
console.log(1234567n % 789n); // 571，求余  
console.log(1234567n + 3456789); // Uncaught TypeError: Cannot mix BigInt and other types

null 和 undefined

• null 表示一个“空”的值。它和 0 以及空字符串 '' 不同：0 是一个数值，'' 表示长度为 0 的字符串，而 null 表示“空”。
• undefined 表示“未定义”。

typeof null; // object
typeof undefined; // undefined
typeof ''; // string
typeof 0; // number

在其他语言中也有类似 null 的表示（Java 用 null，Swift 用 nil，Python 用 None）。JavaScript 的设计者希望用 null 表示一个空的值，而 undefined 表示值未定义。事实证明区分两者的意义不大，大多数情况下我们都应该用null。undefined 仅仅在判断函数参数是否传递的情况下有用。

模块小结 布尔值只有 true/false，支持 &&、||、! 运算。比较时坚持使用 ===，NaN 不与任何值相等，需用 isNaN() 判断。BigInt 解决大整数精度问题，但不可与 Number 混算。null 表示空，undefined 表示未定义，日常优先用 null。

数组

数组是一组按顺序排列的集合，集合的每个值称为元素。JavaScript 的数组可以包括任意数据类型。例如：

[1, 2, 3.14, 'Hello', null, true];

上述数组包含 6 个元素。数组用 [ ] 表示，元素之间用 , 分隔。

另一种创建数组的方法是通过 Array() 函数：new Array(1, 2, 3); 创建了数组 [1, 2, 3]。然而出于代码可读性考虑，强烈建议直接使用[]。

数组长度

获取 Array 的长度，直接访问 length 属性：

let arr = [1, 2, 3.14, 'Hello', null, true];
console.log(arr.length); // 6

注意：直接给 Array 的 length 赋一个新的值会导致 Array 大小的变化：

let arr = ['A', 'B', 'C'];
console.log(arr.length); // 3
// 调整数组大小:
arr.length = 6;
console.log(arr); // arr 变为 ['A', 'B', 'C', undefined, undefined, undefined]
// 调整数组大小:
arr.length = 2;
console.log(arr); // arr 变为 ['A', 'B']

数组索引操作

Array 可以通过索引把对应的元素修改为新的值：

let arr = ['A', 'B', 'C'];
arr[1] = 99;
console.log(arr); // arr 现在变为 ['A', 99, 'C']
console.log(arr[1]); // 99

注意：如果通过索引赋值时，索引超过了范围，同样会引起 Array 大小的变化：

let arr = ['A', 'B', 'C'];
arr[5] = 'x';
console.log(arr); // arr 变为 ['A', 'B', 'C', undefined, undefined, 'x']

大多数其他编程语言不允许直接改变数组的大小，越界访问索引会报错。然而 JavaScript 的 Array 却不会有任何错误。在编写代码时，不建议直接修改 Array 的大小，访问索引时要确保索引不会越界。

数组常用方法

indexOf()

与 String 类似，Array 也可以通过 indexOf() 来搜索一个指定的元素的位置：

let arr = [10, 20, '30', 'xyz'];
arr.indexOf(10); // 元素 10 的索引为 0
arr.indexOf(20); // 元素 20 的索引为 1
arr.indexOf(30); // 元素 30 没有找到，返回 -1
arr.indexOf('30'); // 元素 '30' 的索引为 2

注意：数字 30 和字符串 '30' 是不同的元素。

slice()

slice() 对应 String 的 substring() 版本，它截取 Array 的部分元素，然后返回一个新的 Array：

let arr = ['A', 'B', 'C', 'D', 'E', 'F', 'G'];
arr.slice(0, 3); // 从索引 0 开始，到索引 3 结束，但不包括索引 3：['A', 'B', 'C']
arr.slice(3); // 从索引 3 开始到结束：['D', 'E', 'F', 'G']

注意：slice() 的起止参数包括开始索引，不包括结束索引。

如果不给 slice() 传递任何参数，它就会从头到尾截取所有元素。利用这一点，我们可以很容易地复制一个 Array：

let arr = ['A', 'B', 'C', 'D', 'E', 'F', 'G'];
let aCopy = arr.slice();
aCopy; // ['A', 'B', 'C', 'D', 'E', 'F', 'G']
aCopy === arr; // false

push() 和 pop()

• push() 向 Array 的末尾添加若干元素，返回新长度。
• pop() 把 Array 的最后一个元素删除掉，返回被删除的元素。

let arr = [1, 2];
arr.push('A', 'B'); // 返回 Array 新的长度：4
arr; // [1, 2, 'A', 'B']
arr.pop(); // pop() 返回 'B'
arr; // [1, 2, 'A']
arr.pop(); arr.pop(); arr.pop(); // 连续 pop 3 次
arr; // []
arr.pop(); // 空数组继续 pop 不会报错，而是返回 undefined
arr; // []

unshift() 和 shift()

• unshift() 往 Array 的头部添加若干元素，返回新长度。
• shift() 把 Array 的第一个元素删掉，返回被删除的元素。

let arr = [1, 2];
arr.unshift('A', 'B'); // 返回 Array 新的长度：4
arr; // ['A', 'B', 1, 2]
arr.shift(); // 'A'
arr; // ['B', 1, 2]
arr.shift(); arr.shift(); arr.shift(); // 连续 shift 3 次
arr; // []
arr.shift(); // 空数组继续 shift 不会报错，而是返回 undefined
arr; // []

sort()

sort() 可以对当前 Array 进行排序，它会直接修改当前 Array 的元素位置。直接调用时，按照默认顺序排序：

let arr = ['B', 'C', 'A'];
arr.sort();
arr; // ['A', 'B', 'C']

能否按照我们自己指定的顺序排序呢？完全可以，我们将在后面的函数中讲到。

reverse()

reverse() 把整个 Array 的元素反转：

let arr = ['one', 'two', 'three'];
arr.reverse();
arr; // ['three', 'two', 'one']

splice()

splice() 方法是修改 Array 的 “万能方法”，它可以从指定的索引开始删除若干元素，然后再从该位置添加若干元素：

let arr = ['Microsoft', 'Apple', 'Yahoo', 'AOL', 'Excite', 'Oracle'];
// 从索引 2 开始删除 3 个元素，然后再添加两个元素：
arr.splice(2, 3, 'Google', 'Facebook'); // 返回删除的元素 ['Yahoo', 'AOL', 'Excite']
arr; // ['Microsoft', 'Apple', 'Google', 'Facebook', 'Oracle']
// 只删除，不添加：
arr.splice(2, 2); // ['Google', 'Facebook']
arr; // ['Microsoft', 'Apple', 'Oracle']
// 只添加，不删除：
arr.splice(2, 0, 'Google', 'Facebook'); // 返回 []，因为没有删除任何元素
arr; // ['Microsoft', 'Apple', 'Google', 'Facebook', 'Oracle']

concat()

concat() 方法把当前的 Array 和另一个 Array 连接起来，并返回一个新的 Array（不修改原数组）：

let arr = ['A', 'B', 'C'];
let added = arr.concat([1, 2, 3]);
added; // ['A', 'B', 'C', 1, 2, 3]
arr; // ['A', 'B', 'C']

实际上，concat() 方法可以接收任意个元素和 Array，并且自动把 Array 拆开，然后全部添加到新的 Array 里：

let arr = ['A', 'B', 'C'];
arr.concat(1, 2, [3, 4]); // ['A', 'B', 'C', 1, 2, 3, 4]

join()

join() 方法把当前 Array 的每个元素都用指定的字符串连接起来，然后返回连接后的字符串：

let arr = ['A', 'B', 'C', 1, 2, 3];
arr.join('-'); // 'A-B-C-1-2-3'

注意：如果 Array 的元素不是字符串，将自动转换为字符串后再连接。

练习：在新生欢迎会上，你已经拿到了新同学的名单，请排序后显示：欢迎 XXX，XXX，XXX 和 XXX 同学！

let arr = ['小明', '小红', '大军', '阿黄'];
console.log('欢迎 ' + arr.splice(0, arr.length - 1).join('，') + ' 和 ' + arr.pop() + ' 同学！');

多维数组

如果数组的某个元素又是一个 Array，则可以形成多维数组，例如：

let arr = [[1, 2, 3], [400, 500, 600], '-'];

上述 Array 包含 3 个元素，其中头两个元素本身也是 Array。

练习：如何通过索引取到 500 这个值：

let arr = [[1, 2, 3], [400, 500, 600], '-'];
let x = arr[1][1];
console.log(x); // x 应该为 500

模块小结 数组可存储任意类型，通过索引访问。常用方法：indexOf 查找、slice 截取/复制、push/pop 末尾增删、unshift/shift 头部增删、sort 排序、reverse 反转、splice 万能增删改、concat 连接、join 拼接为字符串。注意直接修改 length 或越界赋值会改变数组大小。

对象

JavaScript 的对象是一组由键-值对组成的无序集合。对象的键都是字符串类型或 Symbol 类型（Symbol 类型在 ES6 中引入），值可以是任意数据类型。

对象定义

例如，描述“小明”：

let xiaoming = {
  name: '小明',
  birth: 1990,
  school: 'No.1 Middle School',
  height: 1.70,
  weight: 65,
  score: null
};

JavaScript 用一个 {...} 表示一个对象，键值对以 xxx: xxx 形式声明，用 , 隔开。注意：最后一个键值对不需要在末尾加 ,，如果加了，有的浏览器（如低版本的 IE）将报错。

属性访问

访问属性通过 . 操作符完成，但这要求属性名必须是一个有效的变量名。如果属性名包含特殊字符，就必须用 ' ' 括起来：

let xiaohong = {
  name: '小红',
  'middle-school': 'No.1 Middle School'
};

xiaohong 的属性名 middle-school 不是一个有效的变量，就需要用 ' ' 括起来。访问这个属性无法使用 . 操作符，必须用 ['xxx'] 来访问：

xiaohong['middle-school']; // 'No.1 Middle School'
xiaohong['name']; // '小红'
xiaohong.name; // '小红'

也可以用 xiaohong['name'] 来访问 xiaohong 的 name 属性，不过 xiaohong.name 的写法更简洁。我们在编写 JavaScript 代码的时候，属性名尽量使用标准的变量名，这样就可以直接通过 object.prop 的形式访问属性。

实际上 JavaScript 对象的所有属性都是字符串或 Symbol 类型，不过属性对应的值可以是任意数据类型。

属性操作

如果访问一个不存在的属性会返回 undefined：

'use strict';
let xiaoming = {
  name: '小明'
};
console.log(xiaoming.name);
console.log(xiaoming.age); // undefined

由于 JavaScript 的对象是动态类型，你可以自由地给一个对象添加或删除属性：

let xiaoming = {
  name: '小明'
};
xiaoming.age; // undefined
xiaoming.age = 18; // 新增一个 age 属性
xiaoming.age; // 18
delete xiaoming.age; // 删除 age 属性
xiaoming.age; // undefined
delete xiaoming['name']; // 删除 name 属性
xiaoming.name; // undefined
delete xiaoming.school; // 删除一个不存在的 school 属性也不会报错

属性检测

要检测对象是否拥有某一属性，可以用 in 操作符：

let xiaoming = {
  name: '小明',
  birth: 1990,
  school: 'No.1 Middle School',
  height: 1.70,
  weight: 65,
  score: null
};
'name' in xiaoming; // true
'grade' in xiaoming; // false

不过要小心，如果 in 判断一个属性存在，这个属性不一定是对象自身的，它可能是继承得到的：

'toString' in xiaoming; // true

因为 toString 定义在 object 对象中，而所有对象最终都会在原型链上指向 object，所以 xiaoming 也拥有 toString 属性。

要判断一个属性是否是对象自身拥有的（而不是继承得到的），可以用 hasOwnProperty() 方法：

let xiaoming = {
  name: '小明'
};
xiaoming.hasOwnProperty('name'); // true
xiaoming.hasOwnProperty('toString'); // false

模块小结 对象是无序键值对集合，键为字符串。访问属性可用 . 或 []（特殊字符必须用 []）。对象动态可变，可随时增删属性。检测属性用 in（含继承）或 hasOwnProperty（仅自身）。

变量

变量在 JavaScript 中用一个变量名表示，变量名由大小写英文、数字、$ 和 _ 组成，且不能以数字开头。变量名也不能是 JavaScript 的关键字（如 if、while 等）。申明一个变量用 var 语句：

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

注意：变量名也可以用中文，但是请不要给自己找麻烦。

在 JavaScript 中，使用等号 = 对变量进行赋值。可以把任意数据类型赋值给变量，同一个变量可以反复赋值，而且可以是不同类型的变量，但要注意只能用 var 申明一次：

var a = 123; // a的值是整数123
a = 'ABC'; // a变为字符串

这种变量本身类型不固定的语言称之为动态语言，与之对应的是静态语言（如 Java）。静态语言在定义变量时必须指定变量类型，如果赋值时类型不匹配就会报错。

请注意：不要把赋值语句的等号等同于数学的等号。例如 var x = 10; x = x + 2; 在程序中，赋值语句先计算右侧的表达式 x + 2，得到结果 12，再赋给变量 x。重新赋值后 x 的值变成 12。

要显示变量的内容，可以用 console.log(x)，打开 Chrome 的控制台就可以看到结果。

// 打印变量x
var x = 100;
console.log(x);

使用 console.log() 代替 alert() 的好处是可以避免弹出烦人的对话框。

strict 模式

JavaScript 在设计之初，并不强制要求用 var 申明变量。如果一个变量没有通过 var 申明就被使用，那么该变量就自动被申明为全局变量：

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

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

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

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

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

'use strict';

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

测试你的浏览器是否能支持 strict 模式：

function hello() {
    'use strict';
    // 如果浏览器支持strict模式,
    // 下面的代码将报ReferenceError错误:
    helloStr = 'hello';
    console.log(helloStr);
}

运行代码，如果浏览器报错，请修复后再运行。如果浏览器不报错，说明你的浏览器太古老了，需要尽快升级。

不用 var 申明的变量会被视为全局变量，为了避免这一缺陷，所有的 JavaScript 代码都应该使用 strict 模式。我们在后面编写的 JavaScript 代码将全部采用 strict 模式。

另一种申明变量的方式是 let，这也是现代 JavaScript 推荐的方式：

// 用let申明变量:
let s = 'hello';
console.log(s);

后续我们还会详细讨论 var 和 let 的区别。

模块小结 变量是动态类型，可随时改变数据类型。必须使用 var（或 let）声明，避免污染全局。强烈建议启用 'use strict' 模式以强制规范声明。

条件判断

JavaScript 使用 if (...) {...} else {...} 进行条件判断。

let age = 20;
if (age >= 18) {
  // 如果 age >= 18 为 true，则执行 if 语句块
  console.log('adult');
} else {
  // 否则执行 else 语句块
  console.log('teenager');
}

其中 else 语句是可选的。如果语句块只包含一条语句，那么可以省略 {}：

let age = 20;
if (age >= 18)
  console.log('adult');
else
  console.log('teenager');

警告：省略 {} 的危险之处在于，如果后来想添加一些语句，却忘了写 {}，就改变了 if...else... 的语义。例如：

let age = 20;
if (age >= 18)
  console.log('adult');
else
  console.log('age < 18'); // 添加一行日志
console.log('teenager'); // <- 这行语句已经不在 else 的控制范围了

上述代码的 else 子句实际上只负责执行 console.log('age < 18');，原有的 console.log('teenager'); 已经不属于 if...else... 的控制范围了，它每次都会执行。相反地，有 {} 的语句就不会出错。这就是为什么我们建议永远都要写上{}。

多行条件判断

如果还要更细致地判断条件，可以使用多个 if...else... 的组合：

let age = 3;
if (age >= 18) {
  console.log('adult');
} else if (age >= 6) {
  console.log('teenager');
} else {
  console.log('kid');
}

上述多个 if...else... 的组合实际上相当于两层 if...else...，但通常把 else if 连写在一起以增加可读性。

请注意，if...else... 语句的执行特点是二选一，在多个 if...else... 语句中，如果某个条件成立，则后续就不再继续判断了。

试解释为什么下面的代码显示的是 teenager：

'use strict';
let age = 20;
if (age >= 6) {
  console.log('teenager');
} else if (age >= 18) {
  console.log('adult');
} else {
  console.log('kid');
}

由于 age 的值为 20，它实际上同时满足条件 age >= 6 和 age >= 18，这说明条件判断的顺序非常重要。请修复后让其显示 adult：

'use strict';
let age = 20;
if (age >= 18) {
  console.log('adult');
} else if (age >= 6) {
  console.log('teenager');
} else {
  console.log('kid');
}

条件判断的隐式转换

如果 if 的条件判断语句结果不是 true 或 false 怎么办？例如：

let s = '123';
if (s.length) {
  // 条件计算结果为 3
}

JavaScript 把 null、undefined、0、NaN 和空字符串 '' 视为 false，其他值一概视为 true，因此上述代码条件判断的结果是 true。

练习

小明身高 1.75，体重 80.5kg。请根据 BMI 公式（体重除以身高的平方）帮小明计算他的 BMI 指数，并根据 BMI 指数：

• 低于 18.5：过轻
• 18.5-25：正常
• 25-28：过重
• 28-32：肥胖
• 高于 32：严重肥胖

用 if...else... 判断并显示结果：

let height = parseFloat(prompt('请输入身高(m):'));
let weight = parseFloat(prompt('请输入体重(kg):'));

let bmi = weight / (height * height);
if (bmi < 18.5) {
  console.log('过轻');
} else if (bmi < 25) {
  console.log('正常');
} else if (bmi < 28) {
  console.log('过重');
} else if (bmi < 32) {
  console.log('肥胖');
} else {
  console.log('严重肥胖');
}

模块小结 条件判断使用 if...else if...else，注意条件顺序，建议始终使用 {} 包裹代码块。非布尔值条件会隐式转换：null、undefined、0、NaN、'' 为 false，其余为 true。

循环

循环用于重复执行代码块。JavaScript 支持 for、for...in、while、do...while 以及 ES6 的 for...of。

for 循环

通过初始条件、结束条件和递增条件来循环执行语句块：

let x = 0;
let i;
for (i = 1; i <= 10000; i++) {
    x = x + i;
}
x; // 50005000

分析 for 循环的控制条件：

1. i = 1 初始条件，将变量置为 1；
2. i <= 10000 判断条件，满足时就继续循环，不满足就退出；
3. i++ 每次循环后的递增条件。

练习：利用 for 循环计算 1 × 2 × 3 × ... × 10 的结果：

let x = 1;
let i;
for (i = 1; i <= 10; i++) {
    x = x * i;
}
if (x === 3628800) {
    console.log('1 x 2 x 3 x ... x 10 = ' + x);
} else {
    console.log('计算错误');
}

for 循环最常用的地方是利用索引来遍历数组：

let arr = ['Apple', 'Google', 'Microsoft'];
let i, x;
for (i = 0; i < arr.length; i++) {
    x = arr[i];
    console.log(x);
}

for 循环的 3 个条件都可以省略。如果没有退出判断条件，就必须使用 break 语句退出循环，否则就是死循环：

let x = 0;
for (;;) { // 将无限循环下去
    if (x > 100) {
        break; // 通过if判断来退出循环
    }
    x++;
}

for...in 循环

for...in 可以把一个对象的所有属性依次循环出来：

let o = {
    name: 'Jack',
    age: 20,
    city: 'Beijing'
};
for (let key in o) {
    console.log(key); // 'name', 'age', 'city'
}

要过滤掉对象继承的属性，用 hasOwnProperty() 实现：

let o = {
    name: 'Jack',
    age: 20,
    city: 'Beijing'
};
for (let key in o) {
    if (o.hasOwnProperty(key)) {
        console.log(key); // 'name', 'age', 'city'
    }
}

由于 Array 也是对象，每个元素的索引被视为对象的属性，因此 for...in 可以直接循环出 Array 的索引（注意索引是字符串类型）：

let a = ['A', 'B', 'C'];
for (let i in a) {
    console.log(i); // '0', '1', '2'
    console.log(a[i]); // 'A', 'B', 'C'
}

注意：for...in 对 Array 的循环得到的是 String 而不是 Number。

while 循环

while 循环只有一个判断条件，条件满足就不断循环，不满足则退出。例如计算 100 以内所有奇数之和：

let x = 0;
let n = 99;
while (n > 0) {
    x = x + n;
    n = n - 2;
}
x; // 2500

do...while 循环

do { ... } while() 循环和 while 的唯一区别在于：先执行一次循环体，再判断条件。因此循环体至少会执行一次。

let n = 0;
do {
    n = n + 1;
} while (n < 100);
n; // 100

练习

请利用循环遍历数组中的每个名字，并显示 Hello, xxx！：

let arr = ['Bart', 'Lisa', 'Adam'];

// for 循环正序
for (let i = 0; i < arr.length; i++) {
    console.log('Hello, ' + arr[i] + '!');
}

// for 循环倒序
for (let i = arr.length - 1; i >= 0; i--) {
    console.log('Hello, ' + arr[i] + '!');
}

// while 循环正序
let j = 0;
while (j < arr.length) {
    console.log('Hello, ' + arr[j] + '!');
    j++;
}

// while 循环倒序
let k = arr.length - 1;
while (k >= 0) {
    console.log('Hello, ' + arr[k] + '!');
    k--;
}

模块小结 循环用于重复任务。for 适合已知次数；for...in 用于遍历对象属性（数组索引为字符串）；while 条件前置；do...while 至少执行一次。注意死循环和边界条件（< 与 <= 的区别）。

Map 和 Set

JavaScript 的默认对象 {} 可以视为其他语言中的 Map 或 Dictionary（键值对），但对象的键必须是字符串。而 Number 或其他数据类型作为键也是非常合理的。为此 ES6 引入了新的数据类型 Map 和 Set。

测试你的浏览器是否支持 ES6：

let m = new Map();
let s = new Set();
console.log('你的浏览器支持Map和Set!');

Map

Map 是一组键值对的结构，具有极快的查找速度。例如根据名字查找成绩：

用 Array 实现需要两个数组：

let names = ['Michael', 'Bob', 'Tracy'];
let scores = [95, 75, 85];

给定名字查找成绩，需要先在 names 中找到位置，再从 scores 取出，数组越长耗时越长。

用 Map 实现：

let m = new Map([['Michael', 95], ['Bob', 75], ['Tracy', 85]]);
m.get('Michael'); // 95

初始化 Map 需要一个二维数组，或者直接初始化一个空 Map。Map 具有以下方法：

let m = new Map(); // 空Map
m.set('Adam', 67); // 添加新的key-value
m.set('Bob', 59);
m.has('Adam'); // 是否存在key 'Adam': true
m.get('Adam'); // 67
m.delete('Adam'); // 删除key 'Adam'
m.get('Adam'); // undefined

由于一个 key 只能对应一个 value，多次对一个 key 放入 value，后面的值会覆盖前面的：

let m = new Map();
m.set('Adam', 67);
m.set('Adam', 88);
m.get('Adam'); // 88

Set

Set 和 Map 类似，也是一组 key 的集合，但不存储 value。由于 key 不能重复，所以在 Set 中没有重复的 key。

创建一个 Set，需要提供一个 Array 作为输入，或者直接创建一个空 Set：

let s1 = new Set(); // 空Set
let s2 = new Set([1, 2, 3]); // 含1, 2, 3

重复元素在 Set 中自动被过滤：

let s = new Set([1, 2, 3, 3, '3']);
s; // Set {1, 2, 3, "3"}

注意数字 3 和字符串 '3' 是不同的元素。

通过 add(key) 添加元素（重复添加无效），通过 delete(key) 删除元素：

s.add(4);
s; // Set {1, 2, 3, 4}
s.add(4);
s; // 仍然是Set {1, 2, 3, 4}

s.delete(3);
s; // Set {1, 2, 4}

模块小结 Map 存储键值对，键可以是任意类型，常用方法 set、get、has、delete。Set 存储不重复的键值集合，无 value，自动去重，方法 add、delete。两者均为 ES6 新增。

iterable

遍历 Array 可以用下标，但遍历 Map 和 Set 无法使用下标。ES6 引入了 iterable 类型，Array、Map、Set 都属于 iterable。具有 iterable 类型的集合可以通过新的 for...of 循环遍历。

测试浏览器是否支持 for...of：

let a = [1, 2, 3];
for (let x of a) {
}
console.log('你的浏览器支持for ... of');

for...of 循环

用法如下：

let a = ['A', 'B', 'C'];
let s = new Set(['A', 'B', 'C']);
let m = new Map([[1, 'x'], [2, 'y'], [3, 'z']]);
for (let x of a) { // 遍历Array
    console.log(x);
}
for (let x of s) { // 遍历Set
    console.log(x);
}
for (let x of m) { // 遍历Map
    console.log(x[0] + ': ' + x[1]);
}

for...of vs for...in

• for...in 遍历的是对象的属性名称。对于数组，额外添加的属性也会被遍历到，导致意外结果。
• for...of 只循环集合本身的元素，修复了这些问题。

let a = ['A', 'B', 'C'];
a.name = 'Hello';
for (let x in a) {
    console.log(x); // '0', '1', '2', 'name'
}
for (let x of a) {
    console.log(x); // 'A', 'B', 'C'
}

forEach 方法

更好的方式是直接使用 iterable 内置的 forEach 方法，它接收一个函数，每次迭代自动回调该函数。

• Array 的 forEach：

let a = ['A', 'B', 'C'];
a.forEach(function (element, index, array) {
    // element: 指向当前元素的值
    // index: 指向当前索引
    // array: 指向Array对象本身
    console.log(element + ', index = ' + index);
});

注意：forEach() 方法是 ES5.1 标准引入的。

• Set 没有索引，因此回调函数的前两个参数都是元素本身：

let s = new Set(['A', 'B', 'C']);
s.forEach(function (element, sameElement, set) {
    console.log(element);
});

• Map 的回调函数参数依次为 value、key 和 map 本身：

let m = new Map([[1, 'x'], [2, 'y'], [3, 'z']]);
m.forEach(function (value, key, map) {
    console.log(value);
});

如果对某些参数不感兴趣，由于 JavaScript 的函数调用不要求参数必须一致，因此可以忽略它们。例如，只需要获得 Array 的 element：

let a = ['A', 'B', 'C'];
a.forEach(function (element) {
    console.log(element);
});

模块小结 for...of 专门遍历 iterable 集合（Array、Map、Set），不会遍历额外属性。forEach 方法更灵活，可接收回调函数，参数依次为元素、索引（或键）、集合自身。

---

本篇核心知识点速记

• Number：不分整数浮点数，含 NaN、Infinity，安全整数 ±2^53。四则运算注意 % 可为浮点数。
• 字符串：不可变，支持 \ 转义、多行（反引号）、模板字符串 ${}。方法：length、[index]、toUpperCase、toLowerCase、indexOf、substring。
• 布尔值：true/false，逻辑运算符 &&、||、!。
• 比较：始终用 ===，NaN 不自等，用 isNaN()。浮点数比较看差值阈值。
• BigInt：后加 n 或 BigInt()，不可与 Number 混算。
• null/undefined：null 表示空，undefined 表示未定义，日常用 null。
• 数组：[] 声明，可含任意类型。重要方法：slice（复制/截取）、push/pop（末尾）、unshift/shift（头部）、splice（万能）、concat、join、sort、reverse。直接改 length 或越界赋值会改变大小。
• 对象：{key: value}，键为字符串。访问用 . 或 []（特殊字符）。动态增删属性。属性检测：in（含继承）、hasOwnProperty（自身）。
• 变量：动态类型，用 var 或 let 声明。启用 'use strict' 避免全局污染。
• 条件判断：if...else if...else，注意顺序，始终加 {}。假值：null、undefined、0、NaN、''。
• 循环：for（已知次数）、for...in（遍历对象属性，数组索引为字符串）、while（条件前置）、do...while（至少一次）、for...of（遍历 iterable 元素）。
• Map：键值对，键可为任意类型，方法 set/get/has/delete。
• Set：无重复值的集合，方法 add/delete。
• iterable：Array、Map、Set 均支持 for...of 和 forEach。forEach 回调参数因类型而异。