From 89881dddc73be80969e499f9649906d5aabf9dd1 Mon Sep 17 00:00:00 2001 From: qianguyihao Date: Tue, 16 Jun 2020 16:03:48 +0800 Subject: [PATCH] =?UTF-8?q?add:=20reduce()=20=E6=96=B9=E6=B3=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- 04-JavaScript基础/17-数组的常见方法.md | 162 ++++++++++++++++++++----- 1 file changed, 130 insertions(+), 32 deletions(-) diff --git a/04-JavaScript基础/17-数组的常见方法.md b/04-JavaScript基础/17-数组的常见方法.md index f422801..97f6533 100644 --- a/04-JavaScript基础/17-数组的常见方法.md +++ b/04-JavaScript基础/17-数组的常见方法.md @@ -44,14 +44,14 @@ ### 查找数组的元素 -| 方法 | 描述 | 备注 | -| :-------------------- | :------------------------------------------------------------------------------- | :------------------------------------------------------- | -| indexOf(value) | 从前往后索引，检索一个数组中是否含有指定的元素 | | -| lastIndexOf(value) | 从后往前索引，检索一个数组中是否含有指定的元素 | | -| find(function()) | 找出**第一个**满足「指定条件返回 true」的元素 | | -| findIndex(function()) | 找出**第一个**满足「指定条件返回 true」的元素的 index | | -| every() | 确保数组中的每个元素都满足「指定条件返回 true」，则停止遍历，此方法才返回 true | 全真才为真。要求每一项都返回 true，最终的结果才返回 true | -| some() | 数组中只要有一个元素满足「指定条件返回 true」，则停止遍历，此方法就返回 true | 一真即真。只要有一项返回 true，最终的结果就返回 true | +| 方法 | 描述 | 备注 | +| :-------------------- | :----------------------------------------------------------------------------- | :------------------------------------------------------- | +| indexOf(value) | 从前往后索引，检索一个数组中是否含有指定的元素 | | +| lastIndexOf(value) | 从后往前索引，检索一个数组中是否含有指定的元素 | | +| find(function()) | 找出**第一个**满足「指定条件返回 true」的元素 | | +| findIndex(function()) | 找出**第一个**满足「指定条件返回 true」的元素的 index | | +| every() | 确保数组中的每个元素都满足「指定条件返回 true」，则停止遍历，此方法才返回 true | 全真才为真。要求每一项都返回 true，最终的结果才返回 true | +| some() | 数组中只要有一个元素满足「指定条件返回 true」，则停止遍历，此方法就返回 true | 一真即真。只要有一项返回 true，最终的结果就返回 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://lhajh.github.io/js/2018/05/26/Does-forEach-change-the-original-array-value.html) +- [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]; -sumValue = arr.reduce(function (total, item) { - // 计算 arr 数组中，所有元素项的综合 - return total + item; -}, 0); +const arr = [2, 0, 1, 9, 6]; +// 数组求和 +const total = arr.reduce((prev, item) => { + return prev + item; +}); -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()练习：数组去重