JavaScript 中 7 个鲜为人知的数组方法

在 JavaScript 中使用数组时，您可能会发现自己只使用流行的方法，例如 地图（） , 筛选（） , 寻找（） , 推（） ，和 种类（） .这是可以理解的，因为这些非常有用的方法对于许多用例来说已经足够了。

但是 JavaScript 有超过 30 种数组方法，尽管它们非常强大并且能够解决实际问题，但其中一些方法鲜为人知，并且很少被许多 JavaScript 开发人员使用。

因此，在本文中，我们将介绍其中 7 个鲜为人知的 JavaScript 数组方法。我们将了解它们是如何工作的，并看看我们如何在实践中使用它们。

1.copyWithin()

这复制内（）方法将数组的一部分复制到同一数组中的另一个位置并返回它，而不增加它的长度。

例如：

 常量数组 = [1, 2, 3, 4, 5]; 常量结果 = array.copyWithin(3, 1, 3); 控制台.log（结果）； // [1, 2, 3, 2, 3]

如果您不熟悉此方法，您可能会发现这里的结果令人困惑。了解如何 复制内（） 工作原理让我们来看看它的参数：

目标 : 是将指定部分复制到的数组中的位置。
开始 : 是要复制的部分的起始索引。
结尾 : 是要复制的部分的结束索引。

所以通过 3 , 1 ，和 3 我们分别告诉 复制内（） 取索引之间的数组元素 1 和 3 独占，并将它们复制到数组的另一部分，从索引开始 3 .这表示 复制内（） 开始复制元素 1 和 2 在元素所在的地方 4 是，替换 4 和 5 .

让我们看另一个例子：

 常量数组 = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]; // 未指定“end”，因此使用了最后一个数组索引  
 常量结果 = array.copyWithin(0, 5); // [6, 7, 8, 9, 10, 6, 7, 8, 9, 10]  
 控制台.log（结果）；

在这里我们告诉 复制内（） 开始复制数字 6 , 7 , 8 , 9 ，和 10 到那个地方 1 是，替换任何连续的元素，直到 10 （最后一个元素）已被复制。

如前所述， 复制内（） 不会增加数组的长度，但会在到达数组末尾时停止复制。

 常量数组 = [1, 2, 3, 4, 5]; // 复制数字 2、3、4 和 5  
 常量结果 = array.copyWithin(3, 1, 6); 控制台.log（结果）； // [1, 2, 3, 2, 3]

2. 在()

该方法是新方法之一 ES13 JavaScript 特性，它提供了一种从数组末尾访问元素的更简洁的方法。

而不是编写这样的代码：

 常量 arr = ['a', 'b', 'c', 'd']; // 从末尾算起第一个元素  
 控制台.log(arr[arr.length - 1]); // d // 倒数第二个元素  
 控制台.log(arr[arr.length - 2]); // C

和在（），我们可以更简洁、更有表现力地做到这一点，像这样：

 常量 arr = ['a', 'b', 'c', 'd']; // 从末尾算起第一个元素  
 控制台.log(arr.at(-1)); // d // 倒数第二个元素  
 控制台.log(arr.at(-2)); // C

我们只是传递一个负值 -N 访问 ñ 数组末尾的第一个元素。

3.reduceRight()

这减少权利（）方法与更流行的方法类似减少（）方法，不同之处在于回调函数从右到左而不是从左到右应用于数组的每个值。

 常量字母 = ['b', 'e', 'a', 'u', 't', 'y']; const word = letters.reduce((word, letter) => word + letter, ''); 控制台.log（字）； // 美丽  
 const wordReversed = letters.reduceRight((word, letter) => word + letter, ''); console.log(wordReversed); // ytuaeb

减少权利（） 从右到左对数组的每个元素重复执行传递的回调函数。我们在这里传递的回调只是将当前元素和累加器字符串连接起来，最终导致反转的单词。

减少权利（） 当您希望列表从左到右表示但从右到左进行评估时，可以提供帮助。这是一个例子：

 常量阈值 = [  
 { 颜色：'蓝色'，阈值：0.7 }，  
 { 颜色：“橙色”，阈值：0.5 }，  
 { 颜色：'红色'，阈值：0.2 }，  
 ]; 常量值 = 0.9; const threshold = thresholds.reduceRight((color, threshold) =>  
 阈值。阈值 > 值？ threshold.color : 颜色  
 ); console.log(threshold.color); // 红色的

4.findLast()

JavaScript 的另一个新增功能 ES13 是个查找最后（）方法，用于从最后一个元素开始搜索数组中的项目。

我们可以在我们知道从最后一个元素中查找可能比使用 寻找（） 方法。

例如，这里我们试图用 价值 属性等于 '你' .和 寻找（） ：

 常量字母 = [  
 {值：'v'}，  
 {值：'w'}，  
 {值：'x'}，  
 {值：'y'}，  
 {值：'z'}，  
 ]; const found = letters.find((item) => item.value === 'y'); 控制台.log（找到）； // { 值：'y' }

这可行，但由于目标对象更靠近数组的尾部，如果我们使用 查找最后（） 从末尾搜索数组的方法：

 常量字母 = [  
 {值：'v'}，  
 {值：'w'}，  
 {值：'x'}，  
 {值：'y'}，  
 {值：'z'}，  
 ]; const found = letters.findLast((item) => item.value === 'y'); 控制台.log（找到）； // { 值：'y' }

另一个用例 查找最后（） 是当我们必须从末尾专门搜索数组以获取正确的元素时。

例如，如果我们想在数字列表中找到最后一个偶数， 寻找（） 会产生完全错误的结果：

 常量数 = [7, 14, 3, 8, 10, 9]; // 给出 14，而不是 10  
 const lastEven = nums.find((value) => value % 2 === 0); 控制台.log(lastEven); // 14

但 查找最后（） 将从末尾开始搜索并为我们提供正确的项目：

 常量数 = [7, 14, 3, 8, 10, 9]; const lastEven = nums.findLast((num) => num % 2 === 0); 控制台.log(lastEven); // 10

5.findLastIndex()

findLastIndex() 像 查找最后（） ，但它返回找到的元素的索引，而不是元素本身。

在下面的例子中，我们使用 findLastIndex() 用颜色查找数组中最后一个汽车对象的索引 红色的 并将其删除。

 常量车队列 = [  
 {颜色：'黄色'}，  
 { 红色' }，  
 {颜色：'绿色'}，  
 { 红色' }，  
 {颜色：'蓝色'}，  
 ]; const lastRedIndex = carQueue.findLastIndex((car) => car.color === 'red'); // 使用 splice() 删除汽车对象  
 carQueue.splice(lastRedIndex, 1); /**  
 [  
 {颜色：'黄色'}，  
 { 红色' }，  
 {颜色：'绿色'}，  
 {颜色：'蓝色'}  
 ]  
 */  
 console.log(carQueue);

6.lastIndexOf()

这最后索引（）方法返回可以在数组中找到特定元素的最后一个索引。

 常量颜色 = ['a', 'e', 'a', 'f', 'a', 'b']; const index = colors.lastIndexOf('a'); 控制台.log（索引）； // 4

我们可以将第二个参数传递给 最后索引（） 在数组中指定一个索引，它应该在该索引之后停止搜索字符串：

 常量颜色 = ['a', 'e', 'a', 'f', 'a', 'b']; // 获取索引 3 之前 'a' 的最后一个索引  
 const index1 = colors.lastIndexOf('a', 3); 控制台.log(index1); // 2 const index2 = colors.lastIndexOf('a', 0); 控制台.log(index2); // 0 const index3 = colors.lastIndexOf('f', 2); 控制台.log(index3); // -1

7. 平面图()

这平面图（）方法使用给定的回调函数转换数组，然后将转换后的结果展平一层。

 常量 arr = [1, 2, 3, 4]; const withDoubles = arr.flatMap((num) => [num, num * 2]);  
 console.log(withDoubles); // [1, 2, 2, 4, 3, 6, 4, 8]

打电话 平面图（） 在数组上做与调用相同的事情地图（）其次是平坦的（）深度为 1，但它比单独调用这两种方法更有效。

 常量 arr = [1, 2, 3, 4]; // flat() 默认使用深度 1  
 const withDoubles = arr.map((num) => [num, num * 2]).flat(); console.log(withDoubles); // [1, 2, 2, 4, 3, 6, 4, 8]