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))
    

注意

对于方法中的三个参数targetstartend均可为负数,假如target为负且对应绝对值小于数组长度,那么可以直接将target替换为target + arr.length,结果是一样的,而当target大于数组的长度时,则target等同于0,对于startend也是一样,此外当start的值大于等于end时,结果仍为原数组。以下方法除了特别说明的,凡有可指定startend来确定范围的,均同此。为了讨论方便,以下方法不再讨论参数为负的情况(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入门

你可能感兴趣的:(Js,js,javascript)