定義：

splice() 方法向/從數(shù)組中添加/刪除項(xiàng)目，然后返回被刪除的項(xiàng)目。

注釋：

該方法會(huì)改變?cè)紨?shù)組。

參數(shù)解釋：

1.增加數(shù)據(jù)：

在本例中，我們將創(chuàng)建一個(gè)新數(shù)組，并向其添加一個(gè)元素：

<script type="text/javascript">var arr = new Array(6)arr[0] = "George"arr[1] = "John"arr[2] = "Thomas"arr[3] = "James"arr[4] = "Adrew"arr[5] = "Martin"document.write(arr + "<br />")arr.splice(2,0,"William")document.write(arr + "<br />")</script>

運(yùn)行結(jié)果：

George,John,Thomas,James,Adrew,MartinGeorge,John,William,Thomas,James,Adrew,Martin

2.刪除數(shù)據(jù)：

在本例中我們將刪除位于 index 2 的元素，并添加一個(gè)新元素來(lái)替代被刪除的元素：

<script type="text/javascript">var arr = new Array(6)arr[0] = "George"arr[1] = "John"arr[2] = "Thomas"arr[3] = "James"arr[4] = "Adrew"arr[5] = "Martin"document.write(arr + "<br />")arr.splice(2,1,"William")document.write(arr)</script>運(yùn)行結(jié)果：George,John,Thomas,James,Adrew,MartinGeorge,John,William,James,Adrew,Martin

3.增加+刪除數(shù)據(jù) 同時(shí)進(jìn)行：

在本例中我們將刪除從 index 2 (“Thomas”) 開(kāi)始的三個(gè)元素，并添加一個(gè)新元素 (“William”) 來(lái)替代被刪除的元素：

<script type="text/javascript">var arr = new Array(6)arr[0] = "George"arr[1] = "John"arr[2] = "Thomas"arr[3] = "James"arr[4] = "Adrew"arr[5] = "Martin"document.write(arr + "<br />")arr.splice(2,3,"William")document.write(arr)</script>運(yùn)行結(jié)果：George,John,Thomas,James,Adrew,MartinGeorge,John,William,Martin

4.增加+刪除數(shù)據(jù) Vue實(shí)例：

在本例中我們點(diǎn)擊添加，添加新的數(shù)字，點(diǎn)擊刪除，刪除數(shù)組的數(shù)據(jù)

HTML

<div id="list-demo" class="demo"><button v-on:click="add">Add</button><button v-on:click="remove">Remove</button><transition-group name="list" tag="p"><span v-for="item in items" v-bind:key="item" class="list-item">{{ item }}</span></transition-group></div>

Vue

new Vue({el: '#list-demo',data: {items: [1,2,3,4,5,6,7,8,9],nextNum: 10},methods: {randomIndex: function () {return Math.floor(Math.random() * this.items.length)},add: function () {this.items.splice(this.randomIndex(), 0, this.nextNum++)},remove: function () {this.items.splice(this.randomIndex(), 1)},}})

CSS

.list-item {display: inline-block;margin-right: 10px;}.list-enter-active, .list-leave-active {transition: all 1s;}.list-enter, .list-leave-to/* .list-leave-active for below version 2.1.8 */ {opacity: 0;transform: translateY(30px);}

效果展示：

總結(jié)

以上是生活随笔為你收集整理的JavaScript splice() 方法使用的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。