webcourse/Web
2
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

add: reduce() 方法

Browse Source
This commit is contained in:
qianguyihao 2020-06-16 16:03:48 +08:00
parent 15f9ec5dbe
commit 89881dddc7
1 changed files with 130 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -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()练习：数组去重