数组的解构赋值:
let [a, b, c] = [1, 2, 3];
let [a, [b], c] = [1, [2], 3];
let [,,a] = [1, 2, 3]; a=3
let [a, ...b] = [1, 2, 3, 4]; a=1 b=[2, 3, 4]
也就是说 , 只要关系是一一对应的,我们可以以任何形式进行数组的赋值。
当解构失败时 , 输出的值是undefined 。
let [a, b, ...c] = [1];
a => 1 ; b => undefined ; c = [];
不完全解构:左边变量数小于右面值的数量,一样的规则解析。不会报错。
如果右边不是数组(不是可遍历解构),报错。
let [foo] = 1;
let [foo] = false;
let [foo] = NaN;
let [foo] = undefined;
let [foo] = null;
let [foo] = {};
报错。
解构赋值对于 var let const 都适用。
解构赋值的默认值:
let [a , b = 1] = [2];
//a => 2 ,b => 1;
let [ x = fn() ] = [1];
//fn() 不会执行,会被赋值为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 = 1, y = x] = [null,false]
// x = null, y = false
let [x = y , y = 1] = [];
//ReferenceError
最后一个报错原因:x使用到y时,y还没有被定义。要先执行到 y = 1 才可以。
只有数组的值严格等于undefined,才会被赋予默认值,否则即使是null和false也会被正常赋值。
对象的解构赋值 :
var {a , b} = { a : '123' , b : '234'};
//a = 123 , b = 234
var {a , b} = { b : '234' , a : '123'};
//a = 123 , b = 234
也就是说,赋值看的是变量名相同,与顺序无关。
{a : demo } = { a : 1 };
//demo = 1
a只是一个匹配模式,不会被赋值。
let x ;
{ x } = {x : 1};
由于es6的块级作用域,{ }会被看成一个作用域,报错。我们需要加一个括号。
let x;
({ x } = { x : 1});
由于数组是特殊的对象, 所以:
var arr = [1, 2, 3];
var {0 : first, [arr.length - 1] : last} = arr;
first // 1
last // 3
字符串:
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 // true
let {toString: s} = true;
s === Boolean.prototype.toString // true
等号右边如果是null , undefined : 报错。
函数参数的解构赋值:
数组:
function add([x, y]){
return x + y;
}
add([1, 2]); // 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]
与下面的做一下对比
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]
两种写法在开始看来都有默认值,但是注意⚠️的是:在后面的写法中,是将参数的对象把默认的 { x : 0, y : 0} 给覆盖掉,使用时需要注意。
解构赋值的用途:
1、交换变量值:
[ x , y ] = [ y , x ];
2、函数可以有多个返回值,然后通过解构赋值赋值给其他变量。
3、提取json数据