ES6入门学习_变量的解构赋值

Posted 2021-06-08 shi_zi_183

数组的解构赋值

基本用法
ES6允许按照一定模式从数组和对象中提取值，然后对变量进行赋值，这被称为解构（destruction）。
以前，为变量赋值只能直接指定值

let a=1;
let b=2;
let c=3;

ES6允许写成下面这样

let [a,b,c]=[1,2,3];

上面的代码表示，可以从数组中提取值，按照对应位置对变量赋值。
本质上，这种写法属于模式匹配，只要等号两边的模式相同，左边的变量就会被赋予右边的值。
下面是一些使用嵌套数组进行解构的例子。

let [foo,[[bar],baz]]=[1,[[2],3]];
console.log(foo,bar,baz);

let [,,third]=["foo","bar","baz"];
console.log(third);

let [x,,y]=[1,2,3];
console.log(x,y);

let [head,...tail]=[1,2,3,4];
console.log(head,tail);

let [x1,y1,...z1]=['a'];
console.log(x1,y1,z1);

如果解构不成功，变量的值就等于undefined。
…变量结构不成功，变量的值就是空数组。
另一种情况是不完全解构，即等号左边的模式只匹配一部分的等号右边的数组。这种情况下，解构依然可以成功。

let [x,y]=[1,2,3];
console.log(x,y);

let [a,[b],c]=[1,[2,3],4];
console.log(a,b,c);

上面两个例子都属于不完全解构，但是可以成功。
如果等号右边不是数组（或者严格来说不是可遍历结构），那就会报错。

let [foo]=1;
let [foo]=false;
let [foo]=NaN;
let [foo]=undefined;
let [foo]=null;
let [foo]={};

上面的语句都会报错，因为等号右边的值或是转为对象以后不具备Iterator接口（前五个），或是本身就不具备Iterator接口。
对于Set结构，也可以使用数组的解构赋值

let [x,y,z]=new Set(['a','b','c']);
console.log(x,y,z);

事实上，只要某种数据结构具有Iterator接口，都可以采用数组形式的解构赋值。

function * fibs(){
	let a=0;
	let b=1;
	while(true){
		yield a;
		[a,b]=[b,a+b];
	}
}
let [first,second,third,fourth,fifth,sixth]=fibs();
console.log(first,second,third,fourth,fifth,sixth);

上面的代码中，fibs是一个Generator函数，原生具有Iterator接口。解构赋值会依次从这个接口中获取值。
默认值
解构赋值允许指定默认值。

let [foo = true] = [];
console.log(foo);//true

let [x,y='b']=['a'];
console.log(x,y);//a b

[x1,y1='b']=['a',undefined];
console.log(x1,y1);//a b

let [x=1]=[undefined];
console.log(x);

let [y=1]=[null];
console.log(y);

上面的代码中，如果一个数组成员是null，默认值就不会生效，因为null不严格等于undefined。
如果默认值是一个表达式，那么这个表达式是惰性求值的，即只有在用到时才会求值。

function f(){
	console.log('aaa');
}

let [x=f()]=[1];

上面的代码中，因为x能取到值，所以函数f根本不会执行。上面的代码其实等价于下面的代码。

let x;
if([1][0] === undefined){
	x=f();
}else{
	x=[1][0];
}

默认值可以引用解构赋值的其他变量，但该变量必须已经声明。

let [x=1,y=x]=[];//x=1;y=1
let [x=1,y=x]=[2]; //x=2;y=2;
let [x=1,y=2]=[1,2]; //x=1;y=2;
let [x=y,x=1]=[];//报错

上面最后一个表达式之所以会报错，是因为x用到默认值y时，y还没有声明。

对象的解构赋值

结构不仅可以用于数组，还可以用于对象。

let {foo,bar}={foo:'aaa',bar:'bbb'};
console.log(foo,bar);

对象的解构与数组有一个重要的不同。数组的元素是按次序排列的，变量的取值是由它的位置决定的；而对象的属性没有次序，变量必须与属性同名才能取到正确的值。

let {bar,foo}={foo:'aaa',bar:'bbb'};
console.log(bar,foo);

let {baz}={foo:'aaa',bar:'bbb'};
console.log(baz);

上面代码中第一个例子，等号左边的两个变量的次序与等号右边两个同名属性的次序不一致，但是对取值完全没影响。第二个例子的变量没有对应的同名属性，导致取不到值，最后等于undefined。
如果变量名与属性名不一致，必须写成下面这样。

var {foo:baz}={foo:'aaa',bar:'bbb'};
console.log(baz);

let obj={first:'hello',last:'world'};
let {first:f,last:l}=obj;
console.log(f,l)

实际上说明，对象的解构赋值是下面形式的简写

let {foo:foo,bar:bar}={foo:'aaa',baz:'bbb'};

也就是说，对象的解构赋值的内部机制是先找到同名属性，然后再赋值给对应的变量。真正被赋值的是后者，而不是前者。

let {foo:baz}={foo:'aaa',bar:'bbb'};
console.log(foo,baz);

上面的代码中，foo是匹配的模式，baz才是变量。真正被赋值的是变量baz，而不是模式foo。
在数组一样，解构也可以用于嵌套结构的对象。

let obj={
	p:[
		'hello',
		{y:'world'}
	]
};

let {p:[x,{y}]}=obj;
console.log(x,y);

注意这时p是模式，不是变量，因此不会被赋值。如果p也要作为变量赋值，可以写成下面这样

let obj={
	p:[
		'hello',
		{y:'world'}
	]
};

let {p,p:[x,{y}]}=obj;
console.log(x,y,p);

下面是嵌套赋值的例子。

let obj ={};
let arr=[];

({foo:obj.prop,bar:arr[0]}={foo:123,bar:true});
console.log(obj,arr);

对象的解构也可以指定默认值。
默认值生效的条件是，对象的属性值严格等于undefined。
（这里同上）

let {foo}={bar:'baz'};
console.log(foo);

如果属性等于null，不严格相等于undefined，导致默认值不会生效。
如果解构失败，变量的值等于undefined。

let {foo:{baz}}={baz:'baz'};

上面的代码中，等号左边对象的foo属性对应一个子对象。该子对象的bar属性在解构时会报错。原因很简单，因为foo此时等于undefined，再取子属性就会报错。
如果要将一个已经声明的变量用于解构赋值，必须非常小心。

let x;
{x}={x:1};

上面代码会报错因为javascript会把{x}视为一个代码块，从而发生语法错误。只有不将大括号写在行首，避免JavaScript将其视为代码块，才能解决这个问题。

let x;
({x}={x:1});

上面的代码将整个赋值语句放在一个圆括号中，这样就可以正确执行。
解构赋值允许等号左边的模式之中不放置任何变量名。

({}=[true,false]);
({}='abc');
({}=[]);

上面的表达式虽然没有意义，但是语法上是合法的，可以执行。
对象的解构赋值可以很方便地将现有对象地方法赋值到某个变量。

let {log,sin,cos}=Math;
console.log(log,sin,cos);

上面代码将Math对象地对数，正弦，余弦三个方法赋值到对应地变量上，使用起来就会方便很多。
由于数组本质是特殊地对象，因此可以对数组进行对象属性地解构。

let arr=[1,2,3];
let {0:first,[arr.length-1]:last}=arr;
console.log(first,last);

上面地代码对数组进行对象解构。数组arr的0键对应的值是1，【arr.length-1】就是2键对应的值就是3。方括号这种写法属于“属性名表达式”。

字符串的解构赋值
字符串也可以解构赋值。这是因为此时字符串被转换成了一个类似数组的对象。

const [a,b,c,d,e] = 'hello';
console.log(a,b,c,d,e);

类似数组的对象都有一个length属性，因此还可以对这个属性进行赋值。

const {length : len} = 'hello';
console.log(len);

数值和布尔值的解构赋值
解构赋值时，如果等号右边是数值和布尔值，则会先转为对象。

let {toString : s} = 123;
console.log(s === Number.prototype.toString);

let {toString : s1} = true;
console.log(s1 === Boolean.prototype.toString);

解构赋值的规则是，只要等号右边的值不是对象或数组，就先将其转为对象。由于undefined和null无法转为对象，所以对他们进行解构赋值时会报错。

let {prop : s} = undefined;
let {prop : s1} = null;

函数参数的解构赋值

函数的参数也可以使用解构赋值

function add([x,y]){
    return x+y;
}
add([1,2]);

上面的代码中，函数add的参数表明上是一个数组，但在传入参数的那一刻，数组参数就被解构成变量x和y。对于函数内部的代码来说，他们能感受到的参数就是x和y。

console.log([[1,2],[3,4]].map(([a,b])=>a+b));

函数参数的解构也可以使用默认值。

function move({x=0,y=0}={}){
    return [x,y];
}
console.log(move({x:3,y:8}));
console.log(move({x:3}));
console.log(move({}));
console.log(move());

注意下面的写法会得到不一样的结果

function move({x,y}={x:0,y:0}){
    return [x,y];
}
console.log(move({x:3,y:8}));
console.log(move({x:3}));
console.log(move({}));
console.log(move());

上面的代码是为函数move的参数指定默认值，而不是为变量x和y指定默认值，所以会得到与前一种写法不同的结果。
undefined 就会触发函数参数的默认值。

console.log([1,undefined,2].map((x='yes')=>x));

圆括号问题

解构赋值虽然方便，但是解析起来并不容易。对于编译器来说，一个式子到底是模式还是表达式，没有办法从一开始就知道，必须解析到等号才能知道。
ES6规定只要有可能导致解构的歧义，就不得使用圆括号。
但是，这条规则实际上不那么容易辨别，处理起来相当麻烦。因此建议，只要有可能，就不要在模式中放置括号。
不能使用圆括号的情况
1、变量声明语句

let [(a)]=[1];

let {x:(c)}={};
let {(x:c)}={};
let ({x:c})={};
let {(x):c}={};

let {o:({p:p})}={o:{p:2}};

上面6个语句都会报错，因为他们都是变量声明语句，，模式不能使用圆括号。

2、函数参数
函数参数也属于变量声明，因此不能使用圆括号。

function f([(z)]){return z;}

function f([z,(x)]){return x;}

3、赋值语句的模式

({p:a})={p:42};
([a])=[5];

上面的代码将整个模式放在圆括号中，导致报错。

[({p:a}),{x:c}]=[{},{}];

可以使用圆括号的情况
可以使用圆括号的情况只有一种：赋值语句的非模式部分可以使用圆括号。

let b;
[(b)] = [3];

let d;
({p:(d)} = 以上是关于ES6入门学习_变量的解构赋值的主要内容，如果未能解决你的问题，请参考以下文章
 
 ES6入门之变量的解构赋值
 阮一峰老师的ES6入门：变量的解构赋值
 es6变量声明和解构赋值
 1.《ES6标准入门》(阮一峰)--3.变量的解构赋值
 《ES6标准入门》二变量的解构赋值
 ES6入门——变量的解构赋值