Javascript數(shù)組的?splice?方法詳細介紹
前言
splice() 方法通過刪除或替換現(xiàn)有元素或者原地添加新的元素來修改數(shù)組,并以數(shù)組形式返回被修改的內容。此方法會改變原數(shù)組。
語法格式：
array.splice(start[, deleteCount[, item1[, item2[, ...]]]])
參數(shù)：
start必選
指定修改的開始位置（從0計數(shù)）。如果超出了數(shù)組的長度，則從數(shù)組末尾開始添加內容；如果是負值，則表示從數(shù)組末位開始的第幾位（從-1計數(shù)，這意味著-n是倒數(shù)第n個元素并且等價于array.length-n）；如果負數(shù)的絕對值大于數(shù)組的長度，則表示開始位置為第0位。
deleteCount可選
整數(shù)，表示要移除的數(shù)組元素的個數(shù)。如果 deleteCount 大于 start 之后的元素的總數(shù)，則從 start 后面的元素都將被刪除（含第 start 位）。如果 deleteCount 被省略了，或者它的值大于等于array.length - start(也就是說，如果它大于或者等于start之后的所有元素的數(shù)量)，那么start之后數(shù)組的所有元素都會被刪除。如果 deleteCount 是 0 或者負數(shù)，則不移除元素。這種情況下，至少應添加一個新元素。
item1, item2, *...*可選
要添加進數(shù)組的元素,從start 位置開始。如果不指定，則 splice() 將只刪除數(shù)組元素。
返回值：由被刪除的元素組成的一個數(shù)組。如果只刪除了一個元素，則返回只包含一個元素的數(shù)組。如果沒有刪除元素，則返回空數(shù)組。
描述：如果添加進數(shù)組的元素個數(shù)不等于被刪除的元素個數(shù)，數(shù)組的長度會發(fā)生相應的改變。
牛刀小試
現(xiàn)在有一個場景，我和我的室友們，現(xiàn)在在一個數(shù)組里面。 按照排行分別為: 老大，老二，老三, … ,老六, 小七.
這里 我用 下面的數(shù)組進行舉例
var arr = ['Liu laoda','Li laoer','Wei laosan','Frank','Guan laowu','Yang laoliu','Li xiaoqi'];
刪除元素
刪除一個元素,刪除 某個位置的元素
var arr = ['Liu laoda','Li laoer','Wei laosan','Frank'];
// start 開始位置，從零開始 ， deleteCount 刪除個數(shù),從1 開始
// arr.splice(start,count)
// 刪除第0位置的一個元素
arr.splice(0,1);
console.log('arr=',arr);
可以看到 第0號位置 'Liu laoda' 被刪除了。
刪除前面兩個元素
var arr = ['Liu laoda','Li laoer','Wei laosan','Frank'];
// 刪除 前兩個元素
arr.splice(0,2);
console.log('arr=',arr); // ['Wei laosan', 'Frank']添加元素 并且替換元素
splice 刪除元素后 會返回被刪除的元素，返回類型是一個 Array 類型.
example1
這里可以進行元素替換，替換之后直接會影響 原來的數(shù)組的。返回的是刪除的數(shù)組元素
var arr = ['Liu laoda','Li laoer','Wei laosan','Frank'];
// 添加元素,刪除元素 用 Guan laowu 替換掉
// 從1號位置刪除一個元素，插入 元素 'Guan laowu'
// 返回被刪除的元素
console.log('before arr=',arr);
var removed = arr.splice(1, 1, 'Guan laowu');
console.log('arr=',arr);
console.log('removed=',removed); // removed.constructor.name == Array
example2
刪除的個數(shù)和添加的元素的個數(shù)可以是不一樣的。
var arr = ['Liu laoda','Li laoer','Wei laosan','Frank'];
console.log('before arr=',arr);
// 刪除 idx=1的元素,并且 添加 在此位置 依次添加4個元素。
var removed = arr.splice(1, 1, 'Guan laowu','A','B','C');
console.log('arr=',arr);
console.log('removed=',removed); // removed.constructor.name == Array
example3
刪除元素的例子，如果沒有在第三個參數(shù)上有任何元素，則表示刪除元素了。
start 開始位置 ，deleteCount 刪除個數(shù)，如果刪除的個數(shù)大于數(shù)組本身長度，則全部刪除了。
var arr = ['Liu laoda', 'Li laoer', 'Wei laosan', 'Frank','Guan Laowu','Yang Laoliu','Li xiaoqi'];
console.log('before arr=', arr);
// 從數(shù)組 下標為2的位置, 刪除3個元素
var removed = arr.splice(2, 3); // ['Wei laosan', 'Frank', 'Guan Laowu']
console.log('arr=', arr); //['Liu laoda', 'Li laoer', 'Yang Laoliu', 'Li xiaoqi']
console.log('removed=', removed);// ['Wei laosan', 'Frank', 'Guan Laowu']注意這里刪除元素 直接對原來的數(shù)組修改， 返回值 就是刪除的元素的數(shù)組。
同時數(shù)組的length 屬性，維護成正確的值。
example4
如果刪除的元素個數(shù)，超過了后面到數(shù)組的最大長度，則后面的元素全部被刪除了。
比如 從下標2 后面有 5個元素， 此時 deleteCount = 10 ,那么 后面的元素下標>=2 ，全部刪除掉
var arr = ['Liu laoda', 'Li laoer', 'Wei laosan', 'Frank','Guan Laowu','Yang Laoliu','Li xiaoqi'];
console.log('before arr=', arr);
// 從數(shù)組 下標為2的位置, 刪除10個元素
var removed = arr.splice(2, 10); // ['Wei laosan', 'Frank', 'Guan Laowu']
console.log('arr=', arr); // ['Liu laoda', 'Li laoer']
console.log('removed=', removed);// ['Wei laosan', 'Frank', 'Guan Laowu', 'Yang Laoliu', 'Li xiaoqi']添加元素
example1
在idx=2 的位置 添加 ‘Frank’ 元素，
此時 只要把 deleteCount = 0,表示 刪除0個元素 ,表示在此位置上添加元素。
var arr = ['Liu laoda','Li laoer','Wei laosan',];
console.log('before arr=',arr);
// 在 idex=2 的位置 添加 'Frank' 元素
var removed = arr.splice(2, 0,'Frank');
console.log('arr=',arr);
console.log('removed=',removed);
example2
在數(shù)組的頭部添加元素, Frank
var arr = ['Liu laoda','Li laoer','Wei laosan',];
console.log('before arr=',arr);
// 在 idex=0 的位置 添加 'Frank' 元素
var removed = arr.splice(0, 0,'Frank');
console.log('arr=',arr);
console.log('removed=',removed); // []在數(shù)組尾部添加元素, Frank
var arr = ['Liu laoda','Li laoer','Wei laosan'];
console.log('before arr=',arr);
// 在數(shù)組 尾部 添加 Frank
var removed = arr.splice(arr.length, 0,'Frank');
console.log('arr=',arr);
console.log('removed=',removed); // []負數(shù)索引支持
刪除后面兩個元素
// 負數(shù)索引
var arr = ['Liu laoda', 'Li laoer', 'Wei laosan', 'Frank','Guan Laowu'];
console.log('before arr=', arr);
// 刪除后兩個元素
var removed = arr.splice(-2);
console.log('arr=', arr); // ['Liu laoda', 'Li laoer', 'Wei laosan']
console.log('removed=', removed); // ['Frank', 'Guan Laowu']刪除數(shù)組最后一個元素
var arr = ['Liu laoda', 'Li laoer', 'Wei laosan', 'Frank','Guan Laowu'];
console.log('before arr=', arr);
// 刪除后1個元素
var removed = arr.splice(-1);
console.log('arr=', arr); // ['Liu laoda', 'Li laoer', 'Wei laosan', 'Frank']
console.log('removed=', removed); // ['Guan Laowu']總結
array.splice(start[, deleteCount[, item1[, item2[, ...]]]]) 這個函數(shù) 可以實現(xiàn) 對數(shù)組的增加，刪除 ，替換。
start 就是開始的下標位置，必選參數(shù).
deleteCount 刪除多少個元素 ， 如果沒有指定那么 一直會刪除到數(shù)組的最后位置。
最后 一個參數(shù)，表示 刪除后要填充其他的元素，如果要就寫入填入的元素即可。如果不需要，就是單純的刪除元素。
到此這篇關于Javascript數(shù)組的 splice 方法詳細介紹的文章就介紹到這了,更多相關Javascrip splice 內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
本篇文章主要是對js數(shù)組去重的三種常用方法進行了總結介紹，需要的朋友可以過來參考下，希望對大家有所幫助2014-01-01
WebSocket最大特點就是服務器可以主動向客戶端推送信息,客戶端也可以主動向服務器發(fā)送信息,是真正的雙向平等對話,屬于服務器推送技術的一種,下面這篇文章主要給大家介紹了關于如何優(yōu)雅的使用WebSocket的相關資料,需要的朋友可以參考下2022-05-05
這篇文章主要介紹了Javascript中數(shù)組方法匯總(推薦),需要的朋友可以參考下2015-04-04
本篇文章主要介紹了微信小程序開發(fā)之圓形菜單 仿建行圓形菜單實例，具有一定的參考價值，有需要的可以了解一下。2016-12-12
js 拖拽翻頁2009-04-04
Js模塊打包exports require import的用法和區(qū)別
這篇文章主要介紹了Js模塊打包exports require import的用法和區(qū)別，對模塊打包感興趣的同學，可以參考下2021-05-05
這篇文章主要介紹了js實現(xiàn)定時進度條,進度100%以后可以切換圖片，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-01-01
classList 是一個非常實用的工具,可以讓我們輕松地操作元素的類名,在使用 classList 時,我們可以通過 add、remove、toggle 和 contains 等方法來添加、刪除、切換和檢查類名,接下來我們詳細學習一下classList的使用方法以及相關方法,感興趣的朋友一起看看吧2023-10-10
在這篇文章中,我們詳細介紹了 ElementUI 的 el-switch 組件,從基本用法到高級應用,以及其背后的實現(xiàn)原理,需要的朋友可以參考下2024-08-08
JavaScript實現(xiàn)同時調用多個函數(shù)的方法
這篇文章主要介紹了JavaScript實現(xiàn)同時調用多個函數(shù)的方法,以一個簡單實例分析了JavaScript同時調用兩個函數(shù)的實現(xiàn)技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-11-11