1、数组的解构赋值
基本语法
ES6允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构。
下面是一些使用嵌套数组进行解构的例子:
let [foo,[[bar],baz]] = [1,[[2],3]];
foo; //1
bar; //2
baz; //3
let [ , , third] = [1,2,3];
third; //3
let [x, , y] = [1,2,3];
x; //1
y; //3
let [head, ...tail] = [1,2,3,4];
head; //1
tail; //[2,3,4]
let [x, y, ...z] = ['a'];
x; //'a'
y; //undefined
z; //[]
如果解构不成功,变量的值就等于undefined。
let [foo] = [];
let [bar, foo] = [];
以上两种情况foo的值都是undefined。
另一种情况是不完全解构,即等号左边的模式,只匹配一部分的等号右边的数组。这种情况下,解构仍能成功。
let [x,y] = [1,2,3];
x; //1
y; //2
let [a,[b],d] = [1,[2,3],4];
a; //1
b; //2
d; //4
如果等号的右边不是数组(或者严格地说,不是可遍历的结构),会报错。
对于Set结构,也可以使用数组的解构赋值。
let [x,y,z] = new Set([1,2,3]);
x; //1
y; //2
z; //3
默认值
解构赋值允许指定默认值。
let [a = true] = [];
a; //true
let [x,y = 'b'] = ['a',undefined];
x; //'a'
y; //'b'
ES6内部使用严格相等运算符(===),判断一个位置是否有值。所以,只有当一个数组成员严格等于undefined,默认值才会生效。
let [x = 1] = [undefined];
x; //1
let [y = 1] = [null];
y; //null
上面代码中,如果一个数组成员是null,默认值就不会生效,因为null不严格等于undefined。
如果默认值是一个表达式,那么这个表达式是惰性求值的,即只有在用到的时候,才会求值。
function f(){
console.log('aaa');
}
let[x = f()] = [1];
x; //1
上面代码中,因为x能取到值,所以函数f不会执行。等价于下面代码:
let x;
if([1][0] === undefined){
x = f();
}else {
x = [1][0];
}
2、对象的解构赋值
解构不仅可以用于数组,还可以用于对象。
数组的元素是按次序排列的,变量的取值由它的位置决定;而对象的属性没有次序,变量必须与属性同名,才能取到正确的值。
let{x,y} = {x:"aaa",y:"bbb"};
x; //"aaa"
y; //"bbb"
let{z} = {x:"aaa",y:"bbb"};
z; //undefined
如果变量名与属性名不一致,必须写成下面这样。
let {ooo:ppp} = {ooo:111,ppp:222};
ooo; //报错
ppp; //111
let obj = {first : 'hello', last: 'world'};
let {first:f, last:l} = obj;
f; //'hello'
l; //'world'
这实际上说说明,对象的解构赋值是下面形式的简写。
let {foo: foo, bar: bar} = {foo: "aaa",bar: "bbb"};
也就是说,对象的解构赋值的内部机制,是先找到同名属性,然后再赋给对应的变量。真正被赋值的是后者,而不是前者。
let obj = {
p: [
'Hello',
{y:'World'}
]
};
let {p: [x,{y}]} = obj;
x; //"Hello"
y: //"World"
此时p是模式,不是变量,因此不会被赋值。如果p也要作为变量赋值,可写成下面这样。
let obj = {
p: [
'Hello',
{y:'World'}
]
};
let {p, p:[x,{y}]} = obj;
p; //["Hello",{y: "World"}]
x; //"Hello"
y; //"World"
对象解构赋值的默认值同数组解构赋值。
若将一个已经声明的变量用于解构赋值,必须非常小心。
let x;
{x} = {x:1}; //报错
上面代码会报错,因为js引擎会将{x}理解成一个代码块,从而发生语法错。
let a;
({a} == {a: 1});
a; //1
3、字符串的解构赋值
字符串也可以解构赋值。因为字符串被转换成了一个类似数组的对象。
const [a1,b1,c1,d1,e1,f1] = "hello";
a1; //"h"
b1; //"e"
c1; //"l"
d1; //"l"
e1; //"o"
f1; //undefined
类似数组的对象都有一个length属性,因此还可以对这个属性解构赋值。
let {length : len} = 'hello';
len; //5
4、数值和布尔值的解构赋值
解构赋值时,如果等号右边是数值和布尔值,则会先转为对象。
let {toString: s} = 123;
s === Number.prototype.toString; //true
let {toString: s} = true;
s === Boolean.prototype.toString; //true
解构赋值的规则是,只要等号右边的值不是对象或数组,就先将其转为对象。由于undefined和null无法转为对象,所以对它们进行解构赋值,会报错。
5、函数参数的解构赋值
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
的参数是一个对象,通过对这个对象进行解构,得到变量x和y
的值。如果解构失败,x和y
等于默认值。
下面这种写法会得到不一样的结果。
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]
上面代码是为move的参数指定默认值,而不是为变量x和y指定默认值。
undefined就会触发函数参数的默认值。
[1,undefined,3].map((x = 'yes') => x);
// [1, "yes", 3]
6、用途
(1)可用于交换变量的值。
let x = 1;
let y = 2;
[x, y] = [y, x];
x; //2
y; //1
function example(){
return [1,2,3];
}
let [a,b,c] = example();
[a,b,c]; //[1,2,3]
function example(){
return {
foo:1,
bar:2
}
}
let {foo,bar} = example()
foo //1
bar //2
(3)函数参数的定义
解构赋值可以方便地将一组参数与变量名对应起来
//参数是一组有序的值
function f([x,y,z]) { ... }
f([1,2,3])
//参数是一组无序的值
function f({x,y,z}) { ... }
f({z: 3, y: 2, x: 1})
(4) 提取JSON数据
解构赋值对提取JSON对象中的数据,尤其有用
let jsonData = {
id: 42,
status: "OK",
data: [867, 5309]
};
let { id, status, data: number } = jsonData;
console.log(id, status, number); // 42 "OK" (2) [867, 5309]
(5)函数参数的默认值
jQuery.ajax = function (url, {
async = true,
beforeSend = function () {},
cache = true,
complete = function () {},
crossDomain = false,
global = true,
// ...
} = {}) {
// ...
};
(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')