ES6中的解构（模式匹配）

一、数组的解构

        1.1完全解构：

//数组的完全解构
let [a, b] = [1, 2]
console.log(a, b); //1,2 

        1.2不完全解构：

主要是两种情况：当没有匹配值时的不完全解构和带点嵌套形式的解构

//数组的不完全解构
let [a, b] = [1, 2, 3]
console.log(a, b); //1,2 当没有匹配的值时则为undefined
let [c, d, e] = [1, [2, 3], 4]
console.log(c, d, e); //1 [ 2, 3 ] 4
let [x, [y], z] = [1, [2, 3], 4]
console.log(x, y, z); //1 2 4 y只能解构到[]中的第一个值

        1.3默认值的解构

当给其中一个值设置了默认值并且在解构的过程中没有值给它匹配的话，默认值就会发挥作用。如果有值被匹配的话，默认值被覆盖。

//未设置默认值时
let [x, y, z] = [1, 2]
console.log(x, y, z); //1 2 undefined
//设置默认值时
let [c, d, e = 10] = [1, 2]
console.log(c, d, e); //1 2 10

特殊情况：默认值为函数时，函数没有返回值则为undefined，有返回值则以返回值作为默认值。

情况二：默认值为函数时
//默认值为函数时
function myFun1() {
    console.log('函数没有设置返回值时，返回值为undefined');
}
let [a, b, c = myFun1()] = [1, 2]
console.log(a, b, c); //1 2 undefined

function myFun2() {
    console.log('函数有返回值时，z的值为函数的返回值');
    return 0;
}
let [x, y, z = myFun2()] = [1, 2]
console.log(x, y, z); //1 2 0

        1.4扩展运算符的使用

//拓展运算符...
//用法：用在=左边，有聚合的作用
//      用在=右边，有拆分、剥离的作用
let [a, ...b] = [1, 2, 3]
console.log(a, b); //1 [2,3] b中使用了拓展运算符，所有后面的值全部聚合在b中
let arr = [1, 2, 3];
let [...c] = arr;
console.log(c); //[1,2,3]
console.log(c === arr); //false false表示在堆中重新开辟了内存空间，不是单纯的地址值的复制，而是深复制
let obj = { name: '张三', age: 12 };
let obj1 = {...obj, gender: '男' }
console.log(obj1); //{ name: '张三', age: 12, gender: '男' } ...在=右边表示剥离

二、对象的解构

        2.1对象的解构：

//对象解构，省略的是key值，保留的是value值
let { name, age } = { name: '张三', age: 12 }
console.log(name, age); //张三 12
//省略时简写的是key的值，输出时应该是使用username等变量名
let { name: username, age: userage } = { name: '张三', age: 12 }
console.log(username, userage); //张三 12

        2.2对象的不完全解构（嵌套解构）

//对象的嵌套解构
let obj = { p: ['Hello', { y: 'World' }] };
let { p: [a, { y: b }] } = obj
console.log(a, b); //Hello World 属性名要对应

        2.3设置对象的默认值

给对象设置默认值与数组方法作用一致，在未完全解构的情况下，使用默认值。完全解构则覆盖

//对象解构-设置默认值
let { name, age, gender = 'male' } = { name: '张三', age: 12 }
console.log(name, age, gender); //张三 12 male

        2.4对象中扩展运算符的使用

聚合的作用：=左边

//对象中的拓展运算符的应用
let { a, ...b } = { a: 1, b: 2, c: 3 }
console.log(a, b); //1 { b: 2, c: 3 }

深拷贝：

//拓展运算符对对象的深拷贝
let obj1 = { a: 1, b: 2, c: 3 }
let {...b } = obj1;
console.log(b); //{ a: 1, b: 2, c: 3 }
console.log(b === obj1); //false 开辟新空间，不是浅拷贝

三、字符串解构

字符串可以使用[]和{}进行解构。使用[]进行解构，解构的时字符串内部的字符，将字符串进行拆分。

//使用中括号[]解构字符串内部的字符
let [a, b, c, d, e] = 'hello'
console.log(a, b, c, d, e); //h e l l o

使用{}进行解构，解构的是字符串原型中的方法和属性。

//使用{}解构字符串原型中的方法和属性
let { length, toString } = 'hello'
console.log(length, toString); //5 [Function: toString]

四、number和boolean的解构

数字和布尔类型只能使用{}进行解构其原型对象中的方法和属性，不能使用[]进行解构，因为数字和Boolean不可以迭代

//数字和布尔类型只能用{}解构其原型对象中的方法和属性
//不能使用[]进行解构，因为不可迭代
// let [a, b] = 10
// console.log(a, b); //报错 数值不是可迭代的
let { valueOf } = 10
console.log(valueOf); //[Function: valueOf]
// let [str] = true
// console.log(str);//错误  boolean也是不可迭代的