前端博客-reduce用法详解

source/_posts/reduce函数详解

+**reduce()** 方法对数组中的每个元素执行一个由您提供的reducer函数(升序执行)，将其结果汇总为单个返回值。
+
+reduce() 方法有两个参数，
+- 第一个是回调函数，
+- 第二个是初始值。
+
+回调函数
+回调函数在数组的每个元素上执行。回调函数的返回值是累加结果，并作为下一次调用回调函数的参数提供。回调函数带有四个参数。
+
+accumulator 累计器 ——累加器累加回调函数的返回值。
+currentValue 当前值——处理数组的当前元素。
+currentIndex 当前索引 （可选）
+array 数组 （可选）
+初始值
+如果指定了初始值，则将累加器设置为 initialValue 作为初始元素。否则，将累加器设置为数组的第一个元素作为初始元素。
+
+arr.reduce(callback(accumulator, currentValue[,index[,array]])[, initialValue])
+下面的代码片段中，第一个累加器(accumulator)被分配了初始值0。currentValue 是正在处理的 numbersArr 数组的元素。在这里，currentValue 被添加到累加器，在下次调用回调函数时，会将返回值作为参数提供。
+
+
+```
+const numbersArr = [67, 90, 100, 37, 60];
+
+const total = numbersArr.reduce(function(accumulator, currentValue){
+    console.log("accumulator is " + accumulator + " current value is " + currentValue);
+    return accumulator + currentValue;
+}, 0);
+
+console.log("total : "+ total);
+输出：
+
+accumulator is 0 current value is 67
+accumulator is 67 current value is 90
+accumulator is 157 current value is 100
+accumulator is 257 current value is 37
+accumulator is 294 current value is 60
+total : 354
+```
+
+**案例**
+对数组的所有值求和
+
+```
+const studentResult = [67, 90, 100, 37, 60];
+const total = studentResult.reduce((accumulator, currentValue) => accumulator +currentValue, 0);
+console.log(total); // 354
+```
+
+代码中，studentResult 数组具有5个数字。使用 reduce() 方法，将数组减少为单个值，该值将 studentResult 数组的所有值和结果分配给 total。
+
+对象数组中的数值之和
+
+```
+const studentResult = [
+  { subject: '数学', marks: 78 },
+  { subject: '物理', marks: 80 },
+  { subject: '化学', marks: 93 }
+];
+
+const total = studentResult.reduce((accumulator, currentValue) => accumulator + currentValue.marks, 0);
+
+console.log(total); // 251
+```
+
+我们从后端获取数据作为对象数组，因此，reduce() 方法有助于管理我们的前端逻辑。在下面的代码中，studentResult 对象数组有三个科目，这里，currentValue.marks 取了 studentResult 对象数组中每个科目的分数。
+
+展平数组（去扁平化）
+
+```
+const twoDArr = [ [1,2], [3,4], [5,6], [7,8] , [9,10] ];
+
+const oneDArr = twoDArr.reduce((accumulator, currentValue) => accumulator.concat(currentValue));
+
+console.log(oneDArr);
+// [ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 ]
+```
+
+“展平数组”是指将多维数组转换为一维。在下面的代码中，twoDArr 2维数组被转换为 oneDArr 一维数组。此处，第一个 [1,2] 数组分配给累加器 accumulator，然后 twoDArr 数组的其余每个元素都连接到累加器。
+
+按属性分组对象
+
+```
+const result = [
+  {subject: '物理', marks: 41},
+  {subject: '化学', marks: 59},
+  {subject: '高等数学', marks: 36},
+  {subject: '应用数学', marks: 90},
+  {subject: '英语', marks: 64},
+];
+
+let initialValue = {
+  pass: [],
+  fail: []
+}
+
+const groupedResult = result.reduce((accumulator, current) => {
+  (current.marks >= 50) ? accumulator.pass.push(current) : accumulator.fail.push(current);
+  return accumulator;
+}, initialValue);
+
+console.log(groupedResult);
+```
+
+根据对象的属性，我们可以使用 reduce() 方法将对象数组分为几组。通过下面的代码片段，你可以清楚地理解这个概念。这里，result 对象数组有五个对象，每个对象都有 subject 和 marks 属性。如果分数大于或等于50，则该主题通过，否则，主题失败。reduce() 用于将结果分组为通过和失败。首先，将 initialValue 分配给累加器，然后 push() 方法在检查条件之后将当前对象添加到 pass 和 fail 属性中作为对象数组。
+
+输出：
+
+```
+{
+ pass: [
+  { subject: ‘化学’, marks: 59 },
+  { subject: ‘应用数学’, marks: 90 },
+  { subject: ‘英语’, marks: 64 }
+ ],
+ fail: [
+  { subject: ‘物理’, marks: 41 },
+  { subject: ‘高等数学’, marks: 36 }
+ ]
+}
+```
+
+删除数组中的重复项
+
+```
+const duplicatedsArr = [1, 5, 6, 5, 7, 1, 6, 8, 9, 7];
+
+const removeDuplicatedArr = duplicatedsArr.reduce((accumulator, currentValue) => {
+  if(!accumulator.includes(currentValue)){
+    accumulator.push(currentValue);
+  }
+  return accumulator;
+}, []);
+
+console.log(removeDuplicatedArr);
+// [ 1, 5, 6, 7, 8, 9 ]
+```
+
+在下面的代码片段中，删除了 plicatedArr 数组中的重复项。首先，将一个空数组分配给累加器作为初始值。accumulator.includes() 检查 duplicatedArr 数组的每个元素是否已经在累加器中可用。如果 currentValue 在累加器中不可用，则使用 push() 将其添加。
\ No newline at end of file