Javascript數(shù)組的?splice?方法詳細(xì)介紹
前言
splice() 方法通過(guò)刪除或替換現(xiàn)有元素或者原地添加新的元素來(lái)修改數(shù)組,并以數(shù)組形式返回被修改的內(nèi)容。此方法會(huì)改變?cè)瓟?shù)組。
語(yǔ)法格式：
array.splice(start[, deleteCount[, item1[, item2[, ...]]]])
參數(shù)：
start必選
指定修改的開始位置（從0計(jì)數(shù)）。如果超出了數(shù)組的長(zhǎng)度，則從數(shù)組末尾開始添加內(nèi)容；如果是負(fù)值，則表示從數(shù)組末位開始的第幾位（從-1計(jì)數(shù)，這意味著-n是倒數(shù)第n個(gè)元素并且等價(jià)于array.length-n）；如果負(fù)數(shù)的絕對(duì)值大于數(shù)組的長(zhǎng)度，則表示開始位置為第0位。
deleteCount可選
整數(shù)，表示要移除的數(shù)組元素的個(gè)數(shù)。如果 deleteCount 大于 start 之后的元素的總數(shù)，則從 start 后面的元素都將被刪除（含第 start 位）。如果 deleteCount 被省略了，或者它的值大于等于array.length - start(也就是說(shuō)，如果它大于或者等于start之后的所有元素的數(shù)量)，那么start之后數(shù)組的所有元素都會(huì)被刪除。如果 deleteCount 是 0 或者負(fù)數(shù)，則不移除元素。這種情況下，至少應(yīng)添加一個(gè)新元素。
item1, item2, *...*可選
要添加進(jìn)數(shù)組的元素,從start 位置開始。如果不指定，則 splice() 將只刪除數(shù)組元素。
返回值：由被刪除的元素組成的一個(gè)數(shù)組。如果只刪除了一個(gè)元素，則返回只包含一個(gè)元素的數(shù)組。如果沒(méi)有刪除元素，則返回空數(shù)組。
描述：如果添加進(jìn)數(shù)組的元素個(gè)數(shù)不等于被刪除的元素個(gè)數(shù)，數(shù)組的長(zhǎng)度會(huì)發(fā)生相應(yīng)的改變。
牛刀小試
現(xiàn)在有一個(gè)場(chǎng)景，我和我的室友們，現(xiàn)在在一個(gè)數(shù)組里面。 按照排行分別為: 老大，老二，老三, … ,老六, 小七.
這里 我用 下面的數(shù)組進(jìn)行舉例
var arr = ['Liu laoda','Li laoer','Wei laosan','Frank','Guan laowu','Yang laoliu','Li xiaoqi'];
刪除元素
刪除一個(gè)元素,刪除 某個(gè)位置的元素
var arr = ['Liu laoda','Li laoer','Wei laosan','Frank'];
// start 開始位置，從零開始 ， deleteCount 刪除個(gè)數(shù),從1 開始
// arr.splice(start,count)
// 刪除第0位置的一個(gè)元素
arr.splice(0,1);
console.log('arr=',arr);
可以看到 第0號(hào)位置 'Liu laoda' 被刪除了。
刪除前面兩個(gè)元素
var arr = ['Liu laoda','Li laoer','Wei laosan','Frank'];
// 刪除 前兩個(gè)元素
arr.splice(0,2);
console.log('arr=',arr); // ['Wei laosan', 'Frank']添加元素 并且替換元素
splice 刪除元素后 會(huì)返回被刪除的元素，返回類型是一個(gè) Array 類型.
example1
這里可以進(jìn)行元素替換，替換之后直接會(huì)影響 原來(lái)的數(shù)組的。返回的是刪除的數(shù)組元素
var arr = ['Liu laoda','Li laoer','Wei laosan','Frank'];
// 添加元素,刪除元素 用 Guan laowu 替換掉
// 從1號(hào)位置刪除一個(gè)元素，插入 元素 '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
刪除的個(gè)數(shù)和添加的元素的個(gè)數(shù)可以是不一樣的。
var arr = ['Liu laoda','Li laoer','Wei laosan','Frank'];
console.log('before arr=',arr);
// 刪除 idx=1的元素,并且 添加 在此位置 依次添加4個(gè)元素。
var removed = arr.splice(1, 1, 'Guan laowu','A','B','C');
console.log('arr=',arr);
console.log('removed=',removed); // removed.constructor.name == Array
example3
刪除元素的例子，如果沒(méi)有在第三個(gè)參數(shù)上有任何元素，則表示刪除元素了。
start 開始位置 ，deleteCount 刪除個(gè)數(shù)，如果刪除的個(gè)數(shù)大于數(shù)組本身長(zhǎng)度，則全部刪除了。
var arr = ['Liu laoda', 'Li laoer', 'Wei laosan', 'Frank','Guan Laowu','Yang Laoliu','Li xiaoqi'];
console.log('before arr=', arr);
// 從數(shù)組 下標(biāo)為2的位置, 刪除3個(gè)元素
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']注意這里刪除元素 直接對(duì)原來(lái)的數(shù)組修改， 返回值 就是刪除的元素的數(shù)組。
同時(shí)數(shù)組的length 屬性，維護(hù)成正確的值。
example4
如果刪除的元素個(gè)數(shù)，超過(guò)了后面到數(shù)組的最大長(zhǎng)度，則后面的元素全部被刪除了。
比如 從下標(biāo)2 后面有 5個(gè)元素， 此時(shí) deleteCount = 10 ,那么 后面的元素下標(biāo)>=2 ，全部刪除掉
var arr = ['Liu laoda', 'Li laoer', 'Wei laosan', 'Frank','Guan Laowu','Yang Laoliu','Li xiaoqi'];
console.log('before arr=', arr);
// 從數(shù)組 下標(biāo)為2的位置, 刪除10個(gè)元素
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’ 元素，
此時(shí) 只要把 deleteCount = 0,表示 刪除0個(gè)元素 ,表示在此位置上添加元素。
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); // []負(fù)數(shù)索引支持
刪除后面兩個(gè)元素
// 負(fù)數(shù)索引
var arr = ['Liu laoda', 'Li laoer', 'Wei laosan', 'Frank','Guan Laowu'];
console.log('before arr=', arr);
// 刪除后兩個(gè)元素
var removed = arr.splice(-2);
console.log('arr=', arr); // ['Liu laoda', 'Li laoer', 'Wei laosan']
console.log('removed=', removed); // ['Frank', 'Guan Laowu']刪除數(shù)組最后一個(gè)元素
var arr = ['Liu laoda', 'Li laoer', 'Wei laosan', 'Frank','Guan Laowu'];
console.log('before arr=', arr);
// 刪除后1個(gè)元素
var removed = arr.splice(-1);
console.log('arr=', arr); // ['Liu laoda', 'Li laoer', 'Wei laosan', 'Frank']
console.log('removed=', removed); // ['Guan Laowu']總結(jié)
array.splice(start[, deleteCount[, item1[, item2[, ...]]]]) 這個(gè)函數(shù) 可以實(shí)現(xiàn) 對(duì)數(shù)組的增加，刪除 ，替換。
start 就是開始的下標(biāo)位置，必選參數(shù).
deleteCount 刪除多少個(gè)元素 ， 如果沒(méi)有指定那么 一直會(huì)刪除到數(shù)組的最后位置。
最后 一個(gè)參數(shù)，表示 刪除后要填充其他的元素，如果要就寫入填入的元素即可。如果不需要，就是單純的刪除元素。
到此這篇關(guān)于Javascript數(shù)組的 splice 方法詳細(xì)介紹的文章就介紹到這了,更多相關(guān)Javascrip splice 內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
- Javascript數(shù)組的?forEach?方法詳細(xì)介紹
- JavaScript實(shí)現(xiàn)字符串轉(zhuǎn)數(shù)組的6種方法總結(jié)
- 20個(gè)常見(jiàn)的JavaScript數(shù)組操作總結(jié)
- 關(guān)于JavaScript中的數(shù)組方法和循環(huán)
- JavaScript中數(shù)組reduce()方法使用詳情
- js如何獲取對(duì)象在數(shù)組中的index
- JS實(shí)現(xiàn)數(shù)組/對(duì)象數(shù)組刪除其中某一項(xiàng)
- JS對(duì)象數(shù)組中如何匹配某個(gè)屬性值
- JavaScript數(shù)組操作總結(jié)
相關(guān)文章
一篇隨筆中網(wǎng)友 skyaspnet 問(wèn)我如何壓縮HTML，當(dāng)時(shí)回答是推薦他使用gzip，后來(lái)想想，要是能把所有的html，jsp(aspx)在運(yùn)行前都?jí)嚎s成1行未免不是一件好事啊。2010-06-06
JAVASCRIPT實(shí)現(xiàn)的WEB頁(yè)面跳轉(zhuǎn)以及頁(yè)面間傳值方法
在WEB頁(yè)面中，我們實(shí)現(xiàn)頁(yè)面跳轉(zhuǎn)的方法通常是用LINK,BUTTON LINK ,IMG LINK等等，由用戶點(diǎn)擊某處，然后直接由瀏覽器幫我們跳轉(zhuǎn)。2010-05-05
vuex是基于vuex.js的狀態(tài)管理工具,可以把它理解為一個(gè)倉(cāng)庫(kù),下面這篇文章主要給大家介紹了關(guān)于uniapp中如何使用vuex并持久化的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-06-06
網(wǎng)絡(luò)圖片延遲加載實(shí)現(xiàn)代碼 超越j(luò)query控件
原理是分段加載圖片，主要用于大型網(wǎng)站節(jié)省帶寬，可是他們提供的東西壓縮混淆看不清，還有的要基于什么雅虎的什么庫(kù)，總之是很麻煩的，JQ的控件倒是夠清晰了，只是還是沒(méi)有達(dá)到節(jié)省網(wǎng)絡(luò)帶寬的效果2010-03-03
js復(fù)制網(wǎng)頁(yè)內(nèi)容并兼容各主流瀏覽器的代碼
js 復(fù)制網(wǎng)頁(yè)內(nèi)容的方法代碼有很多不過(guò)要兼容各瀏覽器就不多了，下面有個(gè)不錯(cuò)的方法，大家可以嘗試操作下2013-12-12
javascript實(shí)現(xiàn)的時(shí)間格式加8小時(shí)功能示例
這篇文章主要介紹了javascript實(shí)現(xiàn)的時(shí)間格式加8小時(shí)功能,涉及javascript日期時(shí)間轉(zhuǎn)換與運(yùn)算相關(guān)操作技巧,需要的朋友可以參考下2019-06-06
這篇文章主要介紹了手把手15分鐘搭一個(gè)企業(yè)級(jí)腳手架，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-09-09
本文主要介紹了JavaScript中setTimeout()的具體用法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-04-04
JavaScript實(shí)現(xiàn)帶有子菜單和控件的slider輪播圖效果
本文通過(guò)實(shí)例代碼給大家介紹了基于js實(shí)現(xiàn)帶有子菜單和控件的slider輪播圖效果，本文附有圖片和示例代碼，非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友參考下吧2017-11-11
通過(guò)javascript進(jìn)行UTF-8編碼的實(shí)現(xiàn)方法
下面小編就為大家?guī)?lái)一篇通過(guò)javascript進(jìn)行UTF-8編碼的實(shí)現(xiàn)方法。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-06-06