最近在系统的学习ES6,之前因为需要,也会接触并用到ES6的新特性,但是并没有完全的学习和了解过,所以现在也是趁有时间好好的学习。当然ES6新增了很多东西,想全面学习的话,还是推荐阮一峰老师的《ECMAScript 6 入门》,这里非常全面的介绍了 ECMAScript 6 新引入的语法特性,虽然有些例子可能一下子不能理解,但是思考理解的过程也会增加对语法的了解。
下面我将会慢慢的介绍一些常用的ES6语法特性,这其中有很大一部分引用于阮一峰老师的《ECMAScript 6 入门》,算是自己对这本书的一个笔记吧。
1、let 和 const 命令
ES5 只有两种声明变量的方法:var
命令和function
命令。ES6 除了添加let
和const
命令,另外两种声明变量的方法:import
命令和class
命令。所以,ES6 一共有 6 种声明变量的方法。
let 的用法类似于var
,但是所声明的变量,只在let
命令所在的代码块内有效。
{
let a = 10;
var b = 1;
}
a // 报错
b // 1
因为
循环的计数器,就很合适使用let
命令所在的代码块内才会有效,所以像forlet
for (let i = 0; i < 10; i++) {
// ...
}
console.log(i);
// ReferenceError: i is not defined
暂时性死区:在代码块内,使用
let
命令声明变量之前,该变量都是不可用的。这在语法上,称为“暂时性死区”(temporal dead zone,简称 TDZ)。
var a = 123;
{
a = 'abc'; // ReferenceError
let a;
}
ES6 明确规定,如果区块中存在let
和const
命令,这个区块对这些命令声明的变量,从一开始就形成了封闭作用域。凡是在声明之前就使用这些变量,就会报错。
const 顾名思义就是常量的意思, 一旦声明,常量的值就不能改变。
const a = 123;
a // 123
a = 321;//报错
const
声明的变量不得改变值,这意味着const
声明的同时必须初始化,不能留到以后赋值, 不然也是会报错的。
const foo;
// SyntaxError: Missing initializer in const declaration
let 和 const 相同的地方
1.只在声明所在的块级作用域内有效2.不可重复声明
3.同样存在暂时性死区,只能在声明的位置后面使用。
2、变量的解构赋值
数组结构赋值
//before
let a = 1;
let b = 2;
let c = 3;
//after
let [a, b, c] = [1, 2, 3];
这种写法属于“
模式匹配
”,只要等号两边的模式相同,左边的变量就会被赋予对应的值,如果解构不成功,变量的值就等于undefined
。
let [a, [[b], c]] = [1, [[2], 3]];
a// 1
b// 2
c// 3
let [ , , c] = ["A", "B", "C"];
c// "C"
let [a, , c] = [1, 2, 3];
a // 1
c // 3
let [a, ...b] = [1, 2, 3, 4];
a// 1
b// [2, 3, 4]
let [a, b, ...z] = ['A'];
a // "a"
b // undefined
z // []
上面用到的...b和...z是rest参数,ES6新增语法,后面将会提到
let [a, b] = [1, 2, 3];
a// 1
b// 2
let [a, [b], d] = [1, [2, 3], 4];
a // 1
b // 2
d // 4
// 报错
let [foo] = 1;
let [foo] = false;
let [foo] = NaN;
let [foo] = undefined;
let [foo] = null;
let [foo] = {};
上面的语句都会报错,因为等号右边的值,要么转为对象以后不具备 Iterator 接口(前五个表达式),要么本身就不具备 Iterator 接口(最后一个表达式)。
事实上,只要某种数据结构具有 Iterator 接口,都可以采用数组形式的解构赋值。
// 这是一个 Generator函数,后面也会写到
function* fibs() {
let a = 0;
let b = 1;
while (true) {
yield a;
[a, b] = [b, a + b];
}
}
let [first, second, third, fourth, fifth, sixth] = fibs();
first // 0
sixth // 5
对象结构赋值
同样的,对象也是可以使用结构赋值let { a, b} = { a: "aaa", b: "bbb" };
a// "aaa"
b// "bbb"
不同的是
,数组的元素是按次序排列的,变量的取值由它的位置决定,而对象的属性没有次序,变量必须与属性同名,才能取到正确的值。
let { c } = { a: "aaa", b: "bbb" };
c// undefined
如果变量名与属性名不一致,必须写成下面这样。
let { a: c} = { a: 'aaa', b: 'bbb' };
c// "aaa"
a// ReferenceError: a is not defined
对象的解构赋值的内部机制,是先找到同名属性,然后再赋给对应的变量。真正被赋值的是后者,而不是前者。上面代码中,a
是匹配的模式,c
才是变量。真正被赋值的是变量c
,而不是模式a
解构也可以用于嵌套结构的对象,这和数组是一样的
let obj = {
p: [
'Hello',
{ y: 'World' }
]
};
let { p: [x, { y }] } = obj;
x // "Hello"
y // "World"
如果想给p也赋值,可以写成下面这样。
let { p, p: [x, { y }] } = obj;
p // ["Hello", {y: "World"}]
默认值
不管是对象还是数组,解构赋值都允许指定默认值。
let [a = 1] = []; // 数组
a // 1
let [x, y = 'b'] = ['a']; // x='a', y='b'
let [x, y = 'b'] = ['a', undefined]; // x='a', y='b'
var {x, y = 5} = {x: 1}; // 对象
x // 1
y // 5
注意,ES6 内部使用严格相等运算符(===
),判断一个位置是否有值。所以,只有当一个数组成员严格等于undefined
,默认值才会生效。
let [x = 1] = [null];
x // null
如果默认值是一个表达式,那么这个表达式是惰性求值的,即只有在用到的时候,才会求值。
function fun() {
console.log('aaa');
}
let [x = fun()] = [1];//因为x能取到值,所以fun并不会执行
默认值可以引用解构赋值的其他变量,但该变量必须已经声明。
let [a = 1, b = a] = [1, 2]; // a=1; b=2
let [a = b, b = 1] = []; // ReferenceError: b is not defined
对象的解构默认值基本和数组的一样,但需要注意如果要将一个已经声明的变量用于解构赋值,必须小心。
// 错误的写法
let x;
{x} = {x: 1};// SyntaxError: syntax error
// 正确的写法
let x;
({x} = {x: 1});
因为 JavaScript 引擎会将
{x}
理解成一个代码块,从而发生语法错误。只有不将大括号写在行首,避免 JavaScript 将其解释为代码块,才能解决这个问题。
对象的解构赋值,可以很方便地将现有对象的方法,赋值到某个变量。
let { log, sin, cos } = Math;
由于数组本质是特殊的对象,因此可以对数组进行对象属性的解构。
let arr = [1, 2, 3];
let {0 : first, [arr.length - 1] : last} = arr;
first // 1
last // 3
字符串结构赋值
字符串也可以解构赋值。这是因为此时,字符串被转换成了一个类似数组的对象。let [a, b, c, d, e] = 'hello';
a // "h"
b // "e"
c // "l"
d // "l"
e // "o"
这里有个小技巧,类似数组的对象都有一个length
属性,因此还可以对这个属性解构赋值。
let {length : len} = 'hello';
len // 5
函数的参数的解构赋值
function add([x, y]){
return x + y;
}
add([1, 2]); // 3
上面这个还是很容易理解,数组参数被解构成变量x
和y
[[1, 2], [3, 4]].map(([a, b]) => a + b);
//等同于
[[1, 2], [3, 4]].map(function ([a, b]){
return a + b;
});
这里用到的 => 箭头函数,后面也会写到
函数参数的解构也可以使用默认值。
function fun({x = 0, y = 0} = {}) {
return [x, y];
}
fun({x: 3, y: 8}); // [3, 8]
fun({x: 3}); // [3, 0]
fun({}); // [0, 0]
fun(); // [0, 0]
上面代码中,函数fun
的参数是一个对象,通过对这个对象进行解构,得到变量x
和y
的值。如果解构失败,x
和y
等于默认值。
function fun({x, y} = { x: 0, y: 0 }) {
return [x, y];
}
fun({x: 3, y: 8}); // [3, 8]
fun({x: 3}); // [3, undefined]
fun({}); // [undefined, undefined]
fun(); // [0, 0]
上面代码是为函数
move
的参数指定默认值,而不是为变量
x
和
y
指定默认值,所以会得到与前一种写法不同的结果。
用途
1.交换变量的值
let a = 1;
let b = 2;
[a, b] = [a, b];
上面代码交换变量
a
和
b
的值,这样的写法不仅简洁易读。
2.从函数返回多个值
因为函数只能返回一个值,在以前如果要返回多个值,只能将它们放在数组或对象里返回,然后遍历赋值。有了解构赋值,取出这些值就非常方便。
// 数组
function example() {
return [1, 2, 3];
}
let [a, b, c] = example();
// 对象
function example() {
return {
foo: 1,
bar: 2
};
}
let { foo, bar } = example();
3.函数参数的定义
解构赋值可以方便地将一组参数与变量名对应起来,这样我们给函数传值的时候就可以直接传数组或对象。
let arr = [1, 2, 3];
function f([x, y, z]) { ... }
f(arr);
let obj = {z: 3, y: 2, x: 1};
function f({x, y, z}) { ... }
f(obj);
4.
提取 JSON 数据
提取 JSON 对象中的数据,使用解构赋值会更简洁,省时省力
let jsonData = {
id: 1001,
status: "yes",
data: ['Joe', 23]
};
let { id, status, data} = jsonData;
5.遍历 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);
}
6.输入模块的指定方法
加载模块时,往往需要指定输入哪些方法。解构赋值使得输入语句非常清晰。
const { fun1, fun2 } = require("funs");
3、箭头函数
通过=>函数可以更简洁快速的定义一个函数
var fun = a => a;
// 等同于
var fun = function (a) {
return a;
};
如果箭头函数不需要传参或需要多个传参,就需要使用()括起来。
var fun = () => 1;
// 等同于
var fun = function () { return 1 };
var sum = (n1, n2) => n1 + n2;
// 等同于
var sum = function(n1, n2) {
return n1 + n2;
};
如果箭头函数的代码块部分多于一条语句,就要使用大括号将它们括起来,并使用return
语句返回。
var sum = (n1, n2) => { n1 += n2; return n1; }
但是由于大括号被解释为代码块,所以如果箭头函数直接返回一个对象,必须在对象外面加上括号,否则会报错。
let fun = id => { name: "ABC" };
// 报错
let fun = id => ({ name: "ABC" });
// 不报错
如果箭头函数只有一行语句,且不需要返回值,可以采用下面的写法,就不用写大括号了。
var fun = () => console.log(123);