在正式的讲解之前,我们先来分析一下,到底什么是解构赋值? 通过对词组的分析,我们大致能理解,解构---也就是破坏,破坏原来的结构,赋值---当然就是再次赋值。下面我们来具体的分析一下,到底什么是解构赋值。
数组的解构赋值
1.基本用法
ES6允许按照一定模式从数组和对象中提取值,然后对变量进行赋值,这被称作解构(Destructuring)。 以前,为变量赋值只能直接指定值。
let a = 1;
let b = 2;
let c = 3;
ES6允许写成这样。
let [a,b,c] = [1,2,3]
上面的代码表示,可以从数组中提取值,按照对应的位置进行变量赋值。 本质上,这种写法属于“模式匹配”,只要等号两边的模式相同,左边的变量就会被赋予对应的值。下面是一些使用嵌套数组进行解构的例子。
let [foo, [[bar], baz]] = [1,[[2],3]];
foo //1 ;
bar //2 ;
baz //3 ;
let [ , , third] = ["foo", "bar", "baz"];
third //"baz"
let [x, , z] = [1,2,3];
x //1
z //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] = [1];
上面的foo取值都是会等于undefined. 另一种情况是不完全解构,即等号左边的模式只匹配一部分等号右边的数组,这种情况,解构依然可以成功。
let [x, y] = [1,2,3];
x //1;
y //2;
let [a, [b], c] = [1, [1,3], 4];
a //1
b //1
c //4
上面的例子属于不完全解构,但是可以成功。 如果等号的右边不是数组,严格来说是不可遍历的结构,那么将会报错。
let [foo] = 1;
let [foo] = false;
let [foo] = undefined;
let [foo] = NaN;
let [foo] = null;
let [foo] = {};
上面的语句会报错,因为等号右边的值或者是转换为对象以后不具备Iterator接口,或者本身就不具备Iterator接口。(最后一个表达式) 简单的介绍一下Iterator接口。 遍历器(Iterator)是一种接口,为各种不同的数据结构提供统一的访问机制,任何数据结构,只要部署Iterator接口,就可以完成遍历操作。 以下数据结构具备原生的Iterator接口。(可使用for...of方法进行循环遍历)
- Array
- Map
- Set
- String
- TypedArray
- 函数的arguments对象
- NodeList对象
2.Set与Map结构的解构赋值
let [x,y,z] = new Set(["a","b","c"]);
x// "a"
var map = new Map();
map.set("first","hello");
map.set("second","world");
for(let [key, value] of map){
console.log(key +" is " + value);
}
3.默认值
解构赋值允许指定默认值。
let [foo = true] = [];
foo //true
let [x,y = 'b'] = ['a'];
x //'a';
y //'b';
let [x, y = 'b'] = ['a', undefined];
x // 'a'
y // 'b'
ES6内部使用严格相等运算符(===)判断一个位置是否有值。所以,如果一个数组成员不严格等于undefined,默认值不会生效。
let [x = 1] = [undefined];
x // 1
let [x = 1] = [null];
x //null
上面的第二个例子没有取到默认值,是因为null不严格等于undefined。 而且,需要注意的是,默认值可以引用解构赋值的其他变量,但该变量必须已经声明。
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
最后一个报错,是因为,x用到默认值y时,y还没有声明。
对象的解构赋值
解构赋值不仅可以用于数组,还可以用于对象。
let {foo, bar} = {foo:"aaa", bar: "bbb"};
foo // "aaa"
bar // "bbb"
与数组的区别
对象的解构赋值与数组有一个重要的不同。数组的元素是按次序排列的,变量的取值是由它的位置决定的,而对象的属性没有次序,变量必须与属性同名才能取到正确的值
let {foo, bar} = {bar: "bbb", foo:"aaa"};
foo // "aaa"
bar // "bbb"
let {baz} = {bar: "bbb", foo:"aaa"};
baz //undefined
上面的代码就验证了,取值与次序无关。 第二个例子没有取到值,是因为变量没有对应的同名属性,导致取不到值,最后等于undefined。 如果变量与属性名不一致,必须要写成下面这样,
let {foo:baz} = {bar: "bbb", foo:"aaa"};
baz //"aaa"
let obj = {first: "hello", last: "world"};
let {firt: f, last: l} = obj;
f // "hello"
l // "world"
重点来了,实际上,对象的解构赋值是下面的简写
let {foo: foo, bar: bar} = {foo:"aaa", bar: "bbb"};
别名
也就是说,对象的解构赋值的内部机制是先找到同名属性,然后再赋值给对应的变量。真正被赋值的是后者,而不是前者。
let {foo:baz} = {bar: "bbb", foo:"aaa"};
baz //"aaa"
foo // foo is not defined
上面的代码中,***foo是匹配的模式,baz才是变量。真正被赋值的是变量baz,而不是模式foo。***
与数组一样,解构也可以用于对嵌套结构的对象。
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;
x // "hello"
y // "world"
p // p:['hello', {y: 'world'}]
另一个例子,
var node = {
loc:{
start : {
line: 1,
column: 5
}
}
};
var {loc, loc:{start}, loc:{start: {line}}} = node;
line // 1
loc // Object {start : Object }
start // Object {line: 1, column:5}
上面的代码有三次解构赋值,分别是对loc,start,line三个属性的解构赋值。需要注意的是,最后一次对line属性的解构赋值之中,只有line是变量,loc和start都是模式。
对象的变量赋值
如果将一个已声明的变量进行赋值时,一定要小心了!
//错误写法
let x
{x} = {x:1};
//syntaxError: syntax error
上面的代码会报错,因为JavaScript引擎会将{x}理解成一个代码块,从而发生预发错误。 只要不把{}写在首行,就会解决这个问题。
let {x} = {x:1};
//或者
let x;
({x} = {x:1})
//也可以
{(x) = {x:1}}
关于圆括号的使用,保证一个原则,不瞎用。 具体请参考阮一峰大神的es6标准,很全面!总结一下就是,
字符串的解构赋值
例子
const [a,b,c,d,e] = 'hello'
数字和布尔类型的解构赋值
解构赋值时,如果等号右边是数值和布尔值,则会先转为对象。
let {toString : s} = 123;
s === Number.prototype.toString //true
let {toString : s} = true;
s === Boolean.prototype.toString //true
上面的代码中,数字和布尔值的包装对象都有toString属性,因此变量s都能取到值。 解构赋值的规则是,只要等号右边的值不是对象或者数组,就先将其转为对象,由于undefined和null无法转换为对象,所以进行解构赋值时会报错。
用途
交换变量的值
//ES5
var t;
t = a;
a = b;
b = t;
//ES6
let x = 1;
let y = 2;
[x, y] = [y, x];
从函数返回多个值
函数只能返回一个值,如果要返回多个值,只能将他们放在数组或者对象中,有了解构赋值,取出这些值就很方便了。
//返回一个数组
function example() {
return [1,2,3,4]
}
let [a,b,c,d] = example();
//如果没有解构赋值,还得循环遍历,分别赋值。
//返回一个对象
function example() {
return {
foo: 1,
bar: 2
};
}
let {foo, bar} = example();
函数参数的定义
解构赋值可以方便地将一组参数与变量对应起来
//参数是一组有次序的值
function f([x,y,z]) {}
f([1,2,3])
//参数是一组有序的值
function f({x,y,z}) {}
f({x:1,z:2,x:3});
提取JSON中的数据
let jsonData = {
id:23,
state:"draft",
data:{
name:"hansheng",
age: 18
}
}
let {id,state,data:info} = jsonData;
// 23,"draft", {name:"hansheng",age: 18}
本文摘录自阮一峰ES6标准入门。