ES6 允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构(Destructuring)。
'use strict';
// 如果浏览器支持解构赋值就不会报错:
var [x, y, z] = ['hello', 'JavaScript', 'ES6'];
// x, y, z分别被赋值为数组对应元素:
console.log('x = ' + x + ', y = ' + y + ', z = ' + z);
//x = hello, y = JavaScript, z = ES6
注意,对数组元素进行解构赋值时,多个变量要用[...]
括起来,如果数组本身还有嵌套,嵌套层次和位置要保持一致,如果解构不成功,变量的值就等于undefined
。
let [foo, [[bar], baz]] = [1, [[2], 3]];
foo // 1
bar // 2
baz // 3
let [ , , third] = ["foo", "bar", "baz"];
third // "baz"
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 // []
下面情况属于解构不成功,foo
的值都会等于undefined
let [foo] = [];
let [bar, foo] = [1];
使用解构赋值对对象属性进行赋值时,如果对应的属性不存在,变量将被赋值为undefined
,这和引用一个不存在的属性获得undefined
是一致的
var person={
name:"ziqi",
passport:'ID_XIXI',
address:'广东'
}
let {name, passport:id} = person;
name //ziqi
id //ID_XIXI
passport //Uncaught ReferenceError: passport is not defined
注意: passport不是变量,而是为了让变量id获得passport属性:
解构赋值还可以使用默认值,这样就避免了不存在的属性返回undefined
的问题:
如果变量已经被声明了,再次赋值的时候,正确的写法也会报语法错误:
var x,y;
// 解构赋值:
{x, y} = { name: '小明', x: 100, y: 200};
console.log(x); //Uncaught SyntaxError: Unexpected token =
这是因为JavaScript引擎把{
开头的语句当作了块处理,于是=
不再合法。解决方法是用小括号括起来:
注意:如果等号的右边不是数组(或者严格地说,不是可遍历的结构),那么将会报错。
事实上,只要某种数据结构具有 Iterator 接口,都可以采用数组形式的解构赋值