本文是基于阮一峰的《ECMAScript 6 入门》做的个人学习笔记，方便今后查阅，所以以下内容基本上绝大部分出自阮一峰的博客。
笔记1：数据类型和语法块
简单说，ECMAScript 是 JavaScript 语言的国际标准，JavaScript 是 ECMAScript 的实现。
let 命令
ES6 新增了 let 命令，用了声明变量，使用它声明的变量只在所在的代码块中有效。
1
2
3
4
5
6
7
| {
let a = 10;
var b = 11;
}
console.log(a); //Error is not defined
console.log(b); // 11
|
for 循环的计数器就很合适使用 let 命令。
1
2
3
4
| for(let i = 0; i < 10; i++){
//...
}
console.log(i); //Error
|
而且 let 不存在变量提升（变量可以在声明之前使用），也就是说我们一般需要先使用 let 来声明变量才能使用。
1
2
3
4
5
6
7
| //var
console.log(foo); //undefined
var foo = 2;
//let
console.log(bar); //Error bar is not defined
let bar = 3;
|
ES5 中只有全局作用域和函数作用域，没有块级作用域，let 变量实际上为 JS 新增了块级作用域，而且比较特殊的是 ES6 允许块级作用域的任意嵌套。
1
2
3
4
5
6
| {{{{
{
let insane = 'Hello World'
}
console.log(insane); // 报错
}}}};
|
ES6 的块级作用域必须有大括号，如果没有大括号，JavaScript 引擎就认为不存在块级作用域。
1
2
3
4
5
6
7
| // 第一种写法，报错
if (true) let x = 1;
// 第二种写法，不报错
if (true) {
let x = 1;
}
|
另外，块级作用域的出现，实际上使得获得广泛应用的匿名立即执行函数表达式（匿名 IIFE）不再必要了。
1
2
3
4
5
6
7
8
9
10
11
| // IIFE 写法
(function () {
var tmp = ...;
...
}());
// 块级作用域写法
{
let tmp = ...;
...
}
|
const 命令
const 声明一个只读的常量。一旦声明，常量的值就不能改变。
1
2
3
4
| const PI = 3.1415;
console.log(PI);
PI = 3; //Error
|
数组的解构赋值
ES6 允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构。
1
| let [a, b, c] = [1, 2, 3];
|
解构赋值允许指定默认值:
1
2
3
4
| let [x = 1, y = x] = []; // x=1; y=1
let [x = 1, y = x] = [2]; // x=2; y=2
let [x = 1, y = x] = [1, 2]; // x=1; y=2
let [x = y, y = 1] = []; // ReferenceError: y is not defined
|
对象的解构赋值
解构不仅可以用于数组，还可以用于对象。
1
| let { foo, bar } = { foo: 'aaa', bar: 'bbb' };
|
对象代理 Proxy
Proxy 可以理解成，在目标对象之前架设一层“拦截”，外界对该对象的访问，都必须先通过这层拦截，因此提供了一种机制，可以对外界的访问进行过滤和改写。
1
2
3
4
5
6
7
8
9
| var proxy = new Proxy({}, {
get: function(target, propKey) {
return 35;
}
});
proxy.time // 35
proxy.name // 35
proxy.title // 35
|
下面是对一个空对象进行拦截，而且实现了一个空拦截。
1
2
| var fproxy = new Proxy({}, {});
console.log(fproxy.prototype === Object.prototype); //false
|
空函数拦截
1
2
| var fproxy = new Proxy(function(){}, {});
console.log(fproxy.prototype === Object.prototype); //false
|
例如 apply(target, object, args) 可以拦截 Proxy 实例作为函数调用的操作，比如 proxy(...args)、proxy.call(object, ...args)、proxy.apply(...)。
1
2
3
4
5
6
7
| var fproxy = new Proxy(function(){}, {
apply: function(target, object, args){
return args[0];
}
})
fproxy(1, 2, 3); //1
|
what? 为什么会输出 1 呢？ 在 JS 中每个函数都包含两个非继承而来的方法 call 和 apply。 这两个方法的用途都是在特定的作用域中调用函数，实际上等于设置函数体内的this对象的值。
apply 方法 ： 接收两个参数，第一个参数是在其中运行函数的作用域，第二个是一个参数数组或者 arguments 对象。
call 方法 ：与 apply 方法作用相同，第一个参数也相同，区别在于，其余的参数需要逐个列出。
1
2
| apply(thisArg, argArray);
call(thisArg[, arg1, arg2…]);
|
来，我们看一个例子：
1
2
3
4
5
6
| var name = "LiXiaoQiang";
function sayName(){
console.log(this.name);
}
console.log(sayName()); //undefined
|
上面实际上默认执行了函数 sayName 的 apply 方法，该方法将 this 绑定到了 sayName 内部。接下来我们使用 apply 绑定到外部作用域。
1
2
3
4
5
6
| var name = "LiXiaoQiang";
function sayName(){
console.log(this.name);
}
console.log(sayName.apply(this)); //LiXiaoQiang
|
还可以这么用
1
2
3
4
5
6
7
8
9
10
| var person = {
name: "ZhangQiang"
}
var name = "LiXiaoQiang";
function sayName(){
console.log(this.name);
}
console.log(sayName.apply(person)); //ZhangQiang
|
也就是说 JS 中函数（Function 对象）在被调用的时候会默认调用 apply 和 call 方法将 this 绑定到该对象上，事实上 Proxy 支持拦截的方法很多，其中 apply 只是其中的一个而已。
代理的 this 问题
在 Proxy 代理的情况下，目标对象内部的this关键字会指向 Proxy 代理。
1
2
3
4
5
6
7
8
9
10
11
| const target = {
m: function () {
console.log(this === proxy);
}
};
const handler = {};
const proxy = new Proxy(target, handler);
target.m() // false
proxy.m() // true
|
异步编程 Promise
Promise 是异步编程的一种解决方案，比传统的解决方案——回调函数和事件——更合理和更强大。
1
2
3
4
5
6
7
8
9
| const promise = new Promise(function(resolve, reject) {
// ... some code
if (/* 异步操作成功 */){
resolve(value);
} else {
reject(error);
}
});
|
Promise实例生成以后，可以用 then 方法分别指定 resolved 状态和 rejected 状态的回调函数。
1
2
3
4
5
| promise.then(function(value) {
// success
}, function(error) {
// failure
});
|
then方法可以接受两个回调函数作为参数。第一个回调函数是Promise对象的状态变为resolved时调用，第二个回调函数是Promise对象的状态变为rejected时调用。其中，第二个函数是可选的，不一定要提供。这两个函数都接受Promise对象传出的值作为参数。
Promise 实例具有 then 方法，也就是说，then 方法是定义在原型对象 Promise.prototype 上的。它的作用是为 Promise 实例添加状态改变时的回调函数。
1
2
3
4
5
| getJSON("/posts.json").then(function(json) {
return json.post;
}).then(function(post) {
// ...
});
|
新数据类型 Symbol
ES6 引入了一种新的原始数据类型Symbol，表示独一无二的值。它是 JavaScript 语言的第七种数据类型，前六种是：undefined、null、布尔值（Boolean）、字符串（String）、数值（Number）、对象（Object）。
Symbol 值通过 Symbol 函数生成。这就是说，对象的属性名现在可以有两种类型，一种是原来就有的字符串，另一种就是新增的 Symbol 类型。凡是属性名属于 Symbol 类型，就都是独一无二的，可以保证不会与其他属性名产生冲突。
1
2
3
| let s = Symbol();
typeof s //"symbol"
|
Symbol 函数可以接受一个字符串作为参数，表示对 Symbol 实例的描述，主要是为了在控制台显示，或者转为字符串时，比较容易区分。
1
2
3
4
5
6
7
8
| let s1 = Symbol('foo');
let s2 = Symbol('bar');
console.log(s1); //Symbol(foo)
console.log(s2); //Symbol(bar)
console.log(s1.toString()); //"Symbol(foo)"
console.log(s2.toString()); //"Symbol(bar)"
|
Symbol 值不能与其他类型的值进行运算，会报错。
1
2
| let sym = Symbol('My symbol');
console.log("your symbol is " + sym); //Error
|
但是，Symbol 值可以显式转为字符串。
1
2
3
4
| let sym = Symbol('My symbol');
String(sym) // 'Symbol(My symbol)'
sym.toString() // 'Symbol(My symbol)
|
Symbol 除了使用 toString 显示描述信息外，ES2019 提供了一个实例属性 description，直接返回 Symbol 的描述。
1
2
| const sym = Symbol('foo');
console.log(sym.description);
|
由于每一个 Symbol 值都是不相等的，这意味着 Symbol 值可以作为标识符，用于对象的属性名，就能保证不会出现同名的属性。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
| let mySymbol = Symbol();
// 第一种写法
let a = {};
a[mySymbol] = 'Hello!';
// 第二种写法
let a = {
[mySymbol]: 'Hello!'
};
// 第三种写法
let a = {};
Object.defineProperty(a, mySymbol, { value: 'Hello!' });
// 以上写法都得到同样结果
console.log(a[mySymbol]);
|
同样的，如果是字面量对象：
1
2
3
4
5
6
7
8
9
| let s = Symbol();
let obj = {
[s]: function (arg) {
console.log(arg);
}
};
console.log(obj[s](123));
|
上面代码中，如果 s 不放在方括号中，该属性的键名就是字符串 s，而不是 s 所代表的那个 Symbol 值。
采用增强的对象写法，上面代码的 obj 对象可以写得更简洁一些。
1
2
3
| let obj = {
[s](arg) { ... }
};
|
Symbol 类型还可以用于定义一组常量，保证这组常量的值都是不相等的。
1
2
3
4
5
6
7
8
9
| const log = {};
log.levels = {
DEBUG: Symbol('debug'),
INFO: Symbol('info'),
WARN: Symbol('warn')
};
console.log(log.levels.DEBUG, 'debug message');
console.log(log.levels.INFO, 'info message');
|
下面是另外一个例子。
1
2
3
4
5
6
7
8
9
10
11
12
13
| const COLOR_RED = Symbol();
const COLOR_GREEN = Symbol();
function getComplement(color) {
switch (color) {
case COLOR_RED:
return COLOR_GREEN;
case COLOR_GREEN:
return COLOR_RED;
default:
throw new Error('Undefined color');
}
}
|
常量使用 Symbol 值最大的好处，就是其他任何值都不可能有相同的值了，因此可以保证上面的switch语句会按设计的方式工作。
还有一点需要注意，Symbol 值作为属性名时，该属性还是公开属性，不是私有属性。
有时，我们希望重新使用同一个 Symbol 值，Symbol.for() 方法可以做到这一点。
1
2
3
4
| let s1 = Symbol.for('foo');
let s2 = Symbol.for('foo');
console.log(s1 === s2); // true
|
Symbol.for() 与 Symbol() 这两种写法，都会生成新的 Symbol。它们的区别是，前者会被登记在全局环境中供搜索，后者不会。Symbol.keyFor() 方法返回一个已登记的 Symbol 类型值的 key。
1
2
3
4
5
| let s1 = Symbol.for("foo");
Symbol.keyFor(s1) // "foo"
let s2 = Symbol("foo");
Symbol.keyFor(s2) // undefined
|
Map 和 Set
ES6 提供了新的数据结构 Set。它类似于数组，但是成员的值都是唯一的，没有重复的值。
1
2
3
4
5
6
7
| const s = new Set();
[2, 3, 5, 4, 5, 2, 2].forEach(x => s.add(x));
for (let i of s) {
console.log(i);
}
|
ES6 提供了 Map 数据结构。它类似于对象，也是键值对的集合，但是“键”的范围不限于字符串，各种类型的值（包括对象）都可以当作键。也就是说，Object 结构提供了“字符串—值”的对应，Map 结构提供了“值—值”的对应，是一种更完善的 Hash 结构实现。如果你需要“键值对”的数据结构，Map 比 Object 更合适。
1
2
3
4
5
6
7
8
9
| const m = new Map();
const o = {p: 'Hello World'};
m.set(o, 'content')
m.get(o) // "content"
m.has(o) // true
m.delete(o) // true
m.has(o) // false
|
这里的 Set 和 Map 和 Java 中的概念比较类似，还是容易理解的。
