Array.prototype.splice 的常见用法

273 阅读3分钟

Array.prototype.splice 的常见用法

本文主要讲解 splice 的全面用法,设计的知识点比较细致,共有以下五个部分

  • splice 函数的介绍
  • splice 实现数组增加元素
  • splice 实现数组删除元素
  • splice 实现数组改变元素的值
  • splice 在 vue 中的运用

1.splice 函数的介绍

MDN 官方解释:splice() 方法通过删除替换现有元素或者原地添加新的元素来修改数组,并以数组形式返回被修改的内容。此方法会改变原数组

注意点:

  • splice 方法与 slice、concat 不同,splice 会直接修改原数组。
  • splice 功能强大,可实现增删改操作。

1.1 语法格式

splice(start)//表示从 start 下标开始截取
splice(start, deleteCount)//表示从 start 下标开始截取 deleteCount 个元素
splice(start, deleteCount, item1)//表示从 start 下标开始截取 deleteCount 个元素,再插入一个元素
splice(start, deleteCount, item1, item2, itemN)//表示从 start 下标开始截取 deleteCount 个元素,再插入N个元素

1.2 参数

  • start 参数 值为整数,用于指定修改的开始位置(从 0 计数)。

    • 如果超出了数组的长度,则从数组末尾开始添加内容;
    • 如果是负值,则表示从数组末位开始的第几位(从 -1 计数),等价于 array.length-n;
      • 如果负数的绝对值大于数组的长度,则表示开始位置为第 0 位。
  • deleteCount 参数 值为整数,表示要移除的数组元素的个数。

    • 如果 deleteCount 被省略了或 deleteCount >= (array.length - start),那数组 start 之后的所有元素都会被删除(含第 start 位)。
    • 如果 deleteCount <= 0 ,则不移除元素。这种情况下,至少应添加一个新元素。
  • itemN 参数表示要添加进数组的元素,从 start 位置开始。

    • 如果不指定,则 splice() 将只删除数组元素。

1.3 返回值

返回值是数组类型

  • 如果只删除了一个元素,则返回只包含一个元素的数组。
  • 如果没有删除元素,则返回空数组。

2.splice 实现数组增加元素

const arr = [0,1,2,3,4,5,6];
arr.splice(3,0,7,7,7);//在下标3的位置删除0个元素,插入7,7,7
console.log(arr);//[0,1,2,7,7,7,3,4,5,6]

3.splice 实现数组删除元素

const arr = [0,1,2,3,4,5,6];
arr.splice(3,3);//在下标3的位置删除3个元素
console.log(arr);//[0,1,2,6]

4.splice 实现数组改变元素的值

const arr = [0,1,2,3,4,5,6];
arr.splice(3,3,7,7,7);//在下标3的位置删除3个元素,插入7,7,7
console.log(arr);//[0,1,2,7,7,7,6]

5.splice 在 vue 中的运用

由于 vue2 的数据响应式是通过 Object.defineProperty()方法中的 getter、setter 实现的,当我们进行对象属性的动态增加或删除时,将无法监听;所以使用 vue2 中使用$set$delete来解决了该问题。

所以 Vue 不能检测以下数组的变动

  • 当你利用索引直接设置一个数组项时,例如:vm.items[indexOfItem] = newValue
  • 当你修改数组的长度时,例如:vm.items.length = newLength

当然,数组也可使用$set、$delete 方法来解决,但为了更方便的操作数据,vue2 对数据原型上的部分方法进行了改写,使用以下方法就可以实现动态监听数组的元素。

  • push()
  • pop()
  • shift()
  • unshift()
  • splice()
  • sort()
  • reverse()

所以解决直接修改数组原素的问题,可以使用 splice:vm.items.splice(index,1,newValue) 解决修改数组的长度的问题,也可以使用 splice:vm.items.splice(newLength)

结语

这是我目前所了解的知识面中最好的解答,当然也有可能存在一定的误区。

所以如果对本文存在疑惑,可以在评论区留言,我会及时回复的,欢迎大家指出文中的错误观点。

最后码字不易,觉得有帮助的朋友点赞、收藏、关注走一波。