update: 扩展运算符

05-JavaScript之ES6语法/07-剩余参数和扩展运算符.md

@@ -42,7 +42,7 @@ fn(1, 2, 3); //方法的定义中了四个参数，但调用函数时只使用
 
 打印结果：
 
-```
+```bash
 1
 2
 undefined
@@ -80,6 +80,7 @@ const sum = (...args) => {
 };
 console.log(sum(10, 20, 30));
 ```
+
 打印结果：60
 
 ### 剩余参数和解构赋值配合使用
@@ -104,7 +105,7 @@ console.log(s2); // ['李四', '王五']
 
 ```js
 const arr = [10, 20, 30];
-...arr // 10, 20, 30      注意，这一行是伪代码
+...arr // 10, 20, 30      注意，这一行是伪代码，这里用到了扩展运算符
 console.log(...arr); // 10 20 30
 
 console.log(10, 20, 30); // 10 20 30
@@ -116,10 +117,17 @@ console.log(10, 20, 30); // 10 20 30
 
 我们把`...arr` 打印出来，发现打印结果竟然是 `10 20 30`，为啥逗号不见了呢？因为逗号被当作了 console.log 的参数分隔符。如果你不信，可以直接打印 `console.log(10, 20, 30)` 看看。
 
+接下来，我们看一下扩展运算符的应用。
 
-**举例**：数组赋值的问题
+### 举例1：数组赋值
 
-我们来分析一段代码：（将数组 arr1 赋值给 arr2）
+数组赋值的代码举例：
+
+```js
+let arr2 = [...arr1]; // 将 arr1 赋值给 arr2
+```
+
+为了理解上面这行代码，我们先来分析一段代码：（将数组 arr1 赋值给 arr2）
 
 ```javascript
 let arr1 = ['www', 'smyhvae', 'com'];
@@ -128,7 +136,7 @@ console.log('arr1:' + arr1);
 console.log('arr2:' + arr2);
 console.log('---------------------');
 
-arr2.push('你懂得'); //往arr2 里添加一部分内容
+arr2.push('你懂得'); //往 arr2 里添加一部分内容
 console.log('arr1:' + arr1);
 console.log('arr2:' + arr2);
 ```
@@ -139,11 +147,11 @@ console.log('arr2:' + arr2);
 
 上方代码中，我们往往 arr2 里添加了`你懂的`，却发现，arr1 里也有这个内容。原因是：`let arr2 = arr1;`其实是让 arr2 指向 arr1 的地址。也就是说，二者指向的是同一个内存地址。
 
-如果不想让 arr1 和 arr2 指向同一个内存地址，我们可以借助扩展运算符来做：
+如果不想让 arr1 和 arr2 指向同一个内存地址，我们可以借助**扩展运算符**来做：
 
 ```javascript
 let arr1 = ['www', 'smyhvae', 'com'];
-let arr2 = [...arr1]; //arr2 会重新开辟内存地址
+let arr2 = [...arr1]; //【重要代码】arr2 会重新开辟内存地址
 console.log('arr1:' + arr1);
 console.log('arr2:' + arr2);
 console.log('---------------------');
@@ -155,6 +163,40 @@ console.log('arr2:' + arr2);
 
 运行结果：
 
-![](http://img.smyhvae.com/20180304_1951.png)
+```bash
+arr1:www,smyhvae,com
+arr2:www,smyhvae,com
+---------------------
+arr1:www,smyhvae,com
+arr2:www,smyhvae,com,你懂得
+```
 
 我们明白了这个例子，就可以避免开发中的很多业务逻辑上的 bug。
+
+### 举例2：合并数组
+
+代码举例：
+
+```js
+let arr1 = ['王一', '王二', '王三'];
+let arr2 = ['王四', '王五', '王六'];
+// ...arr1  // '王一','王二','王三'
+// ...arr2  // '王四','王五','王六'
+
+// 方法1
+let arr3 = [...arr1, ...arr2];
+console.log(arr3); // ["王一", "王二", "王三", "王四", "王五", "王六"]
+
+// 方法2
+arr1.push(...arr2);
+console.log(arr1); // ["王一", "王二", "王三", "王四", "王五", "王六"]
+```
+
+### 举例3：将伪数组或者可遍历对象转换为真正的数组
+
+代码举例：
+
+```js
+const myDivs = document.getElementsByClassName('div');
+const divArr = [...myDivs]; // 利用扩展运算符，将伪数组转为真正的数组
+```