展开讲讲ES6解构

一、什么是解构

ES6允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构（Destructuring）

解构赋值能够正常执行的前提为：赋值符号 的 左侧 与 右侧 的数据类型及数据结构必须一致！

解构赋值 赋值符号的左侧一定是变量名称(定义变量)  赋值符号的右侧一定是值(数据)

let a = 1;
let b = 2;
let c = 3;

let [a, b, c] = [100, 200, 300];
console.log(a); // 100
console.log(b); // 200
console.log(c); // 300

二、数组的解构赋值

// 1、
let [a, b, c] = [100, 200, 300];
console.log(a, b, c); // 100 200 300

// 2、
let [e, f] = [400, 500, 600];
console.log(e, f); // 400  500

// 3、
let [g, , h] = [700, 800, 900];
console.log(g, h); // 700  900

// 4、
let [a1, b1, c1, d1] = [11, 22, 33];
console.log(a1, b1, c1, d1); // 11 22 33 undefined

// 5、
let [a2 = 10, b2 = 10, c2 = 20] = [111, 222];
console.log(a2, b2, c2); // 111 222 20

数组解构使用的是数组字面量形式

且解构操作全部在数组内完成

以上实例

1. 为完全解构(赋值符号右侧的数据个数与左侧的数据个数 一致/相等)

2. 为赋值符号右侧的数据个数 大于 左侧的数据个数：左侧为连续的数据

3. 为赋值符号右侧的数据个数 大于 左侧的数据个数：左侧为不连续的数据

4. 为赋值符号右侧的数据个数 小于 左侧的数据个数

5. 为解构的默认值设置：使用默认值的时机： 如果赋的值为 "===" undefined ,默认会取用默认值

数组中的剩余运算符（不定参数）

剩余运算符（不定参数）: 可以接受剩下的未被使用到的数据

函数具有不定参数，而在数组解构语法中有一个相似的概念——不定元素

在数组中，可以通过…语法将数组中的其余元素赋值给一个特定的变量

let [a, b, ...rest] = [1, 2, 3, 4, 5, 6, 7, 8]
console.log(a, b);
console.log(rest); // [3,4,5,6,7,8]

剩余运算符语法有助于从数组中提取特定元素并保证其余元素可用

剩余运算符必须/只能出现在最后一个位置

let [a, b, ...rest, d] = [1, 2, 3, 4, 5, 6, 7, 8];
console.log(a, b); // 1   3
console.log(rest); // [5,6,7,8];

以上实例是错误样式，...rest没有出现在最后一个位置，所以会报错，注意，剩余运算符必须/只能出现在最后一个位置！！！

三、对象的解构

对象的解构，主要解析的是 key是否一致

简单的对象解构

let { a: num1, b: num2 } = { a: 1, b: 2 };
// num1 === 1   num2 === 2
console.log(num1, num2);

注意：
1.一定要用一对小括号包裹解构赋值语句，JS引擎将一对开放的花括号视为一个代码块。。
2.语法规定，代码块语句不允许出现在赋值语句左侧，添加小括号后可以将块语句转化为一个表达式，从而实现整个解构赋值过程。
3.解构赋值表达式(也就是等号（=）右侧的表达式)如果为null或undefined会导致程序抛出错误。
4.也就是说，任何尝试读取null或undefined的属性的行为都会触发运行时错误

PS: 对象在ES6中可以简写，如果key与value完全一致，可以直接简写为一个标识

let { a, b } = { a: 300, b: 400 };
console.log(a, b); // 300 400

对象解构赋值时 赋值符号 右侧  大于 左侧

let { a, c } = { a: 11, b: 22, c: 33, d: 44 };
console.log(a, c); // 11  33

对象解构赋值时 赋值符号 右侧  小于 左侧

let { e, f } = { e: 66 };
console.log(e, f); // 66  undefined

对象解构赋值时 赋值符号 右侧 的key  与 左侧 的key 不完全一致

let { y, x, p } = { x: 99, y: 100, z: 101 };
console.log(y, x, p); // 100  99  undefined

对象解构的默认值

如果使用简写形式，默认值直接赋值即可；如果使用key:value 形式，默认值写在value上

let { a, b, c = 1000, d: d = 2000 } = { a: 12, b: 34 };
a == 12   b == 34   c==1000   d===2000
console.log(a, b, c, d);

对象中的剩余运算符

let { a, b, ...rest } = { a: 1, b: 2, c: 3, d: 4, e: 5 };
console.log(a, b); // 1 2
console.log(rest); // {c: 3, d: 4, e: 5}

嵌套对象解构

解构嵌套对象仍然与对象字面量的语法相似，可以将对象拆解以获取想要的信息

const info = {
    name: 'cao yuan',
    age: 666,
    child: {
        cInfo: {
            name: 'cao yuan child',
            age: 3,
        }
    }
};
let { child: { cInfo } } = info;
console.log(cInfo.name); // "cao yuan child"
console.log(cInfo.age); // 3

1.在这个示例中，我们在解构模式中使用了花括号，其含义为在找到info对象中的child属性后，应当深入一层继续查找cInfo属性。
2.在上面的解构示例中，，所有冒号前的标识符都代表在对象中的检索位置，其右侧为被赋值的变量名；
3.如果冒号后是花括号，则意味着要赋予的最终值嵌套在对象内部更深的层级中。
4.同样的，也可以使用一个与对象属性名不同的局部变量名。

四、解构的应用场景

1. 解构官方已经封装好的对象/模块 Math

let { round, max } = Math;
console.log(Math.round(12.34), round(12.34)); // 12 12
console.log(Math.max(1, 2, 3, 4), max(4, 5, 66)); // 4 66

2、函数参数   数组/对象

function func1([a, b, c]) {
    console.log(a, b, c); // [100,200,300]    2    3
    a[0] = "abc";
    console.log(a, b, c); // [abc,200,300]    2    3
}

let arr = [[100, 200, 300], 2, 3];
console.log(arr); // [[100,200,300],2,3]

func1(arr); // func1([1,2,3])
console.log(arr); // [[abc,200,300],2,3]

3. 交换数据

let a = 10;
let b = 20;
b = 10 
a = 20
let c;
c = a; // c = 10
a = b; // a = 20
b = c; // b = 10
[b, a] = [a, b];
console.log(b, a); // 10 20

4、解构可以解构原型上的内容

let { push, pop } = [];
console.log(push);

Object.prototype.sex = 100;

let obj = {};

let { sex: aaa } = obj;
console.log(aaa);

5、解构赋值对提取 JSON 对象中的数据，尤其有用

let jsonData = {
  id: 42,
  status: "OK",
  data: [867, 5309]
};

let { id, status, data: number } = jsonData;

console.log(id, status, number); // 42, "OK", [867, 5309]

ES6的解构介绍到这儿就全部结束了，希望能够对大家有些许帮助。