152.JavaScript reduce() 方法解说要就来一次性学会

[webVueBlog]

[js]

[webVueBlog]

1

实例 计算数组元素相加后的总和：

var numbers = [1,2,3,4,5];

function getSum(total, num) {
    return total + num;
}
function myFunction(item) {
    document.getElementById("demo").innerHTML = numbers.reduce(getSum);
}

输出结果：

15

定义和用法 reduce() 方法接收一个函数作为累加器，数组中的每个值（从左到右）开始缩减，最终计算为一个值。

reduce() 可以作为一个高阶函数，用于函数的 compose。

注意: reduce() 对于空数组是不会执行回调函数的。

参数

function(total,currentValue, index,arr)

必需。用于执行每个数组元素的函数。

参数	描述
total	必需。初始值, 或者计算结束后的返回值。
currentValue	必需。当前元素
currentIndex	可选。当前元素的索引
arr	可选。当前元素所属的数组对象。

initialValue可选。传递给函数的初始值

实例 四舍五入后计算数组元素的总和：

<button onclick="myFunction()">点我</button>

<p>数组元素之和: <span id="demo"></span></p>

<script>
var numbers = [10.5, 20.3, 10.1, 30.7];

function getSum(total, num) {
    return total + Math.round(num);
}
function myFunction(item) {
    document.getElementById("demo").innerHTML = numbers.reduce(getSum, 0);
}
</script>

[webVueBlog]

2

该方法reduce()应用了一个函数，该函数是“累加器”，并且处理列表的每个值（从左到右）以将其减小为单个值。

JavaScript Demo: Array.reduce()

const array1 = [1, 2, 3, 4];
const reducer = (accumulator, currentValue) => accumulator + currentValue;

// 1 + 2 + 3 + 4
console.log(array1.reduce(reducer));
// expected output: 10

// 5 + 1 + 2 + 3 + 4
console.log(array1.reduce(reducer, 5));
// expected output: 15

结果：

> 10
> 15

arr .reduce（回调）
arr .reduce （回调，InitialValue）

reduce()callback对数组中存在的每个元素执行一次功能，并忽略数组中的空元素。该函数callback使用四个参数：

1. 累加器（上一次调用该函数返回的值callback），或者如果是第一次调用则为初始值；
2. 当前元素的值；
3. 当前元素的索引；
4. 该方法遍历的表。

换句话说，如果valeurInitiale未提供，reduce将从索引1执行回调函数，并将数组的第一个值（索引0）用于valeurInitiale。

代码：

[0, 1, 2, 3, 4].reduce(function(accumulateur, valeurCourante, index, array){
  return accumulateur + valeurCourante;
});

结果：

10

使用箭头功能

[0, 1, 2, 3, 4].reduce( 
  (accumulateur, valeurCourante) => accumulateur + valeurCourante;
);

添加数组的所有值

var total = [0, 1, 2, 3].reduce((a, b)=> a + b,0);
// total == 6

展平列表清单

var applati = [[0, 1], [2, 3], [4, 5]].reduce(function(a, b) {
    return a.concat(b);
});
// applati vaut [0, 1, 2, 3, 4, 5]

从阵列中删除重复项

let tableauAvecDoublons = [1, 2, 3, 1, 4, 5, 4, 6];
let tableauSansDoublon = Array.from(new Set(tableauAvecDoublons));
console.table(tableauSansDoublon); // [1, 2, 3, 4, 5, 6]

用 reduce()

var tableauAvecDoublons = [1, 2, 3, 1, 4, 5, 4, 6];
var tableauSansDoublon = tableauAvecDoublon.reduce(function (acc, valCourante) {
  if(acc.indexOf(valCourante) === -1) {
    acc.push(valCourante);
  }
  return acc
}, []);

console.log(tableauSansDoublon); // [1, 2, 3, 4, 5, 6]