ES6允许按照一定规则,从对象、数组、字符串等等类型中匹配对应的值并赋值给新的属性,称为解构(Destructuring)。例如:

/* 普通对象的解构 */
const { a, b, c } = { a: 1, b: 2, c: 3 }; // 1 2 3

/* 对于对象,解构赋值是根据KEY来匹配的,没有顺序区分 */
const { a, b, c } = { c: 1, b: 2, a: 3 }; // 3 2 1

/* 对于数组,则是按对应顺序提取值 */
const [a, b, c] = [1, 2, 3]; // 1 2 3
const [a, , b, c] = [1, 2, 3, 4]; // 1 3 4
const [a, [b], c] = [1, [21, 22, 23], 3]; // 1 21 3
const [x, y, z] = [1, [21, 22], 3]; // 1 [ 21, 22 ] 3

/* 对于字符串类型的解构,会先转为类似于字符数组类的对象,再进行解构 */
const [a, b, c, d, e] = 'hello'; // h e l l o
const { length } = 'hello'; // 5

/* 对于数值或是布尔类型的解构,其实会先转为对象,再进行对象的解构,例如 */
const { toString: n } = 123;
n === Number.prototype.toString; // true
const { toString: b } = true;
b === Boolean.prototype.toString; // true

对于解构,如果右侧的不是对象或是数组,则会转为对象,再进行对象的解构,如果无法转为对象,则会报错,例如nullundefined则会报错,如果是数组类型的解构(左侧是[]),若是右侧不能转为可遍历的解构,也会直接报错,例如:

/* 以下会报错 */
const [abc] = 1;
const [abc] = false;
const [abc] = NaN;
const [abc] = undefined;
const [abc] = null;
const [abc] = {};
const { abc } = null;
const { abc } = undefined;

/* 以下不会报错 */
const { abc } = 1;
const { abc } = false;
const { abc } = {};


设置默认值

如果解构失败,自动赋与属性默认值的语法为:属性后面加上等号就行

const { a, d = 4 } = { c: 1, b: 2, a: 3 }; // 3 4

但是请注意,只有undefined才会赋值默认值,如果是null0空字符串都不会赋予默认值!!!

const { x = 123 } = { x: null } // null


重命名

很多时候,会出现命名重复的情况,因此解构也是支持重命名的,使用英文冒号+新名字即可

const { x: y = 123 } = { x: null } // y = null

上面的代码,x是未定义的,只有y


函数参数的解构

用法同上,没有什么区别

function fn(...args) {
    console.log(args); // [ 1, 2, 3 ]
}

fn(1, 2, 3);
function fn({ x, ...args }) {
    console.log(x); // 100
    console.log(args); // { y: 102, z: 104 }
}

fn({ x: 100, y: 102, z: 104 });