add: reduce() 方法
This commit is contained in:
qianguyihao
parent
15f9ec5dbe
commit
89881dddc7
@ -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()：判断是否为数组
|
||||
|
||||
@ -900,7 +900,7 @@ console.log(result); //打印结果：5
|
||||
```javascript
|
||||
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
|
||||
@ -1153,9 +1152,16 @@ console.log(JSON.stringify(objArr2)); // 打印结果：[{"name":"小明","age":
|
||||
|
||||
- [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()练习：数组去重
|
||||
|
||||
Loading…
Reference in New Issue
Block a user