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è)常見的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)文章
本篇文章主要是對(duì)js數(shù)組去重的三種常用方法進(jìn)行了總結(jié)介紹，需要的朋友可以過(guò)來(lái)參考下，希望對(duì)大家有所幫助2014-01-01
WebSocket最大特點(diǎn)就是服務(wù)器可以主動(dòng)向客戶端推送信息,客戶端也可以主動(dòng)向服務(wù)器發(fā)送信息,是真正的雙向平等對(duì)話,屬于服務(wù)器推送技術(shù)的一種,下面這篇文章主要給大家介紹了關(guān)于如何優(yōu)雅的使用WebSocket的相關(guān)資料,需要的朋友可以參考下2022-05-05
這篇文章主要介紹了Javascript中數(shù)組方法匯總(推薦),需要的朋友可以參考下2015-04-04
微信小程序開發(fā)之圓形菜單 仿建行圓形菜單實(shí)例
本篇文章主要介紹了微信小程序開發(fā)之圓形菜單 仿建行圓形菜單實(shí)例，具有一定的參考價(jià)值，有需要的可以了解一下。2016-12-12
js 拖拽翻頁(yè)2009-04-04
Js模塊打包exports require import的用法和區(qū)別
這篇文章主要介紹了Js模塊打包exports require import的用法和區(qū)別，對(duì)模塊打包感興趣的同學(xué)，可以參考下2021-05-05
js實(shí)現(xiàn)定時(shí)進(jìn)度條完成后切換圖片
這篇文章主要介紹了js實(shí)現(xiàn)定時(shí)進(jìn)度條,進(jìn)度100%以后可以切換圖片，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-01-01
classList 是一個(gè)非常實(shí)用的工具,可以讓我們輕松地操作元素的類名,在使用 classList 時(shí),我們可以通過(guò) add、remove、toggle 和 contains 等方法來(lái)添加、刪除、切換和檢查類名,接下來(lái)我們?cè)敿?xì)學(xué)習(xí)一下classList的使用方法以及相關(guān)方法,感興趣的朋友一起看看吧2023-10-10
在這篇文章中,我們?cè)敿?xì)介紹了 ElementUI 的 el-switch 組件,從基本用法到高級(jí)應(yīng)用,以及其背后的實(shí)現(xiàn)原理,需要的朋友可以參考下2024-08-08
JavaScript實(shí)現(xiàn)同時(shí)調(diào)用多個(gè)函數(shù)的方法
這篇文章主要介紹了JavaScript實(shí)現(xiàn)同時(shí)調(diào)用多個(gè)函數(shù)的方法,以一個(gè)簡(jiǎn)單實(shí)例分析了JavaScript同時(shí)調(diào)用兩個(gè)函數(shù)的實(shí)現(xiàn)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-11-11