JavaScript语言的解构(Destructuring)语法

可迭代对象解构是按位置的，而对象字面量解构是按命名的。

注意：解构语法是并行的。

1.可迭代对象解构

1.1用于变量赋值

let [变量名, 变量名 = 默认值, ...数组变量名] = 可迭代对象;

//字符串
let [a, b] = "12";
console.log(a, b);  // 1 2

//数组
//左侧数量等于右侧数量
let [a, b] = [1, 2];
console.log(a, b);  // 1 2

//左侧数量小于右侧数量
//右侧多余的元素会被忽略
let [a, b] = [1, 2, 3];
console.log(a, b);  // 1 2
//右侧多余的元素会被打包成数组字面量
let [a, b, ...rest] = [1, 2, 3, 4, 5];
console.log(a, b, rest);  // 1 2 [3, 4, 5]

//左侧数量大于右侧数量
//左侧多余的变量会被赋予undefined值
let [a, b, c] = [1, 2];
console.log(a, b, c);  // 1 2 undefined
//左侧多余的变量会被赋予默认值
let [a, b, c = 3] = [1, 2];
console.log(a, b, c);  // 1 2 3

//给已声明的变量赋值时，不需要在赋值表达式左侧添加let关键字。
let a, b;
[a, b] = [1, 2];
console.log(a, b);  // 1 2

//映射
let [a, b] = new Map([[1, "one"], [2, "two"]]);
console.log(a, b);  // [1, "one"] [2, "two"]

//集合
let [a, b] = new Set([1, 2]);
console.log(a, b);  // 1 2

左侧的变量还支持占位语法。

注意：左侧不是稀疏数组语法，是占位语法。

//左侧数量等于右侧数量
let [a, ] = [1, 2];
console.log(a);  // 1

//左侧数量小于右侧数量
let [a, ] = [1, 2, 3];
console.log(a);  // 1

//左侧数量大于右侧数量
let [a, ] = [1];
console.log(a);  // 1

1.2用于函数形参

具体参考“用于变量赋值”章节。

function f([a, b]) {
  console.log(a, b);
}

f([1, 2]);  // 1 2

2.对象字面量解构

2.1用于变量赋值

let { 属性名: 变量名, 属性名, 属性名: 变量名 = 默认值, 属性名 = 默认值, ...对象字面量变量名 } = 对象字面量;

//左侧数量等于右侧数量
//属性名与变量名不相同(前面a是右侧对象字面量内的属性名，后面x是变量名)
let { a: x, b: y } = { a: 1, b: 2 };
console.log(x, y);  // 1 2
//属性名与变量名相同(前面a是右侧对象字面量内的属性名，后面a是变量名)
let { a: a, b: b } = { a: 1, b: 2 };
//简写
let { a, b } = { a: 1, b: 2 };
console.log(a, b);  // 1 2

//左侧数量小于右侧数量
//右侧多余的属性会被忽略
let { a, b } = { a: 1, b: 2, c: 3 };
console.log(a, b);  // 1 2
//右侧多余的属性会被打包成对象字面量
let { a, b, ...rest } = { a: 1, b: 2, c: 3, d: 4, e: 5 };
console.log(a, b, rest);  // 1 2 { c: 3, d: 4, e: 5 }

//左侧数量大于右侧数量
//左侧多余的变量会被赋予undefined值
let { a, b, c } = { a: 1, b: 2 };
console.log(a, b, c);  // 1 2 undefined
//左侧多余的变量会被赋予默认值
let { a, b, c = 3 } = { a: 1, b: 2 };
console.log(a, b, c);  // 1 2 3

//给已声明的变量赋值时，不需要在赋值表达式左侧添加let关键字，但赋值表达式必须被包裹在分组运算符()内。
let a, b;
({ a, b } = { a: 1, b: 2 });
console.log(a, b);  // 1 2

2.2用于函数形参

具体参考“用于变量赋值”章节。

function f({ a, b }) {
  console.log(a, b);
}

f({ a: 1, b: 2 });  // 1 2