Vue进阶（五十九）：ES数组操作：使用splice方法实现数组中删除、替换、增加指定元素

注：该方法会改变原始数组。

ES6从数组中删除指定元素

findIndex()方法返回数组中满足提供的测试函数的第一个元素的索引。否则返回-1。

 arr.splice(arr.findIndex(item => item.id === data.id), 1)

  

 

  
1
 

1. js中的splice方法

splice(index,len,[item]) 

  

 

  
1
 

splice有3个参数，它也可以用来替换/删除/添加数组内某一个或者几个值。

• index:数组开始下标
• len: 替换/删除的长度
• item:替换的值，删除操作的话 item为空

如：arr = ['a','b','c','d']

删除 ---- item不设置

arr.splice(1,1) //['a','c','d'] 删除起始下标为1，长度为1的一个值，len设置的1，如果为0，则数组不变
arr.splice(1,2) //['a','d'] 删除起始下标为1，长度为2的一个值，len设置的2

  

 

  
1
  
2
 

替换 ---- item为替换的值

arr.splice(1,1,'ttt') //['a','ttt','c','d'] 替换起始下标为1，长度为1的一个值为‘ttt’，len设置的1
arr.splice(1,2,'ttt') //['a','ttt','d'] 替换起始下标为1，长度为2的两个值为‘ttt’，len设置的1

  

 

  
1
  
2
 

添加 ---- len设置为0，item为添加的值

arr.splice(1,0,'ttt') //['a','ttt','b','c','d'] 表示在下标为1处添加一项‘ttt’

  

 

  
1
 

附 更多数组操作方法

• 《Vue进阶（五十七）：ES数组操作：find(), findIndex(), filter(), forEach(), some(), every(), map(), reduce()》
• 《Vue进阶（幺叁贰）：ES数组操作：数组合并》
• 《Vue进阶（八十）：ES数组操作：push、pop、shift、unshift、splice、delete、concat、split、sort、reverse、slice、map等》

文章来源: shq5785.blog.csdn.net，作者：No Silver Bullet，版权归原作者所有，如需转载，请联系作者。

原文链接：shq5785.blog.csdn.net/article/details/93920284