巧用JS中的Array：reduce、map、flat，提升代码简洁性和效率

2024-02-09 15:48:30

reduce：将数组元素聚合为一个值

reduce方法可以将数组中的所有元素聚合为一个值。它通过一个回调函数来处理数组中的每个元素，并将结果累积起来。回调函数接收四个参数：累积值、当前元素、当前元素的索引和整个数组。

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

// 计算数组中所有元素的总和
const sum = numbers.reduce((acc, curr) => acc + curr, 0);
// sum = 15

// 找出数组中最大的元素
const max = numbers.reduce((acc, curr) => Math.max(acc, curr), -Infinity);
// max = 5

// 将数组中的所有元素连接成一个字符串
const str = numbers.reduce((acc, curr) => acc + curr.toString(), "");
// str = "12345"

map：将数组中的每个元素映射为一个新值

map方法可以将数组中的每个元素映射为一个新值。它通过一个回调函数来处理数组中的每个元素，并将结果收集到一个新数组中。回调函数接收三个参数：当前元素、当前元素的索引和整个数组。

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

// 将数组中的每个元素乘以2
const doubled = numbers.map(num => num * 2);
// doubled = [2, 4, 6, 8, 10]

// 将数组中的每个元素转换为字符串
const strings = numbers.map(num => num.toString());
// strings = ["1", "2", "3", "4", "5"]

// 将数组中的每个元素映射为一个对象
const objects = numbers.map(num => ({ value: num }));
// objects = [{ value: 1 }, { value: 2 }, { value: 3 }, { value: 4 }, { value: 5 }]

flat：将嵌套数组展平为一个一维数组

flat方法可以将嵌套数组展平为一个一维数组。它可以接受一个参数，指定要展平的层数。如果不指定层数，则会将数组展平到最底层。

const nestedArray = [[1, 2, 3], [4, 5, 6], [7, 8, 9]];

// 将嵌套数组展平为一维数组
const flattenedArray = nestedArray.flat();
// flattenedArray = [1, 2, 3, 4, 5, 6, 7, 8, 9]

// 将嵌套数组展平一层
const flattenedArray1 = nestedArray.flat(1);
// flattenedArray1 = [1, 2, 3, 4, 5, 6, 7, 8, 9]