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]
2.1 splice 实现数组删除元素
const arr = [0,1,2,3,4,5,6];
arr.splice(3,3);//在下标3的位置删除3个元素
console.log(arr);//[0,1,2,6]
2.2 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]
2.3 splice 在 vue 中的运用
由于 vue2 的数据响应式是通过 Object.defineProperty()方法中的 getter、setter 实现的,当我们进行对象属性的动态增加或删除时,将无法监听;所以使用 vue2 中使用$set、$delete来解决了该问题。
- 当你利用索引直接设置一个数组项时,例如: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)
码字不易,觉得有帮助的朋友点赞,关注走一波。
如果对本文存在疑惑,可在评论区讨论,欢迎大家指正文中的错误观点。