Js | Js数组方法使用及细节总结（上）

前言

本文主要总结了 Js 中数组方法中的修改器方法，其中将会重点讲解例如splice()类似的常用重要操作，对于大部分都是很少使用的方法，则以简单的示例说明功能和使用方法，您还可以参考文末给出的链接再加深学习，里面的介绍也更加地全面，本文样例代码均基于ES6语法。

修改器方法

修改器方法即是会改变原数组自身值的方法，与之对立的是访问方法，例如slice()，访问方法并不会修改原数组，而是返回一个新的数组，对于大部分修改器方法在Vue中都可以触发视图更新（除了copyWithin()和fill()），主要有以下方法：

• copyWithin(target[, start[, end]])(ES6)

  在数组内部，将一段元素序列拷贝到另一段元素序列上，覆盖原有的值，返回值为修改后的数组。具体使用方法见下方示例代码及注释。了解该方法的详细使用及细节可见链接（本方法在Vue中无法触发视图更新）。

  let arr1 = [0, 1, 2, 3, 4, 5, 6, 7]
  // output: [1, 2, 3, 4, 4, 5, 6, 7]
  // 当 end 大于数组长度时，等同于 end 为 arr.length 时的结果
  // 即用下标[1, 7]范围的值覆盖原数组[0, 3]范围内的值
  // 多余的元素会被舍弃，即[5, 7]，如下所示：
  // 1 2 3 4 5 6 7
  // ↓ ↓ ↓ ↓
  // 0 1 2 3
  console.log(arr1.copyWithin(0, 1, 5))
  
  let arr2 = [0, 1, 2, 3, 4, 5, 6, 7]
  // output: [2, 3, 4, 5, 6, 7, 6, 7]
  // 当 end 省略时, 即等同于(0, 2, arr.length)
  // 在这里指用下标[2, 7]范围内的值覆盖原数组[0, 5]范围内的值
  console.log(arr2.copyWithin(0, 2))
  
  let arr3 = [0, 1, 2, 3, 4, 5, 6, 7]
  // ouput: [0, 1, 2, 0, 1, 2, 3, 4]
  // 当 start、end均省略时，等同于(target, 0, arr.length)
  // 在这里指用下标[0, 7]范围内的值覆盖原数组[3, 7]范围内的值
  // 多余的元素会被舍弃，即[5, 7]
  console.log(arr3.copyWithin(3))
  

注意

对于方法中的三个参数target、start、end均可为负数，假如target为负且对应绝对值小于数组长度，那么可以直接将target替换为target + arr.length，结果是一样的，而当target大于数组的长度时，则target等同于0，对于start和end也是一样，此外当start的值大于等于end时，结果仍为原数组。以下方法除了特别说明的，凡有可指定start和end来确定范围的，均同此。为了讨论方便，以下方法不再讨论参数为负的情况(splice除外)，大家可以自己验证练习。

• fill(value[, start[, end]])(ES6)

  用一个固定值填充一个数组中从起始索引到终止索引内的全部元素，不包括终止索引，返回值为修改后的数组。具体使用方法见下方示例代码及注释。了解该方法的详细使用及细节可见链接（本方法在Vue中无法触发视图更新）。

  let arr3 = [1, 2, 3, 4]
  // output: [0, 0, 0, 4]
  // 将下标[0, 2]范围的值均置0
  console.log(arr3.fill(0, 0, 3))
  
  let arr2 = [1, 2, 3, 4]
  // output: [1, 0, 0, 0]
  // 将下标[1, arr2.length]范围的值置0
  // 当 end 省略时，默认值为 arr.length
  console.log(arr2.fill(0, 1))
  
  let arr1 = [1, 2, 3, 4]
  // output: [0, 0, 0, 0]
  // 将数组所有元素均置0
  // 当 start 与 end 均省略时，默认值分别为 0 和 arr.length
  console.log(arr1.fill(0))
  

• splice(start[, deleteCount[, item1[, item2[, ...]]]])

  通过删除或替换现有元素或者原地添加新的元素来修改数组，并以数组形式返回被修改的内容。从功能描述就可以看出该方法的功能强大，也是必须要重点掌握的一个方法。由于该方法根据是否指定可选参数，也对应着不同的功能，因此在这里专门分点详细讲述。了解该方法的详细使用及细节可见链接。

  1. 只有一个参数

     当只有一个参数，格式为splice(start)时，即代表删除原数组从start下标开始的所有元素，原数组被删除了指定范围内的元素，被删除的元素以数组形式返回，具体如下：

     let arr = [0, 1, 2, 3, 4, 5]
     // output: [3, 4, 5]
     // 返回值为被删除的元素，即下标[3, 5]内的元素
     console.log(arr.splice(3))
     // output: [0, 1, 2]
     // 原数组在运算后，被删除了[3, 5]内的元素
     console.log(arr)
     

  2. 有二个参数

     当有二个参数，格式为splice(start, deleteCount)时，即代表将原数组从start下标开始，删除deleteCount个元素，原数组被删除了指定范围内的元素，被删除的元素以数组形式返回，具体如下：

     let arr = [0, 1, 2, 3, 4, 5]
     // output: [2, 3, 4]
     // 返回值为被删除的元素，即下标[2, 4]内的元素
     console.log(arr.splice(2, 3))
     // output: [0, 1, 5]
     // 原数组在运算后，被删除了2, 3, 4
     console.log(arr)
     

     注意

     当第二个参数deleteCount大于start开始到数组结尾的元素个数时，等同于splice(start)，即删除start下标开始的所有元素。当deleteCount <= 0时，不删除任何元素，原数组不变。

  3. 三个及以上参数

     当有三个及以上参数，格式为splice(start[, deleteCount[, item1[, item2[, ...]]]])时，即代表数组从start下标开始，删除deleteCount个元素，并将item1、item2...插入到start下标开始的位置，返回值仍为被删除的元素，具体如下：

     let arr1 = [0, 1, 2, 3, 4, 5]
     // output: [2, 3]
     // 返回值为被删除的下标从2开始的2个元素, 即[3, 3]
     console.log(arr1.splice(2, 2, 5, 6, 7))
     // output: [0, 1, 5, 6, 7, 4, 5]
     // 原数组被删除两个元素后为[0, 1, 4, 5]
     // 5, 6, 7三个数从下标2处被插入到原数组
     console.log(arr1)
     
     let arr2 = [0, 1, 2, 3, 4, 5]
     // output: []
     // 未删除元素，故返回值为[]
     console.log(arr2.splice(6, 0, 5, 6, 7))
     // output: [0, 1, 2, 3, 4, 5, 5, 6, 7]
     // 当 start <大于等于>数组长度时，即向数组末尾添加元素
     // 补：当负数的绝对值<大于>数组长度时，也同此
     console.log(arr2)
     

     注意

     当删除元素的个数deleteCount与需要插入的元素个数相同时，即可看作为修改元素，而当deleteCount <= 0即不删除元素时，如果还有后续参数，即可看作为增加元素，并可根据指定start来指定插入的位置。此外该方法可以结合ES6的...语法，使用splice(start, deleteCount, ...[arr])这种形式，在很多情况下也十分有用。

• push(element1, ..., elementN)

  将一个或多个元素添加到数组的末尾，并返回该数组的新长度，原数组被修改为添加指定元素后的数组。该方法包括下列几个方法都很容易使用和理解，因此简略讲述，了解该方法的详细使用及细节可见链接。

  let arr = [1, 2, 3]
  // output: 6
  // 该方法返回值为添加元素后数组的新长度
  console.log(arr.push(4, 5, 6))
  // output: [1, 2, 3, 4, 5, 6]
  // 数组在<末尾>按顺序添加所给的元素
  console.log(arr)
  

• pop()

  从数组中删除最后一个元素，并返回该元素的值，该方法无参数，原数组被修改为添加指定元素后的数组，当数组为空时返回undefined，了解该方法的详细使用及细节可见链接。

  let arr = [1, 2, 3]
  // output: 3
  // 该方法返回被移除的最后一个元素
  console.log(arr.pop())
  // output: [1, 2]
  // 数组删除最后一个元素的结果
  console.log(arr)
  

• shift()

  从数组中删除第一个元素，并返回该元素的值，该方法无参数，原数组被修改为添加指定元素后的数组，当数组为空时返回undefined，了解该方法的详细使用及细节可见链接。

  let arr = [1, 2, 3]
  // output: 1
  // 该方法返回被移除的第一个元素
  console.log(arr.shift())
  // output: [2，3]
  // 数组删除第一个元素后的结果
  console.log(arr)
  

• unshift(element1, ..., elementN)

  将一个或多个元素添加到数组的开头，并返回该数组的新长度，原数组被修改为添加指定元素后的数组，了解该方法的详细使用及细节可见链接。

  let arr = [3]
  // output: 3
  // 该方法返回添加了元素后的新数组长度
  console.log(arr.unshift(1, 2))
  // output: [1, 2，3]
  // 数组在开头按顺序添加所传参数
  console.log(arr)
  

• sort([compareFunction])

  用原地算法对数组的元素进行排序，并返回数组。默认排序顺序是在将元素转换为字符串，然后比较它们的UTF-16代码单元值序列时构建的，了解该方法的详细使用及细节可见链接。

  let arr1 = [1, 2, 10, 3, 22]
  // output: [1, 10, 2, 22, 3]
  // 如果第一次使用sort可能会对这个结果感到奇怪，但正如
  // 上述所说默认排序在将元素转成字符串后进行排序的，因
  // 此，想要按照数字整型排序，则必须自己指定排序函数。
  console.log(arr1.sort())
  
  let arr2 = [1, 2, 10, 3, 22]
  // output: [1, 2, 3, 10, 22]
  // 在自己设置了排序方式后，可以发现结果符合了预期，至
  // 于所传函数的语法问题以及如果自己编写指定的排序方式，
  // 不是本篇博客所要讨论的，大家可以多自行查阅资料
  console.log(arr2.sort((i, j) => i - j))
  

• reverse()

  将数组中元素的位置颠倒，并返回该数组。了解该方法的详细使用及细节可见链接。

  let arr = [1, 2, 11, 3]
  // output: [3, 11, 2, 1]
  // 返回数组颠倒后的结果
  console.log(arr.reverse())
  

总结

本文主要介绍了 Js 中的数组修改器的方法，其中splice()可以说是需要重点掌握的，以上便是本文的全部内容，如有错误请您指出，希望能得到您的指正，之后还会讲剩下的访问方法和迭代方法，敬请期待~

参考链接

• Array - JavaScript | MDN
• JavaScript Array Methods
• ECMAScript 6入门