add: reduce() 方法

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

@@ -45,7 +45,7 @@
 ### 查找数组的元素
 
 | 方法                  | 描述                                                                           | 备注                                                     |
-| :-------------------- | :------------------------------------------------------------------------------- | :------------------------------------------------------- |
+| :-------------------- | :----------------------------------------------------------------------------- | :------------------------------------------------------- |
 | indexOf(value)        | 从前往后索引，检索一个数组中是否含有指定的元素                                 |                                                          |
 | lastIndexOf(value)    | 从后往前索引，检索一个数组中是否含有指定的元素                                 |                                                          |
 | find(function())      | 找出**第一个**满足「指定条件返回 true」的元素                                  |                                                          |
@@ -61,7 +61,7 @@
 | forEach() | 和 for 循环类似，但需要兼容 IE8 以上                                   | forEach() 没有返回值。也就是说，它的返回值是 undefined |
 | map()     | 对原数组中的每一项进行加工，将组成新的数组                             | 不会改变原数组                                         |
 | filter()  | 过滤数组：返回结果是 true 的项，将组成新的数组，返回结果为**新的数组** | 不会改变原数组                                         |
-| reduce    | 为数组中的每一个元素，依次执行回调函数                                 |                                                        |
+| reduce    | 接收一个函数作为累加器，返回值是回调函数累计处理的结果。               |                                                        |
 
 ## isArray()：判断是否为数组
 
@@ -898,9 +898,9 @@ console.log(result); //打印结果：5
 **语法**：
 
 ```javascript
-findIndex((item, index,arr) => {
+findIndex((item, index, arr) => {
     return true;
-})
+});
 ```
 
 **作用**：找出**第一个**满足「指定条件返回 true」的元素的 index。
@@ -1093,7 +1093,6 @@ objArr.forEach((item) => {
 console.log(JSON.stringify(objArr)); // 打印结果：[{"name":"千古壹号","age":20},{"name":"许嵩","age":30}]
 ```
 
-
 **3、数组的元素是引用数据类型**：（修改对象里的某个属性时，可以改变原数组）
 
 ```js
@@ -1108,9 +1107,9 @@ objArr.forEach((item) => {
 console.log(JSON.stringify(objArr)); // 打印结果：[{"name":"邓紫棋","age":28},{"name":"邓紫棋","age":30}]
 ```
 
-如果你需要通过 forEach 修改原数组，建议用 forEach里面的参数2和参数3来做，具体请看下面的标准做法。
+如果你需要通过 forEach 修改原数组，建议用 forEach 里面的参数 2 和参数 3 来做，具体请看下面的标准做法。
 
-**4、forEach() 通过参数2、参数3修改原数组**：（标准做法）
+**4、forEach() 通过参数 2、参数 3 修改原数组**：（标准做法）
 
 ```js
 // 1、数组的元素是基本数据类型
@@ -1149,13 +1148,20 @@ console.log(JSON.stringify(objArr2)); // 打印结果：[{"name":"小明","age":
 
 参考链接：
 
-- [forEach到底可以改变原数组吗？](https://juejin.im/post/5d526a4ae51d4557dc774e7d)
+-   [forEach 到底可以改变原数组吗？](https://juejin.im/post/5d526a4ae51d4557dc774e7d)
 
 -   [forEach 会改变原数组值吗](https://lhajh.github.io/js/2018/05/26/Does-forEach-change-the-original-array-value.html)
 
-
 ## map()方法
 
+语法：
+
+```js
+arr.map(function (item, index, arr) {
+    return newItem;
+});
+```
+
 解释：对数组中每一项运行回调函数，返回该函数的结果，组成的新数组（返回的是**加工之后**的新数组）。不会改变原数组。
 
 作用：对数组中的每一项进行加工。
@@ -1216,6 +1222,14 @@ map 的应用场景，主要就是以上两种。
 
 ## filter()
 
+语法：
+
+```js
+arr.filter(function (item, index, arr) {
+    return true;
+});
+```
+
 解释：对数组中的**每一项**运行回调函数，该函数返回结果是 true 的项，将组成新的数组（返回值就是这个新的数组）。不会改变原数组。
 
 作用：对数组进行过滤。
@@ -1274,44 +1288,128 @@ console.log(JSON.stringify(arr2));
 
 ## reduce()方法
 
+### reduce() 语法
+
 > reduce 的发音：[rɪ'djuːs]。中文含义是减少。
 
-`reduce()`：为数组中的每一个元素，依次执行回调函数。
+reduce() 方法接收一个函数作为累加器，数组中的每个值（从左到右）开始缩减，最终计算为一个值。返回值是回调函数累计处理的结果。
 
 **语法**：
 
 ```javascript
-arr.reduce(function (previousValue, item, index, arr) {}, initialValue);
+arr.reduce(function (previousValue, currentValue, currentIndex, arr) {}, initialValue);
 ```
 
 参数解释：
 
--   previousValue：上一次调用回调函数时的返回值，或者初始值
+-   previousValue：必填，上一次调用回调函数时的返回值
 
--   currentValue：当前正在处理的数组元素
+-   currentValue：必填，当前正在处理的数组元素
 
--   currentIndex：当前正在处理的数组元素下标
+-   currentIndex：选填，当前正在处理的数组元素下标
 
--   array：调用 reduce()方法的数组
+-   arr：选填，调用 reduce()方法的数组
 
--   initialValue：可选的初始值（作为第一次调用回调函数时传给 previousValue 的值）
+-   initialValue：选填，可选的初始值（作为第一次调用回调函数时传给 previousValue 的值）
 
-备注：如果能熟练使用 reduce 的用法，将能替代很多其他的数组方法。
+在以往的数组方法中，匿名的回调函数里是传三个参数：item、index、arr。但是在 reduce() 方法中，前面多传了一个参数`previousValue`，这个参数的意思是上一次调用回调函数时的返回值。第一次执行回调函数时，previousValue 没有值怎么办？可以用 initialValue 参数传给它。
 
-**举例 1**：
+备注：绝大多数人在一开始接触 reduce() 的时候会很懵逼，但是没关系，有事没事多看几遍，自然就掌握了。如果能熟练使用 reduce() 的用法，将能替代很多其他的数组方法，并成功走上进阶之路，领先他人。
+
+为了方便理解 reduce()，我们先来看看下面的简单代码，过渡一下：
+
+```js
+let arr1 = [1, 2, 3, 4, 5, 6];
+
+arr1.reduce((prev, item) => {
+    console.log(prev);
+    console.log(item);
+    console.log('------');
+    return 88;
+}, 0);
+```
+
+打印结果：
+
+```
+0
+1
+------
+88
+2
+------
+88
+3
+------
+88
+4
+------
+88
+5
+------
+88
+6
+------
+```
+
+上面的代码中，由于`return`的是固定值，所以 prev 打印的也是固定值（只有初始值是 0，剩下的遍历中，都是打印 88）。
+
+现在来升级一下，实际开发中，prev 的值往往是动态变化的。我们来看几个例子就明白了。
+
+### reduce() 的常见应用
+
+**举例 1**、求和：
 
 计算数组中所有元素项的总和。代码实现：
 
 ```javascript
-var arr = [2, 0, 1, 9, 6];
+const arr = [2, 0, 1, 9, 6];
-sumValue = arr.reduce(function (total, item) {
+// 数组求和
-    //  计算 arr 数组中，所有元素项的综合
+const total = arr.reduce((prev, item) => {
-    return total + item;
+    return prev + item;
-}, 0);
+});
 
-console.log('sumValue:' + sumValue); // 打印结果：18
+console.log('total:' + total); // 打印结果：18
 ```
 
+**举例 2**、统计某个元素出现的次数：
+
+代码实现：
+
+```js
+// 定义方法：统一 value 这个元素在数组 arr 中出现的次数
+function repeatCount(arr, value) {
+    if (!arr || arr.length == 0) return 0;
+
+    return arr.reduce((totalCount, item) => {
+        totalCount += item == value ? 1 : 0;
+        return totalCount;
+    }, 0);
+}
+
+let arr1 = [1, 2, 6, 5, 6, 1, 6];
+
+console.log(repeatCount(arr1, 6)); // 打印结果：3
+```
+
+**举例 3**、求元素的最大值：
+
+代码实现：
+
+```js
+const arr = [2, 0, 1, 9, 6];
+// 数组求最大值
+const maxValue = arr.reduce((prev, item) => {
+    return prev > item ? prev : item;
+});
+
+console.log(maxValue); // 打印结果：9
+```
+
+参考链接：
+
+-   [JS reduce 函数](https://juejin.im/post/5d78aa3451882521397645ae)
+
 ## 数组练习
 
 ### splice()练习：数组去重