《ECMAScript6入门》读书笔记
《JavaScript高级程序设计》中学习了前八章,后面是一些 DOM 相关的知识,现在开始学习 ES6 语法。
《ECMAScript6入门》 作者:阮一峰。
第1章 ECMAScript6 简介
ES6 既是一个历史名词,也是一个泛指,含义是5.1版以后的 JavaScript 的下一代标准,涵盖了ES2015、ES2016、ES2017等等。
Babel 是一个广泛使用的 ES6 转码器,可以将 ES6 代码转为 ES5 代码。
ESLint 用于静态检查代码的语法和风格;Mocha 则是一个测试框架。
第2章 let 和 const 命令
let 命令
let 命令只在其所在的代码块内有效。
{ let a = 10; var b = 1; }
console.log(a); // ReferenceError: a is not defined.
console.log(b); // 1
前面闭包中有说:闭包只能取得函数中任何变量的最后一个值。
var a = [];
for (var i = 0; i < 10; i++) {
a[i] = function () {
console.log(i);
};
}
a[6](); // 10
使用 let 声明的变量仅在块级作用域内有效。
var a = [];
for (let i = 0; i < 10; i++) {
a[i] = function () {
console.log(i);
};
}
a[6](); // 6
其实 i 仅在当前循环有效。每循环一次就是一个新的变量。
1.不存在变量提升:var 命令会发生“变量提升”现象,即变量可以在声明之前使用,值为 undefined;let 变量声明前使用会报错。
console.log(c); // ReferenceError: a is not defined. console.log(d); // undefined
let c;
var d;
2.暂时性死区:在代码块内,使用 let 命令声明变量之前,该变量都是不可用的。
var tmp = 123;
if (true) {
tmp = 'abc'; // ReferenceError
let tmp;
}
暂时性死区的本质就是,只要一进入当前作用域,所要使用的变量就已经存在了,但是不可获取,只有等到声明变量的那一行代码出现,才可以获取和使用该变量。
3.不允许重复声明:let 不允许在相同作用域内,重复声明同一个变量。也不能在函数内部重新声明参数。
块级作用域
ES5 只有全局作用域和函数作用域,没有块级作用域,这带来很多不合理的场景。
第一种场景,内层变量可能会覆盖外层变量;第二种场景,用来计数的循环变量泄露为全局变量。
let 实际上为 JavaScript 新增了块级作用域。
function f1() {
let n = 5;
if (true) {
let n = 10;
}
console.log(n); // 5
}
内部代码块可以定义外层作用域的同名变量;外层作用域无法读取内层作用域的变量,也不受内层代码块的影响。
块级作用域与函数声明:ES6 允许在块级作用域之中声明函数,但函数在块级作用域之外不可引用。
考虑到环境导致的行为差异太大,应该避免在块级作用域内声明函数。如果确实需要,也应该写成函数表达式,而不是函数声明语句。
const 命令
const声明一个只读的常量。一旦声明,就必须立即初始化,常量的值不能改变。
const PI = 3.1415;
console.log(PI); // 3.1415
PI = 3; // TypeError: Assignment to constant variable.
const foo; // SyntaxError: Missing initializer in const declaration
const 的作用域与 let 命令相同:只在声明所在的块级作用域内有效。
const 命令声明的常量也是不提升;同样存在暂时性死区,只能在声明的位置后面使用;并且不可重复声明。
本质:const 其实是变量指向的内存地址不得改动。
对于简单类型的数据(数值、字符串、布尔值),等同于常量。但对于复合类型的数据(主要是对象和数组),变量保存的只是一个指针,const 只能保证这个指针是固定的。
const foo = {};
// 为 foo 添加一个属性,可以成功
foo.prop = 123;
foo.prop // 123
// 将 foo 指向另一个对象,就会报错
foo = {}; // TypeError: "foo" is read-only
如果真的想将对象冻结,应该使用 Object.freeze
方法。
const foo = Object.freeze({});
// 常规模式时,下面一行不起作用;
// 严格模式时,该行会报错
foo.prop = 123;
顶层对象的属性
顶层对象,在浏览器环境指的是window对象,在 Node 指的是global对象。ES5 中,顶层对象的属性与全局变量是等价的。
window.a = 1;
console.log(a); // 1
b = 2;
console.log(window.b); // 2
ES6 规定 let、const、class 命令声明的全局变量,不属于顶层对象的属性。
var a = 1;
// 如果在 Node 的 REPL 环境,可以写成 global.a
// 或者采用通用方法,写成 this.a
console.log(window.a) // 1
let b = 1;
console.log(window.b) // undefined
第3章 变量的解构赋值
ES6 允许按照一定模式,从数组和对象中提取值,对 变量 进行赋值,这被称为解构。
数组的解构赋值
let [a, b, c] = [1, 2, 3];
上面代码表示,可以从数组中提取值,按照对应位置,对变量赋值。
// 右边比左边少,解构不成功,值为 undefined
let [bar, foo] = [1]; // undefined,undefined
// 右边比左边多,不完全解构
let [x, y] = [1, 2, 3]; //1,2
默认值:解构赋值允许指定默认值。
let [x, y = 'b'] = ['a']; // 'a','b'
let [x, y = 'b'] = ['a', undefined]; // 'a','b'
// 只有数组成员 严格等于 undefined 时,默认值才会生效
let [x = 1] = [null]; // null
对象的解构赋值
解构不仅可以用于数组,还可以用于对象。
let { bar, foo } = { foo: "aaa", bar: "bbb" }; //"aaa","bbb"
let { baz } = { foo: "aaa", bar: "bbb" }; // undefined
对象的属性没有次序;变量必须与属性同名,才能取到正确的值。
变量名与属性名不一致:真正被赋值的是后者,而不是前者。
let { foo: baz } = { foo: 'aaa', bar: 'bbb' };
console.log(baz); // "aaa"
对象的解构赋值的内部机制,是先找到同名属性,然后再赋给对应的变量。
实际上,对象的解构时下面形式的简写:
let { foo: foo, bar: bar } = { foo: "aaa", bar: "bbb" }; // 完整形式
let { foo , bar } = { foo: "aaa", bar: "bbb" }; // 简写形式
嵌套赋值:
let obj = {};
let arr = [];
({ foo: obj.prop, bar: arr[0] } = { foo: 123, bar: true });
console.log(obj); // {prop:123}
console.log(arr); // [true]
对象的解构也可以指定默认值。同样严格等于 undefined 才生效。
let {x = 3} = {};
console.log(x); // 3
let {x: y = 3} = {};
console.log(y); // 3
如果要将一个已经声明的变量用于解构赋值,必须用括号包裹,不能让花括号处于行首。
let x;
= {x: 1}; // 错误的写法
( = {x: 1}); // 正确的写法
字符串的解构赋值
字符串也可以解构赋值。这是因为此时,字符串被转换成了一个类似数组的对象。
// 字符串可以看做数组进行结构
const [a, b, c, d, e] = 'hello'; // a:"h", b:"e", c:"l", d:"l", e:"o",
// 字符串作为类数组对象,拥有length属性。
let {length : len} = 'hello'; // len:5
数值和布尔值的解构赋值
数值和布尔值也能进行解构,两者会先转为对象,剩下的就是匹配对象中的方法
let {toString: s} = 123; s === Number.prototype.toString // true
let {toString: s} = true;
s === Boolean.prototype.toString // true
// undefined和null不能转为对象,没有属性
let { prop: x } = undefined; // TypeError
let { prop: y } = null; // TypeError
函数参数的解构赋值
函数的参数也可以使用解构赋值。
function add([x, y]){
return x + y;
}
add([1, 2]); // 3
函数 add() 的参数不是数组,而是[x,y] = [1,2]的解构,在函数内部,x和y可以直接访问,不需要索引。
函数参数的解构也可以使用默认值。
function move({x = 0, y = 0} = {}) {
return [x, y];
}
move({x: 3, y: 8}); // [3, 8]
move({x: 3}); // [3, 0]
move({}); // [0, 0]
move(); // [0, 0]
下面代码是为函数 move() 的参数指定默认值。
function move({x, y} = { x: 0, y: 0 }) {
return [x, y];
}
move({x: 3, y: 8}); // [3, 8]
move({x: 3}); // [3, undefined]
move({}); // [undefined, undefined]
move(); // [0, 0] - 无参数,默认值生效
圆括号问题
ES6 规定,但凡有可能产生歧义,就不能使用圆括号。以下3种情况下不能用圆括号:
1.变量声明语句
let [(a)] = [1];
let {x: (c)} = {};
let { o: ({ p: p }) } = { o: { p: 2 } };
2.函数参数
function f([(z)]) { return z; }
function f([z,(x)]) { return x; }
3.赋值语句的模式
[(b)] = [3]; // 正确,数组的解构赋值根据索引来,与括号无关
({ p: (d) } = {}); // 正确,p 是模式,但 d 不是模式。
用途
1.交换变量的值
let x = 1;
let y = 2;
[x, y] = [y, x];
2.从函数返回多个值
// 返回一个数组
function example() {
return [1, 2, 3];
}
let [a, b, c] = example();
// 返回一个对象
function example() {
return {
foo: 1,
bar: 2
};
}
let { foo, bar } = example();
3.函数参数的定义
// 参数是一组有次序的值
function f([x, y, z]) { ... }
f([1, 2, 3]);
// 参数是一组无次序的值
function f({x, y, z}) { ... }
f({z: 3, y: 2, x: 1});
4.提取JSON数据
let jsonData = {
id: 42,
status: "OK",
data: [867, 5309]
};
let { id, status, data: number } = jsonData;
console.log(id, status, number);
// 42, "OK", [867, 5309]
5.函数参数的默认值
jQuery.ajax = function (url, {
async = true,
beforeSend = function () {},
cache = true,
complete = function () {},
crossDomain = false,
global = true,
// ... more config
}) {
// ... do stuff
};
指定参数的默认值,就避免了在函数体内部再写var foo = config.foo || 'default foo';
这样的语句。
6.遍历 Map 结构
任何部署了Iterator接口的对象,都可以用for...of
循环遍历。Map结构原生支持Iterator接口,配合变量的解构赋值,获取键名和键值就非常方便。
const map = new Map(); map.set('first', 'hello'); map.set('second', 'world');
for (let [key, value] of map) {
console.log(key + " is " + value);
}
// first is hello
// second is world
// 如果只想获取键名或键值,可以写成下面这样。
for (let [key] of map) { ... }// 获取键名
for (let [,value] of map) { ...}// 获取键值
7.输入模块的指定方法
加载模块时,往往需要指定输入哪些方法。解构赋值使得输入语句非常清晰。
const { SourceMapConsumer, SourceNode } = require("source-map");