在项目实践过程中,操作数组是很常见的,但有时我们处理数组的时候可能没有用到最简洁的方法,降低了代码的可读性。在这分享一些项目经验积累的数组新方法。本文章会陆续补充~
一、array.at()
JavaScript 数组的索引是从0开始的,第一个元素的索引为0,最后一个元素的索引等于该数组的长度减1。
之前,我们一般使用方括号通过索引访问数组元素:array[index],如果指定的索引是一个无效值,JavaScript 数组并不会报错,而是会返回 undefined。我们从末尾开始访问元素时通常会用array[array.length-1]。
现在有一个新方法Array.prototype.at(),接收一个正整数或负整数的索引,返回该索引的元素值。
const arr = ['a','b','c','d']
console.log(arr.at(2)) //输出c
console.log(arr.at(-2) //输出c
//等同于, 并且无须再访问 array.length
console.log(arr[arr.length - 2])
二、array.flatMap()
我们常用的map()方法可以遍历原数组中的每个元素调用函数返回值创建一个新的数组。但有时,我们需要跳过其中的一些元素,这时候我们第一方案肯定想到的是使用filter方法过滤,如以下代码:
const array1 = [1, 4, 9, 16];
// 过滤数组中值为1的元素
const map1 = array1
.filter(x => x !== 1)
.map(x => x * 2);
console.log(map1);
// 输出结果: Array [8, 18, 32]
以上方法确实可以解决我们的需求。但如果使用更简洁的方法是不是效率会更高一些。
使用 flatMap 方法,flatMap() 方法首先使用映射函数映射每个元素,然后将结果压缩成一个新数组。flatMap 能用于在map期间增删项目(也就是修改items的数量)。
const array1 = [1, 4, 9, 16];
// 删减数组中值为1的元素,这里也可以做增加元素的操作,不用与原数组的元素一对一
const map1 = array1.flatMap(x => x === 1? [] :[ x*2 ])
console.log(map1);
// 输出结果: Array [8, 18, 32]