add: forEach() 能否修改原数组

04-JavaScript基础/17-数组的常见方法.md

@@ -735,7 +735,7 @@ console.log('result =' + JSON.stringify(result));
 
 上面的各种写法中，写法 4 是我们在实战开发中用得最多的。
 
-为了确保代码的简洁优雅，接下来的代码中，凡是涉及到函数，我们将统一采用 ES6 中的箭头函数来写。
+为了确保代码的简洁优雅，接下来的代码中，凡是涉及到函数，我们将尽量采用 ES6 中的箭头函数来写。
 
 ### sort 方法举例：将数组从小到大排序
 
@@ -988,22 +988,28 @@ PS：这几个方法**不会修改原数组**。
 
 有了这几种方法，就可以替代一些 for 循环了。下面依次来介绍。
 
-## for 循环 遍历
+## for 循环遍历
 
 举例：
 
 ```javascript
-var arr = ['生命壹号', '许嵩', '永不止步'];
-for (var i = 0; i < arr.length; i++) {
+const arr = ['生命壹号', '许嵩', '永不止步'];
+for (let i = 0; i < arr.length; i++) {
     console.log(arr[i]); // arr[i]代表的是数组中的每一个元素i
 }
 
-console.log(arr);
+console.log(JSON.stringify(arr));
 ```
 
 打印结果：
 
-![](http://img.smyhvae.com/20180124_2008.png)
+```
+生命壹号
+许嵩
+永不止步
+
+["生命壹号","许嵩","永不止步"]
+```
 
 ## forEach() 遍历
 
@@ -1011,7 +1017,7 @@ console.log(arr);
 
 forEach()方法需要一个函数作为参数。这种函数，是由我们创建但是不由我们调用的，我们称为回调函数。
 
-数组中有几个元素，该回调函数就会执行几次。执行完毕后，浏览器会将遍历到的元素。
+数组中有几个元素，该回调函数就会执行几次。
 
 回调函数中传递三个参数：
 
@@ -1024,12 +1030,12 @@ forEach()方法需要一个函数作为参数。这种函数，是由我们创
 代码举例：
 
 ```javascript
-var arr = ['王一', '王二', '王三'];
+let myArr = ['王一', '王二', '王三'];
 
-arr.forEach(function (item, index, obj) {
+myArr.forEach((item, index, arr) => {
     console.log('item:' + item);
     console.log('index:' + index);
-    console.log('obj:' + obj);
+    console.log('arr:' + JSON.stringify(arr));
     console.log('----------');
 });
 ```
@@ -1039,25 +1045,120 @@ arr.forEach(function (item, index, obj) {
 ```javascript
 item:王一
 index:0
-obj:王一,王二,王三
+arr:["王一","王二","王三"]
 ----------
-
 item:王二
 index:1
-obj:王一,王二,王三
+arr:["王一","王二","王三"]
 ----------
-
 item:王三
 index:2
-obj:王一,王二,王三
+arr:["王一","王二","王三"]
 ----------
 ```
 
-注意，forEach() 的返回值是 undefined。也就是说，它没有返回值。如果你尝试 `tempArry = arr.forEach()`这种方式来接收，是达不到效果的。
+注意，forEach() 没有返回值。也可以理解成：forEach() 的返回值是 undefined。如果你尝试 `tempArry = myArr.forEach()`这种方式来接收，是达不到效果的。
+
+### forEach() 能不能改变原数组？
+
+forEach() 能不能改变原数组？关于这个问题，大部分人会搞错。我们来看看下面的代码。
+
+**1、数组的元素是基本数据类型**：（无法改变原数组）
+
+```js
+let numArr = [1, 2, 3];
+
+numArr.forEach((item) => {
+    item = item * 2;
+});
+console.log(JSON.stringify(numArr)); // 打印结果：[1, 2, 3]
+```
+
+上面这段代码，你可要看仔细了，打印结果是 `[1, 2, 3]`，不是 `[2, 4, 6]`。
+
+**2、数组的元素是引用数据类型**：（直接修改整个对象时，无法改变原数组）
+
+```js
+let objArr = [
+    { name: '千古壹号', age: 20 },
+    { name: '许嵩', age: 30 },
+];
+
+objArr.forEach((item) => {
+    item = {
+        name: '邓紫棋',
+        age: '29',
+    };
+});
+console.log(JSON.stringify(objArr)); // 打印结果：[{"name":"千古壹号","age":20},{"name":"许嵩","age":30}]
+```
+
+
+**3、数组的元素是引用数据类型**：（修改对象里的某个属性时，可以改变原数组）
+
+```js
+let objArr = [
+    { name: '千古壹号', age: 28 },
+    { name: '许嵩', age: 30 },
+];
+
+objArr.forEach((item) => {
+    item.name = '邓紫棋';
+});
+console.log(JSON.stringify(objArr)); // 打印结果：[{"name":"邓紫棋","age":28},{"name":"邓紫棋","age":30}]
+```
+
+如果你需要通过 forEach 修改原数组，建议用 forEach里面的参数2和参数3来做，具体请看下面的标准做法。
+
+**4、forEach() 通过参数2、参数3修改原数组**：（标准做法）
+
+```js
+// 1、数组的元素是基本数据类型
+let numArr = [1, 2, 3];
+
+numArr.forEach((item, index, arr) => {
+    arr[index] = arr[index] * 2;
+});
+console.log(JSON.stringify(numArr)); // 打印结果：[2,4,6]
+
+// 2、数组的元素是引用数据类型时，直接修改对象
+let objArr = [
+    { name: '千古壹号', age: 28 },
+    { name: '许嵩', age: 34 },
+];
+
+objArr.forEach((item, index, arr) => {
+    arr[index] = {
+        name: '小明',
+        age: '10',
+    };
+});
+console.log(JSON.stringify(objArr)); // 打印结果：[{"name":"小明","age":"10"},{"name":"小明","age":"10"}]
+
+// 3、数组的元素是引用数据类型时，修改对象的某个属性
+let objArr2 = [
+    { name: '千古壹号', age: 28 },
+    { name: '许嵩', age: 34 },
+];
+
+objArr2.forEach((item, index, arr) => {
+    arr[index].name = '小明';
+});
+console.log(JSON.stringify(objArr2)); // 打印结果：[{"name":"小明","age":28},{"name":"小明","age":34}]
+```
+
+参考链接：
+
+- [forEach到底可以改变原数组吗？](https://juejin.im/post/5d526a4ae51d4557dc774e7d)
+
+- [forEach 会改变原数组值吗](https://lhajh.github.io/js/2018/05/26/Does-forEach-change-the-original-array-value.html)
+
 
 ## map()方法
 
-解释：对数组中每一项运行回调函数，返回该函数的结果，组成的新数组（返回的是**加工之后**的新数组）。
+解释：对数组中每一项运行回调函数，返回该函数的结果，组成的新数组（返回的是**加工之后**的新数组）。不会改变原数组。
+
+作用：对数组中的每一项进行加工。
 
 **举例 1**：（拷贝的过程中改变数组元素的值）
 
@@ -1115,33 +1216,35 @@ map 的应用场景，主要就是以上两种。
 
 ## filter()
 
-解释：对数组中的**每一项**运行回调函数，该函数返回结果是 true 的项，将组成新的数组（返回值就是这个新的数组）。
+解释：对数组中的**每一项**运行回调函数，该函数返回结果是 true 的项，将组成新的数组（返回值就是这个新的数组）。不会改变原数组。
+
+作用：对数组进行过滤。
 
 **举例 1**：找出数组 arr1 中大于 4 的元素，返回一个新的数组。代码如下：
 
 ```javascript
-var arr1 = [1, 3, 6, 2, 5, 6];
+let arr1 = [1, 3, 6, 2, 5, 6];
 
-var arr2 = arr1.filter(function (item, index) {
-    return item > 4; //将arr1中大于4的元素返回，组成新的数组
+let arr2 = arr1.filter((item) => {
+    if (item > 4) {
+        return true; // 将arr1中大于4的元素返回，组成新的数组
+    }
+    return false;
 });
-console.log(JSON.stringify(arr2));
+
+console.log(JSON.stringify(arr1)); // 打印结果：[1,3,6,2,5,6]
+console.log(JSON.stringify(arr2)); // 打印结果：[6,5,6]
 ```
 
-打印结果：
-
-```
-    [6,5,6]
-```
-
-上方代码的 ES6 写法：
+上方代码更简洁的写法如下：
 
 ```javascript
-const arr1 = [1, 3, 6, 2, 5, 6];
+let arr1 = [1, 3, 6, 2, 5, 6];
 
-const arr2 = arr1.filter((item) => item > 4); //将arr1中大于4的元素返回，组成新的数组
+let arr2 = arr1.filter((item) => item > 4); // 将arr1中大于4的元素返回，组成新的数组
 
-console.log(JSON.stringify(arr2));
+console.log(JSON.stringify(arr1)); // 打印结果：[1,3,6,2,5,6]
+console.log(JSON.stringify(arr2)); // 打印结果：[6,5,6]
 ```
 
 **举例 2**：
@@ -1253,7 +1356,7 @@ array.length = 0; //方式2：length属性可以赋值，在其它语言中lengt
 array = []; //方式3：推荐
 ```
 
-### 练习 1
+### join() 练习
 
 **问题**：将一个字符串数组输出为`|`分割的形式，比如“千古|宿敌|素颜”。使用两种方式实现。
 
@@ -1290,7 +1393,7 @@ console.log(arr.join('|'));
 
 ![](http://img.smyhvae.com/20180126_1339.png)
 
-### 练习 2
+### reverse() 练习
 
 题目：将一个字符串数组的元素的顺序进行反转，使用两种种方式实现。提示：第 i 个和第 length-i-1 个进行交换。
 
@@ -1325,30 +1428,7 @@ function reverse(array) {
 
 现在我们学习了数组自带的 api，我们就可以直接使用 reverse()方法。
 
-### 练习 3
-
-问题：针对工资的数组[1500,1200,2000,2100,1800]，把工资超过 2000 的删除。
-
-答案：
-
-```javascript
-var arr1 = [1500, 1200, 2000, 2100, 1800];
-
-var arr2 = arr1.filter(function (ele, index, array) {
-    if (ele < 2000) {
-        return true;
-    }
-    return false;
-});
-console.log(arr1);
-console.log(arr2);
-```
-
-结果：
-
-![](http://img.smyhvae.com/20180126_1435.png)
-
-### 练习 4
+### 练习
 
 问题：找到数组["c","a","z","a","x","a"]中每一个元素出现的次数。
 
@@ -1358,7 +1438,7 @@ console.log(arr2);
 
 略难，答案暂略。
 
-### 练习 5：数组去重
+### 练习：数组去重
 
 问题：编写一个方法去掉一个数组中的重复元素。