专栏名称: 大迁世界
掘金LV8,思否10万+的作者。一个热爱前端的创业者。
目录
相关文章推荐
安徽文明网  ·  为“爱”减负 移风易俗惠民生 ·  3 天前  
安徽文明网  ·  为“爱”减负 移风易俗惠民生 ·  3 天前  
前端早读课  ·  【早阅】使用 React Router ... ·  3 天前  
前端大全  ·  刚刚!谷歌宣布重大调整:没 ... ·  3 天前  
前端大全  ·  请前端立即拿下软考证书(政策风口) ·  5 天前  
51好读  ›  专栏  ›  大迁世界

没人愿意使用这些数组方法

大迁世界  · 公众号  · Javascript 前端  · 2024-11-19 08:35

主要观点总结

文章介绍了JavaScript中较少被关注的7个实用数组方法,包括copyWithin()、at()和with()、reduceRight()、findLast()、不可变数组操作方法如toSorted()、toReversed()和toSpliced()、lastIndexOf(),以及flatMap()方法。这些方法在特定场景下能显著提升代码质量和效率。

关键观点总结

关键观点1: copyWithin(): 数组内部复制方法,可以在同一个数组内复制并替换元素。

copyWithin方法接受起始和结束索引作为参数,用于复制数组的一部分元素并替换其他元素。

关键观点2: at() 和 with(): 现代数组访问方法,提供了更优雅的数组元素访问和修改方式。

at()方法允许使用负索引访问数组元素,with()方法可以在不改变原数组的情况下修改元素。

关键观点3: reduceRight(): 从右向左归约的方法,类似于reduce(),但从数组末尾开始处理。

reduceRight()方法从数组的末尾开始,对每个元素应用一个函数,将其归约为一个单一的值。

关键观点4: findLast(): 反向查找方法,从数组末尾开始查找元素。

findLast()方法接受一个测试函数,从数组的末尾开始反向查找满足测试条件的第一个元素。

关键观点5: 不可变数组操作方法(如toSorted()、toReversed()、toSpliced()),不会修改原数组。

这些方法返回一个新的数组,对原数组没有任何影响。

关键观点6: lastIndexOf(): 查找最后匹配索引的方法,查找指定元素最后出现的位置。

lastIndexOf()方法从数组的末尾开始向前查找,返回指定元素最后出现的索引。

关键观点7: flatMap(): 结合了map()和flat()的功能,映射并扁平化数组。

flatMap()方法首先使用map()方法生成一个新的数组,然后使用flat()方法将多维数组转化为一维数组。


正文

前端开发中经常使用数组操作,除了常见的 map()filter()find()push() 等方法外,JavaScript还提供了许多强大的数组方法。这篇文章将介绍7个实用但较少被关注的数组方法。

1. copyWithin(): 数组内部复制

这个方法可以在同一个数组内复制并替换元素,不会改变数组长度。

const numbers = [12345];
numbers.copyWithin(03); // [4, 5, 3, 4, 5]

// 指定结束位置
const fruits = ['apple''banana''orange''grape''kiwi'];
fruits.copyWithin(202); // ['apple', 'banana', 'apple', 'banana', 'kiwi']

2. at() 和 with(): 现代数组访问方法

这两个新方法提供了更优雅的数组元素访问和修改方式:

const arr = ['a''b''c'];
// 使用负索引访问最后一个元素
console.log(arr.at(-1)); // 'c'

// 不改变原数组的情况下修改元素
const newArr = arr.with(1'x'); // ['a', 'x', 'c']
console.log(arr); // ['a', 'b', 'c']

3. reduceRight(): 从右向左归约

reduce() 类似,但从数组末尾开始处理:

// 构建嵌套对象
const keys = ['user''name''john'];
const nested = keys.reduceRight((value, key) => ({ [key]: value }), null);
// 结果: { user: { name: { john: null } } }

4. findLast(): 反向查找

ES13新增方法,从数组末尾开始查找元素:

const numbers = [246891012];
// 查找最后一个偶数
const lastEven = numbers.findLast(num => num % 2 === 0); // 12

5. 不可变数组操作方法

ES2023引入的新方法:toSorted()toReversed()toSpliced(),它们不会修改原数组:

const original = [31415];
const sorted = original.toSorted(); // [1, 1, 3, 4, 5]
console.log(original); // [3, 1, 4, 1, 5]

6. lastIndexOf(): 查找最后匹配索引

查找指定元素最后出现的位置:

const text = ['hello''world''hello''javascript'];
console.log(text.lastIndexOf('hello')); // 2
console.log(text.lastIndexOf('hello'1)); // 0

7. flatMap(): 映射并扁平化

结合了 map()flat() 的功能,效率更高:

const sentences = ['Hello world''JavaScript is awesome'];
const words = sentences.flatMap(sentence => sentence.split(' '));
// ['Hello', 'world', 'JavaScript', 'is', 'awesome']

这些方法虽然使用频率不高,但在特定场景下能够显著提升代码质量和效率。建议在实际开发中根据具体需求选择合适的数组方法。


最后:
React Hook 深入浅出
CSS技巧与案例详解
vue2与vue3技巧合集
VueUse源码解读