一起养成写作习惯!这是我参与「掘金日新计划 · 4 月更文挑战」的第24天,点击查看活动详情。
数组操作中有一些我们不常用的方法,但是往往有些开发场景是可以使用它们,方便我们代码开发,简化代码。然而我们不了解它们就会自己写遍历循环写一堆代码来实现这些场景,显得代码太low。比如计算数组中所有项的总数,不知道reduce方法,只能这些计算总数,如下:
const data = [1, 2, 3, 4];
let sum = 0;
data.forEach(element => { // 10
sum = sum + element;
})
然而如果我们了解reduce方法,则可以一行实现计算总数的效果,如下:
const sum = data.reduce((perv, curr) => perv + curr, 0) // 10
下面我们列举一些有用的Array提供的方法:
reduce: 可以为数组中的每个元素提供一个由自己定义的执行函数,和上一个元素的执行函数的返回值进行计算等操作函数,最后生成个单个值。因此它可以做很多事,比如上面的例子,每个元素进行求和操作,求积、去重、降维等等操作。它的定义格式如下:
Array.reduce(function(perv, curr, currIndex, array), initialValue)
perv:必填的,前一个执行函产生的返回值。
curr:必填的,当前遍历的数组元素。
currIndex:可选的,当前遍历的数组元素索引。
array:可选的,当前遍历的数组元素所属的数组。 initialValue:可选的,初始值。
如下通过reduce实现二维数组降维操作。
const data = [[1, 2], [3, 4], [5, 6]];
data.reduce((prev, curr) => prev.concat(curr), []); // [1, 2, 3, 4, 5, 6]
flatMap:也可以实现数组的降维,它是降维和map遍历的结合体,我们可以通过它可以遍历一个数组,返回一个新的数组,也可以过滤、插入。flatMap对数组的每个成员执行一个我们定义的函数,相当于执行map(),然后对返回值组成的数组执行扁平化也就是降维处理,该方法返回一个新数组,不改变原数组。
还是上面的降维操作
const data = [[1, 2], [3, 4], [5, 6]];
data.flatMap(element => element); // [1, 2, 3, 4, 5, 6]
过滤操作
const data = [1, 2, 3, 4, 5, 6];
data.flatMap(element => element == 4 ? [] : [element]); // [1, 2, 3, 5, 6]
注意它的每一项执行函数都得返回一个数组。
总结
上面两个是我感觉我们可能不长使用的两个非常有用的方法,当然Array还提供了很多小方法,比如删除最后一个元素pop()、反转数组reverse()、排序sort()、连接成字符串join()等等方法。我们要在开发中灵活使用这些方法,减少代码的重复性。美化我们的代码。