web前端之ES6的实用深度解构赋值方法、复杂的解构赋值

MENU

• 前言
• 解构对象
• 解构数组
• 解构混用

前言

解构对象

基本解构格式

变量别名

变量默认值

解构数组

数组基础解构用法

选择解构

扩展运算符

默认值

交换变量值

let name1 = "张三";
let name2 = "李四";

[name2, name1] = [name1, name2];

// 李四 张三
console.log(name1, name2);

解构混用

传统型

let result = person.works.music[1];

// 鸡你太美
console.log(result);

浅层解构

let { works } = person;

// 鸡你太美
console.log(works.music[1]);

连续解构

let { works: { music } } = person;

// 鸡你太美
console.log(music[1]);

数组与对象混用

let { works: { music: [, result] } } = person;

// 鸡你太美
console.log(result);

解构+别名

let { works: { music: [, result], movies: newMov } } = person;

// 鸡你太美 ["童话二分之一", "鬼畜区常青树"]
console.log(result, newMov);