es6解构赋值

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/just4you/article/details/79288216
将数组元素赋值给若干变量
老办法：依次取出并赋值

let arr = [1,2,3];

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

新方法：解构赋值
let arr = [1,2,3];
let [a,b,c] = arr;
console.log(a,b,c);
 

 

解构赋值规则
规则一：等号左右两侧的结构必须相同
简单例子

数组

let [a,b] = [1,2];//左右两侧都是数组，
console.log(a,b);

let [c,d] = [{"a":5},5];//左右两侧都是数组，
console.log(c,d);

let [e,f] = [1,2,3,4];//都是数组，但是数组中元素个数不同，没有问题
console.log(e,f);//e,f分别赋值为1，2

JSON

let {a,b} = {a:3,b:4};//注意，左边的变量命名必须与右边json中的key对应
console.log(a,b);

/*
let {a,b} = {c:3,d:4};//注意，左边的变量命名必须与右边json中的key对应
console.log(a,b);//打印undefined,变量名称与json中key没有对应
*/

let {c,b,a} = {b:4,a:3,c:'ccc'};//对json进行结构赋值时，与变量顺序无关，注意左边和右边a,b,c的顺序
console.log(a,b,c);

复杂的例子
随意拆解，只要结构相同就可以

let arr = [{a:3,b:5},[12,99,48],83.3,'str'];

拆解为：

let [{a,b},[n1,n2,n3],num,str] = arr;
console.log(a,b,n1,n2,n3,num,str);

拆解为：

let [json,[n1,n2,n3],num,str] = arr;
console.log(json,n1,n2,n3,num,str);

拆解为：

let [json,nums,num,str] = arr;
console.log(json,nums,num,str);

拆解为：

let [{a,b},nums,num,str] = arr;
console.log(a,b,nums,num,str);

PS:这个貌似不行

let a,b = 1,2;//貌似在python中看到过这种用法:(，但是这里不行
console.log(a,b);

规则二：等号右侧必须是一个合法的表达式
let {a,b}={1,2};//右边不是一个合法的表达式，既不是json对象，又不是数组

规则三：必须在一句话中完成变量的定义和赋值
let arr = [{a:3,b:5},[12,99,48],83.3,'str'];
let [{a,b},[n1,n2,n3],num,str] = arr;//在一句话中完成了变量的声明和赋值
console.log(a,b,n1,n2,n3,num,str);

这样不行

let [a,b]; //只定义变量，在下一句中赋值。
//报错：Uncaught SyntaxError: Missing initializer in destructuring declaration
[a,b]= [1,2];//变量声明和赋值不在一句话中

参考：
根据开课吧《ECMAScript6.0》视频教程整理。
————————————————
版权声明：本文为CSDN博主「just4you」的原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/just4you/article/details/79288216