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

JavaScript 数组除了 map()、filter()、find() 和 push() 之外还有更多功能。今天这篇文章就来给大家分享一些鲜有人知道的数组方法，我们现在开始吧。

• 1.copyWithin（）

  Array copyWithin() 将数组的一部分复制到同一数组中的另一个位置并返回它，而不增加其长度。

  const array =[1, 2, 3, 4, 5]
  const result = array.copyWithin(3, 1, 3)
  console.log(result) // [1, 2, 3, 2, 3]
  

  end 参数是可选的：

  const array=[1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
  const result = array.copyWithin(0, 5)
  console.log(result) // [6, 7, 8, 9, 10, 6, 7, 8, 9, 10]
  

  const array =[1, 2, 3, 4, 5]
  // Copy numbers 2,3,4, and 5 (cut off at index 4)const result = array.copyWithin(3,1，6);
  const result = array.copyWithin(3, 1, 6);
  console.log(result);//[1, 2, 3, 2, 3]
  

• 2. at() 和 with()

  它们是单元素数组修改和访问的函数式和不可变版本。

  const array = [1, 2, 3, 4, 5]
  const result1 = array.at(0)
  console.log(result1) // 1  
  
  const result2 = array.with(2, 9)
  console.log(result2) // [1, 2, 9, 4, 5]
  

• 3.reduceRight()

  与reduce()类似，但回调是从右到左而不是从左到右：

  const array = ['a','b','c','d']
  const result1 = array.reduce((accumulator, currentValue) => {
    return accumulator + currentValue
  }, '')
  console.log(result) // 'abcd'
  
  const result2 = array.reduceRight((accumulator, currentValue) => {
    return accumulator + currentValue
  }, '')
  console.log(result2) // 'dcba'
  

• 4. findLast()

  ES13 中的新增功能：从最后一个元素开始查找数组项。 非常适合从结束位置搜索比使用 find() 产生更好性能的情况： 例子：

  const list = new Array(100000).fill(null)
  list.push(1)
  // find
  console.time()
  list.find(i => i === 1)
  console.timeEnd()
  VM5311:3 default: 1.093994140625 ms
  // findLast
  console.time()
  list.findLast(i => i === 1)
  console.timeEnd()
  VM5305:3 default: 0.02001953125 ms
  

• 5. toSorted()、toReversed()、toSpliced() ES2023 完全包含了 sort()、reverse() 和 splice() 的不可变版本。 好吧，也许 splice() 的使用不如其他方法那么多，但它们都会就地改变数组。

  const arr = [5, 2, 1, 6, 7]
  const result1 = arr.reverse()
  console.log(result1) // [7, 6, 1, 2, 5]
  console.log(arr) // [7, 6, 1, 2, 5]
  
  const result2 = arr.sort()
  console.log(result1) // [1, 2, 5, 6, 7]
  console.log(arr) // [1, 2, 5, 6, 7]
  
  const result3 = arr.splice(1, 2, 7, 10)
  console.log(result1) // [2, 1]
  console.log(arr) // [5, 7, 10, 6, 7]
  

  不变性为我们提供了可预测且更安全的代码；调试要容易得多，因为我们确定某些变量永远不会改变它们的值。 参数完全相同，但 splice() 和 toSpliced() 的返回值必须不同。

  const arr = [5, 2, 1, 6, 7]
  const result1 = arr.toReversed()
  console.log(result1) // [7, 6, 1, 2, 5]
  console.log(arr) // [5, 2, 1, 6, 7]]
  
  const result2 = arr.toSorted()
  console.log(result1) // [1, 2, 5, 6, 7]
  console.log(arr) // [5, 2, 1, 6, 7]]
  
  const result3 = arr.toSpliced(1, 2, 7, 10)
  console.log(result1) // [5, 7, 10, 6, 7]
  console.log(arr) //  [5, 2, 1, 6, 7]] 
  

• 6.lastIndexOf()

  lastIndexOf() 方法返回可以在数组中找到特定元素的最后一个索引。 我们可以将第二个参数传递给lastIndexOf()来指定数组中的一个索引，在该索引之后它应该停止搜索字符串：

  const arr = [1, 2, 3, 4, 5, 2, 3, 3]
  const result1 = arr.lastIndexOf(3, 0) // -1
  const result2 = arr.lastIndexOf(3, 4) // 2
  

• 7. flatMap()

  flatMap() 方法使用给定的回调函数转换数组，然后将转换后的结果展平一级：

  const arr = [1, 2, 3, 4];
  arr.flatMap((x) => [x, x * 2]);
    // 等价于
    const n = arr.length;
    const acc = new Array(n * 2);
    for (let i = 0; i < n; i++) {
    const x = arr[i];
    acc[i * 2] = x;
    acc[i * 2 + 1] = x * 2;
  }
  // [1, 2, 2, 4, 3, 6, 4, 8]
  

  在数组上调用 flatMap() 与调用 map() 后跟深度为 1 的 flat() 执行相同的操作，但它比单独调用这两个方法更有效。