变量的解构赋值
es 6 允许按照一定的模式,从数组和对象中提取值,然后对变量进行赋值,这被称之为解构;
一.数组的解构赋值
最基本写法:
let [a, b, c] = [1, 2, 3];
a // 1
b // 2
c // 3
更多的写法:
//---------- 完全解构成功
let [foo, [[bar], baz]] = [1, [[2], 3]];
foo // 1
bar // 2
baz // 3let [ , , third] = ["foo", "bar", "baz"];
third // "baz"let [x, , y] = [1, 2, 3];
x // 1
y // 3let [head, ...tail] = [1, 2, 3, 4];
head // 1
tail // [2, 3, 4]let [x, y, ...z] = ['a'];
x // "a"
y // undefined
z // []//---------- 不完全解构,但成功
let [x, y] = [1, 2, 3];
x // 1
y // 2let [a, [b], d] = [1, [2, 3], 4];
a // 1
b // 2
d // 4//---------- 解构失败
let [foo] = [];
let [bar, foo] = [1];
foo // undefined//---------- 报错,等号右边不是数组(或者严格说,不是可遍历的结构)
let [foo] = 1;
let [foo] = false;
let [foo] = NaN;
let [foo] = undefined;
let [foo] = null;
let [foo] = {};
二、对象的解构赋值
1.标准写法:
let { foo: aoo, bar: boo } = { foo: "aaa", bar: "bbb" };
简写:
let { foo, bar } = { foo: "aaa", bar: "bbb" };
foo // "aaa"
bar // "bbb"
注意: 对象的结构不需要像数组那样注重顺序,只需要注意保证变量(等号左边)名与对象属性(等号右边)名相同即可;
2.如果变量名和属性名不一致,必须写成下面的格式:(注意变量声明时的顺序以及使用的符号)
let { foo: css } = { foo: 'aaa', bar: 'bbb' };
css// "aaa"let obj = { first: 'hello', last: 'world' };
let { first: f, last: l } = obj;
f // 'hello'
l // 'world'
3.对象的嵌套解构
let obj = {
p: [
'Hello',
{ y: 'World' }
]
};
let { p: [x, { y }] } = obj; x // "Hello"
y // "World"
我承认,一开始是看不懂的。
let 花括号中的 p 是模式,不是变量,同理,标准写法中也是这个原理;如果想要 p 作为变量进行赋值,可以写成:
let { p, p: [x, { y }] } = obj;
x // "Hello"
y // "World"
p // ["Hello", {y: "World"}]
下面这个例子,看看能不能写出结果:
const node = {
loc: {
start: {
line: 1,
column: 5
}
}
};let { loc, loc: { start }, loc: { start: { line }} } = node;line ?
loc ?
start ?
答案如下:
line // 1
loc // Object {start: Object}
start // Object {line: 1, column: 5}// 上面的代码有三次解构赋值,分别是对 loc、 start、 line 三个属性的解构赋值;
// 最后一次对 line 属性的解构赋值之中,只有 line 是变量, loc 和 start 都是模式,不是变量;
还有一些符合规则但应用很少的情况就不列举,详情请移步:字符串的解构赋值-阮一峰 ;
三、关于以上两种解构的默认值
数组解构的默认值:
let [foo = true] = [];
foo // truelet [x, y = 'b'] = ['a'];
// x='a', y='b'let [x, y = 'b'] = ['a', undefined];
// x='a', y='b'
es 6 的内部使用严格相等运算符(===),判断一个位置是否有值。只有严格等于 undefined,默认值才会生效。
let [x = 1] = [undefined];
x // 1let [x = 1] = [null];
x // null
对象解构的默认值:
var {x = 3} = {};
x // 3var {x, y = 5} = {x: 1};
x // 1
y // 5var {x: y = 3} = {};
y // 3var {x: y = 3} = {x: 5};
y // 5var { message: msg = 'Something went wrong' } = {};
msg // "Something went wrong"
同样遵守严格相等的模式:
var {x = 3} = {x: undefined};
x // 3var {x = 3} = {x: null};
x // null
四、字符串的解构赋值
const [a, b, c, d, e] = 'hello';
a // "h"
b // "e"
c // "l"
d // "l"
e // "o"
上例中,在解构时,字符串被转换成了一个类似数组的对象。
这个类似数组的对象都有一个 length 属性,可以直接对这个属性解构赋值:
let {length : len} = 'hello';
len // 5
五、数值和布尔值的解构赋值
解构赋值时,如果等号右边的数值和布尔值,则会先转成对象:
let {toString: s} = 123;
s === Number.prototype.toString // truelet {toString: s} = true;
s === Boolean.prototype.toString // true
上例中,数值和布尔值的包装对象都有 toString 属性,因此变量 s 都能取到值。
解构赋值的规则(实质)是:只要等号右边的值不是对象或者数组,就先将其转化成对象。而由于 undefined 和 null 无法转成对象,故对他们的解构赋值都会报错。
let { prop: x } = undefined; // TypeError
let { prop: y } = null; // TypeError
六、函数参数的解构赋值
函数的参数也可以使用解构赋值。
// 1.
function add([x, y]){
return x + y;
}add([1, 2]); // 3// 2.
[[1, 2], [3, 4]].map(([a, b]) => a + b);
// [ 3, 7 ]//3.
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]