变量的解构赋值
数组的解构赋值
基本用法
以前,为变量赋值,只能直接指定值。
let a = 1;
let b = 2;
let c = 3;
上面代码表示,可以从数组中提取值,按照对应位置,对变量赋值。
如果解构不成功,变量的值就等于
undefined。
let [foo] = [];
let [bar, foo] = [1];
另一种情况是不完全解构,即等号左边的模式,只匹配一部分的等号右边的数组。这种情况下,解构依然可以成功。
let [x, y] = [1, 2, 3];
x // 1
y // 2
let [a, [b], d] = [1, [2, 3], 4];
a // 1
b // 2
d // 4
如果等号的右边不是数组(或者严格地说,不是可遍历的结构,参见《Iterator》一章),那么将会报错。
// 报错
let [foo] = 1;
let [foo] = false;
let [foo] = NaN;
let [foo] = undefined;
let [foo] = null;
let [foo] = {};
对于 Set 结构,也可以使用数组的解构赋值。
let [x, y, z] = new Set(['a', 'b', 'c']);
x // "a"
上面代码中,
fibs是一个 Generator 函数(参见《Generator 函数》一章),原生具有 Iterator 接口。解构赋值会依次从这个接口获取值。
默认值
注意,ES6 内部使用严格相等运算符(
===),判断一个位置是否有值。所以,如果一个数组成员不严格等于
undefined,默认值是不会生效的。
let [x = 1] = [undefined];
x // 1
let [x = 1] = [null];
x // null
如果默认值是一个表达式,那么这个表达式是惰性求值的,即只有在用到的时候,才会求值。
function f() {
console.log('aaa');
}
let [x = f()] = [1];
默认值可以引用解构赋值的其他变量,但该变量必须已经声明。
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
解构不仅可以用于数组,还可以用于对象。
let { foo, bar } = { foo: "aaa", bar: "bbb" };
foo // "aaa"
bar // "bbb"
上面代码的第一个例子,等号左边的两个变量的次序,与等号右边两个同名属性的次序不一致,但是对取值完全没有影响。第二个例子的变量没有对应的同名属性,导致取不到值,最后等于
undefined。
这实际上说明,对象的解构赋值是下面形式的简写(参见《对象的扩展》一章)。
let { foo: foo, bar: bar } = { foo: "aaa", bar: "bbb" };
上面代码中,
foo是匹配的模式,
baz才是变量。真正被赋值的是变量
baz,而不是模式
foo。
上面代码中,解构赋值的变量都会重新声明,所以报错了。不过,因为
var命令允许重新声明,所以这个错误只会在使用
let和
const命令时出现。如果没有第二个
let命令,上面的代码就不会报错。
let foo;
({foo} = {foo: 1}); // 成功
let baz;
({bar: baz} = {bar: 1}); // 成功
和数组一样,解构也可以用于嵌套结构的对象。
let obj = {
p: [
'Hello',
{ y: 'World' }
]
};
let { p: [x, { y }] } = obj;
x // "Hello"
y // "World"
上面代码中,只有
line是变量,
loc和
start都是模式,不会被赋值。
对象的解构也可以指定默认值。
var {x = 3} = {};
x // 3
var {x, y = 5} = {x: 1};
x // 1
y // 5
var {x:y = 3} = {};
y // 3
var {x:y = 3} = {x: 5};
y // 5
var { message: msg = 'Something went wrong' } = {};
msg // "Something went wrong"
上面代码中,如果
x属性等于
null,就不严格相等于
undefined,导致默认值不会生效。
如果解构模式是嵌套的对象,而且子对象所在的父属性不存在,那么将会报错。
// 报错
let {foo: {bar}} = {baz: 'baz'};
如果要将一个已经声明的变量用于解构赋值,必须非常小心。
// 错误的写法
let x;
{x} = {x: 1};
// SyntaxError: syntax error
上面代码将整个解构赋值语句,放在一个圆括号里面,就可以正确执行。关于圆括号与解构赋值的关系,参见下文。
上面的表达式虽然毫无意义,但是语法是合法的,可以执行。
上面代码将
Math对象的对数、正弦、余弦三个方法,赋值到对应的变量上,使用起来就会方便很多。
上面代码对数组进行对象解构。数组
arr的
0键对应的值是
1,
[arr.length - 1]就是
2键,对应的值是
3。方括号这种写法,属于“属性名表达式”,参见《对象的扩展》一章。
字符串的解构赋值
类似数组的对象都有一个
length属性,因此还可以对这个属性解构赋值。
let {length : len} = 'hello'; len // 5
数值和布尔值的解构赋值
上面代码中,数值和布尔值的包装对象都有
toString属性,因此变量
s都能取到值。
函数的参数也可以使用解构赋值。
function add([x, y]){ return x + y; } add([1, 2]); // 3
下面是另一个例子。
[[1, 2], [3, 4]].map(([a, b]) => a + b); // [ 3, 7 ]
上面代码中,函数
move的参数是一个对象,通过对这个对象进行解构,得到变量
x和
y的值。如果解构失败,
x和
y等于默认值。
上面代码是为函数
move的参数指定默认值,而不是为变量
x和
y指定默认值,所以会得到与前一种写法不同的结果。
解构赋值虽然很方便,但是解析起来并不容易。对于编译器来说,一个式子到底是模式,还是表达式,没有办法从一开始就知道,必须解析到(或解析不到)等号才能知道。
但是,这条规则实际上不那么容易辨别,处理起来相当麻烦。因此,建议只要有可能,就不要在模式中放置圆括号。
不能使用圆括号的情况
(1)变量声明语句中,不能带有圆括号。
// 全部报错 let [(a)] = [1]; let {x: (c)} = {}; let ({x: c}) = {}; let {(x: c)} = {}; let {(x): c} = {}; let { o: ({ p: p }) } = { o: { p: 2 } };
(2)函数参数中,模式不能带有圆括号。
(3)赋值语句中,不能将整个模式,或嵌套模式中的一层,放在圆括号之中。
// 全部报错 ({ p: a }) = { p: 42 }; ([a]) = [5];
上面代码将嵌套模式的一层,放在圆括号之中,导致报错。
可以使用圆括号的情况
上面三行语句都可以正确执行,因为首先它们都是赋值语句,而不是声明语句;其次它们的圆括号都不属于模式的一部分。第一行语句中,模式是取数组的第一个成员,跟圆括号无关;第二行语句中,模式是p,而不是d;第三行语句与第一行语句的性质一致。
用途
(1)交换变量的值
let x = 1; let y = 2; [x, y] = [y, x];
(2)从函数返回多个值
(3)函数参数的定义
(4)提取JSON数据
上面代码可以快速提取 JSON 数据的值。
指定参数的默认值,就避免了在函数体内部再写
var foo = config.foo || 'default foo';这样的语句。
任何部署了Iterator接口的对象,都可以用
for...of循环遍历。Map结构原生支持Iterator接口,配合变量的解构赋值,获取键名和键值就非常方便。
var 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
(7)输入模块的指定方法
[p]- 变量的解构赋值
- js-ES6学习笔记-变量的解构赋值
- 变量的解构赋值
- ECMAScript6变量的解构赋值实例详解
- ES6学习——变量的解构赋值
- ECMAScript 6笔记(let,const 和 变量的解构赋值)
- ES6新特性 let、const、变量对象的解构赋值
- 变量的解构赋值
- const命令,全局变量的属性,变量的解构赋值
- es6学习之变量的解构赋值
- 变量的解构赋值---函数参数的解构赋值
- ECMAScript 6 入门-变量的解构赋值
- ECMAScript6笔记:变量的解构赋值
- es6之变量的解构赋值
- ES 6 : 变量的解构赋值
- 自学-ES6篇-变量的解构赋值
- 变量的解构赋值---数组的解构赋值
- 变量的解构赋值---圆括号问题
- es6 变量的解构赋值
- 变量的解构赋值