定義：

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

注釋：

該方法會改變原始數組。

參數解釋：

1.增加數據：

在本例中，我們將創建一個新數組，并向其添加一個元素：

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

運行結果：

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

2.刪除數據：

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

<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>運行結果：George,John,Thomas,James,Adrew,MartinGeorge,John,William,James,Adrew,Martin

3.增加+刪除數據 同時進行：

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

<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>運行結果：George,John,Thomas,James,Adrew,MartinGeorge,John,William,Martin

4.增加+刪除數據 Vue實例：

在本例中我們點擊添加，添加新的數字，點擊刪除，刪除數組的數據

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

效果展示：

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。