reduce的简介和 shift方法

原创已于 2023-06-28 11:39:34 修改 · 1.4k 阅读

2 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#前端 #javascript

于 2022-06-02 11:26:13 首次发布

本文深入解析JavaScript中的reduce方法，通过多个示例展示其在找最大值、数组扁平化、多维数组处理、数组分块、替代map和filter等场景的应用，帮助理解reduce的强大功能。

直接看代码

let value = arr.reduce(function(previousValue, item, index, array) {
  // ...
}, [initial]);

reduce方法有两个参数，第一个参数是一个callback，用于针对数组项的操作；第二个参数则是传入的初始值，这个初始值用于单个数组项的操作。需要注意的是，reduce方法返回值并不是数组，而是形如初始值的经过叠加处理后的操作。

参数：

previousValue: 上一个函数调用的结果，第一次等于 initial（如果提供了 initial 的话）。
item : 当前的数组元素。
index :当前索引。
arr : 数组本身。

previousValue实际上有点像累加，所以一些地方也会叫将这个参数称为accumulator ，存储前面所有的执行结果，最后会成为reduce的结果。

查找数组中最大值：

const arr = [0, 1, 2, 3, 4, 5]
const max = arr.reduce((acc, cur) => Math.max(acc, cur))
console.log(max) // 5

二维数组转一维：

结合 concat 实现数组扁平化：

const arr2 = [
 [1, 2],
 [3, 4],
 [5, 6],
].reduce((acc, cur) => {
 return acc.concat(cur);
}, []);

console.log(arr2); //

多维数组扁平

const arr3 = [
 [1, 2],
 [3, 4],
 [5, [7, [9, 10], 8], 6],
];
const flatten = arr =>
 arr.reduce(
  (pre, cur) => pre.concat(Array.isArray(cur) ? flatten(cur) : cur),
  []
 );
console.log(flatten(arr3)); // [ 1, 2, 3, 4, 5, 7, 9, 10, 8, 6 ]

function Flat(arr = []) {
    return arr.reduce((t, v) => t.concat(Array.isArray(v) ? Flat(v) : v), [])
}
const arr = [0, 1, [2, 3], [4, 5, [6, 7]], [8, [9, 10, [11, 12]]]];
Flat(arr); // [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]

数组分块

根据传入限制大小，对数组进行分块。
小于限制长度时就往里添加，否则直接将其加入res

const chunk = (arr, size) => {
 return arr.reduce(
  (res, cur) => (
   res[res.length - 1].length < size
    ? res[res.length - 1].push(cur)
    : res.push([cur]),
   res
  ),
  [[]]
 );
};
const arr4 = [1, 2, 3, 4, 5, 6];
console.log(chunk(arr4, 3)); // [ [ 1, 2, 3 ], [ 4, 5, 6 ] ]

代替map和filter

const arr = [0, 1, 2, 3];

// 代替map：[0, 2, 4, 6]
const a = arr.map(v => v * 2);
const b = arr.reduce((t, v) => [...t, v * 2], []);

// 代替filter：[2, 3]
const c = arr.filter(v => v > 1);
const d = arr.reduce((t, v) => v > 1 ? [...t, v] : t, []);

// 代替map和filter：[4, 6]
const e = arr.map(v => v * 2).filter(v => v > 2);
const f = arr.reduce((t, v) => v * 2 > 2 ? [...t, v * 2] : t, []);

代替reverse

function Reverse(arr = []) {
    return arr.reduceRight((t, v) => (t.push(v), t), []);
}
Reverse([1, 2, 3, 4, 5]); // [5, 4, 3, 2, 1]

统计文本中各个字的数量：

按属性对 Object 分类

const people = [
  { name: 'Alice', age: 21 },
  { name: 'Max', age: 20 },
  { name: 'Jane', age: 20 }
]

function groupBy (objectArray, property) {
  return objectArray.reduce((acc, obj) => {
    const key = obj[property]
    if (!acc[key]) {
      acc[key] = []
    }
    acc[key].push(obj)
    return acc
  }, {})
}

const groupedPeople = groupBy(people, 'age')
console.log(groupedPeople)
// {
//   20: [
//     { name: 'Max', age: 20 },
//     { name: 'Jane', age: 20 }
//   ],
//   21: [{ name: 'Alice', age: 21 }]
// }

shift

shift()方法是JavaScript数组对象的方法之一，它可以删除数组的第一个元素并返回该元素的值，同时将数组中的其他元素向前移动一个位置。

使用方法如下：

定义一个数组

var fruits = ["apple", "banana", "orange"];

使用shift()方法删除数组的第一个元素

var firstFruit = fruits.shift();

输出被删除的元素值和剩余的数组元素

console.log(firstFruit); // 输出 "apple"
console.log(fruits); // 输出 ["banana", "orange"]

需要注意的是，如果数组为空，shift()方法将返回undefined。