解构赋值（es6）详解

解构赋值：从右侧的值（对象或数组）中提取（解构）出一个或多个值，保存到左侧列出的变量中。

应用场景：（1）变量声明中初始化变量；（2）赋值表达式中（给以生命的变量赋值）；（3）也可以在定义函数参数时使用。

demo1：解构数组

let [x, y] = [1, 2]; // 相当于x=1,y=2
console.log("x:", x, "y:", y); // =>x: 1 y: 2
[x, y] = [x + 1, y + 1]; // 相当于x=x+1,y=y+1
console.log("x:", x, "y:", y); // =>x: 2 y: 3
[x, y] = [y, x]; // 交换两个变量的值
console.log("x:", x, "y:", y); // =>x: 3 y: 2
console.log([x, y]); //=>[ 3, 2 ]

demo2：函数返回值中的解构

// 极坐标转换为笛卡尔坐标
function toCartesian(r, theta) {
  return [r * Math.cos(theta), r * Math.sin(theta)];
}
let [x, y] = toCartesian(Math.sqrt(2), Math.PI / 4); //=>[x, y]= [ 1, 1 ]
console.log([x, y]);

let o = { x: 1, y: 2 };
console.log(Object.entries(o)); // =>[ [ 'x', 1 ], [ 'y', 2 ] ]
for (const [key, value] of Object.entries(o)) {
  console.log(key, value);
} //=>x 1,y 2

解构赋值左侧变量个数和右侧数组中原书个数不一定相同。左侧多余的变量会被设置为undefined，右侧多余的值会被忽略。左侧变量列表可以包含额外的逗号，以跳过右侧的某些值：

let [x, y] = [1]; //=>x==1,y==undefined
[x, y] = [1, 2, 3];//=>x==1,y==2
[,x, y] = [1, 2, 3,4];//=>x==2,y==3

解构赋值时，所有未使用或剩余的值手机到一个变量中：

let [x, ...y] = [1, 2, 3,4]; //=>y==[ 2, 3, 4 ]

嵌套数组中的解构赋值：

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

数组解构不要求必须是数组！赋值的右侧可以是任何可以迭代对象，可以在for/of循环中使用的对象也可以被解构：

let [first, ...rest] = "Hello"; // first='H',rest=['e', 'l', 'l', 'o' ]

解构赋值在右侧是对象值的情况下也可以执行：

let obj = { r: 123, g: 465, b: 789 };
let { r, g, b } = obj;// r=123, g=465, b=789

上面对象解构的例子中，我们选择了与要解构对象一致的变量名。容易理解，当然了，解构赋值左侧的每个标识符都可以的是一个冒号分隔的标识符对，其中第一个标识符是要解构其值的属性名，第二个标识符是要把值赋给它的变量名：

let obj = { r: 123, g: 465, b: 789 };
let { r:R, g:G, b:B } = obj;// R=123, G=465, B=789

demo3:默认赋值的解构：

let { a, b, c = 0 } = { a: 3, b: 4 };
console.log({ a, b, c });//=>{ a: 3, b: 4, c: 0 }

let { a, b, c } = { a: 3, b: 4 };
console.log({ a, b, c }); //=>{ a: 3, b: 4, c: undefined }

let { a, b, c } = {};
console.log({ a, b, c }); //=>{ a: undefined, b: undefined, c: undefined }

demo4:嵌套对象、对象的数组、数组的对象解构：

let points = [
  { x: 1, y: 2 },
  { x: 3, y: 4 },
];
let [{ x: x1, y: y1 }, { x: x2, y: y2 }] = points;
// [x1, y1, x2, y2]=[ 1, 2, 3, 4 ]

demo5：理解复杂解构

let points = [{ x: 1, y: 2 },{ x: 3, y: 4 },];
let [{ x: x1, y: y1 }, { x: x2, y: y2 }] = points;
let points2=[{ x: x1, y: y1 }, { x: x2, y: y2 }];
console.log(points);//[ { x: 1, y: 2 }, { x: 3, y: 4 } ]
console.log(points2);//[ { x: 1, y: 2 }, { x: 3, y: 4 } ]