解构

解构

数组的解构

• 可以用这种方式将数组中的每一项赋值给变量。

// 将三项都赋值给变量
const arr = [100, 200, 300];
const [foo, bar, baz] = arr;
console.log(foo, bar, baz);

// 只需要一项的值可以这样写
const arr = [100, 200, 300];
const [, , baz] = arr;
console.log(baz);

• 可以将某些项放到新数组中

//all是包含foo以后所有项的数组
const arr = [100, 200, 300];
const [foo,...all] = arr;
console.log(all);

• 如果变量名少于数组项，则会从前往后匹配，如果多与数组的项数，那么多出来的变量内容为undefined。

• 可以在匹配时给变量赋值，如果数组中没有对应的项，那么值为设置的值，如果有对应的，变量值为对应的数组项的值

const arr = [100, 200, 300];
const [foo, bar, baz = 500, more = 400] = arr;
console.log(foo, bar, baz, more);

对象解构

• 基本规则和数组解构相同

const obj = {
    name: "zs",
    age: 18
};
const { name } = obj;
//打印name的值为zs
console.log(name);

• 如果对象名和之前定义过的变量名相同，会产生冲突,提示变量名被占用，想要解构需要如下的方法

const obj = {
    name: "zs",
    age: 18
};
const name = "lx";
const { name: newName } = obj;
console.log(newName);
//也可以把log 解构出来，减少代码量
const {log} = console;
log(newName);