如果你曾经想过：“我不需要除了for循环和map()之外的任何东西”，听着，因为我要告诉你你错得有多离谱。

以下是 7 个被低估的数组方法，可能会让你大吃一惊——是的，它们用起来出奇地有趣。

1. copyWithin()

想象一下复制一片披萨，但不是得到一片新的，而是笨拙地把它塞回同一个盒子里。

copyWithin()的作用有点像这样——它从数组中取出一部分并将其复制到同一个数组中的另一个位置。它不会增加长度，所以不会有额外的“卡路里”（或元素）。

const arr = [1, 2, 3, 4, 5];
arr.copyWithin(0, 3); // [4, 5, 3, 4, 5]

在这里，从索引 3（4, 5）的元素被复制到索引 0 开始，替换了1和2。你还可以指定一个可选的结束索引来限制被复制的部分。

2. at()和with()

这两个是新出现的很酷的方法。at()首先出现，为我们提供了一种简洁的访问元素的方式，特别是使用负索引。然后with()在 2023 年加入，自豪地为修改数组元素提供了不可变的替代方法。

const colors = ['red', 'blue', 'green', 'yellow'];

console.log(colors.at(-1)); // 'yellow'
console.log(colors.with(1, 'purple')); // ['red', 'purple', 'green', 'yellow']

at()在你需要处理数组末尾时很有用，而with()确保在你进行更新时原始数组保持不变。

3. reduceRight()

每个人都知道reduce()——它就像数组方法中的瑞士军刀。但是你有没有希望过可以反过来呢？那就来看看reduceRight()，它从右到左处理数组。

const arr = ['a', 'b', 'c', 'd'];
const result = arr.reduceRight((acc, curr) => acc + curr); 
console.log(result); // 'dcba'

在这个例子中，reduceRight()从末尾开始组合元素，得到一个反转的连接结果。

4. findLast()

向 ES13 中保守得最好的秘密之一问好。findLast()的工作方式就像find()，但它从数组的末尾开始搜索。

这在你知道要搜索的项目更接近尾部时特别有用。

const nums = [1, 2, 3, 4, 5, 6, 7];
console.log(nums.findLast(n => n % 2 === 0)); // 6

与从开头搜索的find()不同，findLast()从末尾开始，使其在特定场景中非常理想，例如查找特定类型值的最后一次出现。

5. toSorted(), toReversed(), toSpliced()

来认识一下sort(), reverse()和splice()的不可变“表亲”。这些 ES2023 新增的方法让你在不改变原始数据的情况下操作数组。

为什么你应该关心？因为当你的变量不会在你背后神秘地改变时，调试会容易一百万倍。

const arr = [3, 1, 4, 1, 5];

// 不可变排序
console.log(arr.toSorted()); // [1, 1, 3, 4, 5]
console.log(arr); // [3, 1, 4, 1, 5]

// 不可变反转
console.log(arr.toReversed()); // [5, 1, 4, 1, 3]
console.log(arr); // [3, 1, 4, 1, 5]

这些方法让你在保持原始数组不变的情况下进行更改，确保代码更具可预测性和可调试性。

6. lastIndexOf()

indexOf()被低估的“兄弟姐妹”，lastIndexOf()正如你所想——它在数组中查找元素的最后一次出现。你甚至可以指定在哪里停止搜索。

const arr = ['apple', 'banana', 'cherry', 'apple'];

// 查找'apple'的最后一次出现
console.log(arr.lastIndexOf('apple')); // 3

// 限制搜索到前 3 个元素
console.log(arr.lastIndexOf('apple', 2)); // 0

当你处理可能包含重复元素的数组，并且你特别需要最后一个实例时，这个方法很有帮助。

7. flatMap()

当你可以在一个流畅的操作中把它们结合起来时，为什么要满足于map()和flat()呢？flatMap()转换你的数组并将结果展平一层。

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

// 在一步中进行映射和展平
console.log(arr.flatMap(x => [x * 2])); // [2, 4, 6, 8]

就像一次提交解决两个问题——更干净、更快，也更令人满意。

最终思考

这些数组方法可能不像filter()或push()那么流行，但它们非常强大。试试看，谁知道呢？你可能会给你的同事留下深刻印象——或者至少在代码审查时让他们感到困惑。

记住，你知道得越多，循环就越少！

快乐编码！

原文地址：https://medium.com/@arnoldgunter/7-amazing-javascript-array-methods-that-only-2-of-developers-know-simple-and-surprising-64f8f21231e4
作者：Arnold Gunter