勇宝趣学JavaScript ES6第二章（解构赋值）

在ES6中，我们经常使用到解构赋值这个知识点，今天我们就来好好讲讲这一小部分知识点。咱们争取这回一次性讲明白。

今天是元宵节，祝大家节日快乐，只有我自己还在无聊的码字。

给我点个赞吧，嘿嘿！！！

一、数组的解构赋值

ES6允许我们对一个数组或者是对象从中进行取值，然后在对变量进行赋值的这个操作叫做解构。。

1.1 基本用法

1. 在以前，我们是这样对变量进行赋值的

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

2. 然而在ES6中，我们可以书写成以下方式：

   let [a, b, c] = [1, 2, 3]
   
   console.log(a, b, c); // 1 2 3
   

这种写法有一个专业术语，叫做模式匹配。其实我更喜欢叫映射（一一对应）。

3. 还有嵌套结构的写法

   let [a, [b, c], d] = ['JavaScript', ['Vue', 'React'], 'Node'];
   
   console.log(a, b, c, d); // JavaScript Vue React Node
   

4. 如果我们想获取数组的某一个下标的值可以这样写：

   let [, [, a], b] = ['JavaScript', ['Vue', 'React'], 'Node'];
   
   console.log(a, b); // React Node
   

5. 通过...可以获取到剩余值。

   let [a, ...b] = ['JavaScript', 'Vue', 'React', 'Node'];
   
   console.log(a); // JavaScript
   console.log(b); // ['Vue', 'React', 'Node']
   

6. 如果解构不成功，首先不会报错，控制台会打印undefined。

   let [a, b] = ['Javascript'];
   
   console.log(b); // undefined
   

7. 解构也可以是不完全解构，不比如我们只用到数组的第一项。

   let [a] = ['JavaScript', 'vue', 'Node'];
   
   console.log(a); // JavaScript
   

1.2 解构原理

1. 我们来简单说一下，为什么数组和对象可以解构，根本原因是我们的对象有Interator接口。

   let web = ['JavaScript', 'Vue'];
   
   console.log(web.__proto__);
   

有了这个接口，我们还可以对数组或对象进行遍历。

拓展：在ES6中Set和Map也是可以解构和遍历的。

1.3 设置默认值

1. 解构允许我们设置一个默认值，当我们取不到值的时候就会显示默认值

   let [first, second = 'iyongbao' ] = ['Daven'];
   
   console.log(first, second); // Daven iyongbao
   

2. 注意如果数组的某一项是undefined，那么也会启用默认值。而null是正常赋值的。

   let [a, b = 'Vue', c] = ['JavaScript', undefined, null];
   
   console.log(a, b, c); // JavaScript Vue null
   

3. 这里我给大家出一道面试题，大家看看会打印什么？

   let [x = y, y = 1] = [];
   
   console.log(x, y); // ??? 
   

为什么会这样呢？欢迎评论区告诉我。

二、对象的解构赋值

2.1 基本用法

1. 解构不仅适用于数组，也适用于对象。但是二者有一个很明显的区别。先把结论和说一下：数组是有序的，而对象可以是无序的，因为对象是一个个键值对（key=>value）。

   解构数组变量的取值由数组的位置来决定，解构对象需要变量名和对象属性一致才能取到正确的值。

   // 第一种写法
   // let { username, age } = { username: 'iyongbao', age: 26 };
   
   // 第二种：顺序可以颠倒，但是值不会变
   let { age, username, hobbys } = { username: 'iyongbao', age: 26, hobby: 'Vue' };
   
   console.log(username, age, hobbys); // iyongbao 26 
   console.log(hobby); // undefined
   

2. 如果我就想变量名和对象属性名不一样，也是可以操作的。

   let { age: aaa } = { username: 'iyongbao', age: 26 };
   
   console.log(aaa); // iyongbao
   console.log(age); // 报错：ReferenceError: age is not defined
   

3. 和数组一样，对象也是支持嵌套解构的

   let { userInfo: { hobby }} = { userInfo: { name: 'iyongbao', age: 26, hobby: ['Vue', 'React'] } };
   
   console.log(hobby); // ['Vue', 'React']
   

   这其实就是对象的多次解构

2.2 对象解构过程

我们来聊一聊这个解构赋值的过程是怎么样的。

let { username: username } = { username: 'iyongbao', age: 26 };

1. 解构： 程序会去{ username: 'iyongbao', age: 26 }对象中找属性为username的值；
2. 赋值：找到后赋值给我们声明的name变量，因为ES6的特性，如果值一样，我们可以省略；
3. 所以说真正被赋值的是后者而不是前者。

所以总结出为什么报错，age是匹配的模式，aaa才是真正的变量。

2.3 设置默认值

1. 和数组一样，解构对象也是可以设置默认值的，大同小异。

   let { color = 'red' } = {};
   let { name, age = 26 } = { name: 'iyongbao' }
   
   console.log(color, name, age); // red iyongbao 26
   

注意：默认值生效的条件是获取的值为undefined。

let { color = 'red' } = { color: undefined };

let { background = 'green' } = { background: null };

console.log(color, background); // red null

三、字符串的解构赋值

3.1 基本用法

1. 字符串也是可以进行解构赋值的，编辑器会把字符串转换为一个类似数组的对象。

   let [a, b, c, d, e, f, g] = 'iyongbao';
   
   console.log(a, b, c, d, e, f, g); // i y o n g b a
   

2. 我们也可以解构出来字符串的长度。

   let { length } = 'iyongbao';
   
   console.log(length); // 8
   

   为什么会这样：首先程序会包装我们的字符串为一个实例对象，让这个实例去访问指定的属性或方法，然后获取对象中的length，最后销毁自己。（其实String在底层字符串是以字符数组的形式保存的。）

四、函数参数的解构赋值

函数的参数也是可以进行解构赋值的

function add ([x, y]) {
    return x + y;
}

console.log(add([1, 2])); // 3

4.1 参数默认值

1. 可以给参数设置默认值（第一种）

   function foo ({ x = 1, y = 2}) {
       return [x, y];
   }
   
   foo({ x: 3, y: 4}); // [3, 4]
   foo({ x: 5 }); // [5, 2]
   foo({}); // [1, 2]
   

上面的函数需要传入一个对象，通过解构赋值得到对应的值，如果解构失败则使用默认值。

2. 可以给参数设置默认值（第二种）

   function foo ({ x, y } = { x: 1, y: 2}) {
       return [x, y];
   }
   
   foo({ x: 1, y: 2}); // [1, 2]
   foo({ x: 3 }); // [3, undefined]
   foo({}); // [undefined, undefined]
   foo(); // [1, 2]
   

这种赋值注意是整体赋值，只要我们传入参数默认值就不起作用了。

思考：看一看一下会打印什么值：

let newArr = [1, undefined, 2].map((x = 'iyongbao') => x);

console.log(newArr); // ???

五、闲聊

本来想的是码完字去写写代码，维护一下网站，可是写完发现已经快要11点了，今天也是元宵节，就饶过自己，好好睡一觉。真心希望我写的东西能让更多的人看到，也真心希望我写的东西能帮助到一些人，虽然很基础。