詳解JavaScript中.splice()的用法
JavaScript Array splice() 方法詳解
Array.prototype.splice() 是 JavaScript 數(shù)組的核心方法,用于在指定位置添加/刪除元素,并返回被刪除的元素,同時(shí)直接修改原數(shù)組。其語(yǔ)法為:
array.splice(startIndex, deleteCount, item1, item2, ...)
參數(shù)說(shuō)明:
startIndex:操作起始位置(索引從 0 開(kāi)始)deleteCount:要?jiǎng)h除的元素?cái)?shù)量(若為 0 則不刪除)item1, item2...:要添加的新元素(可選)
使用示例
1. 刪除元素
let fruits = ['??', '??', '??', '??']; let removed = fruits.splice(1, 2); // 從索引1開(kāi)始刪除2個(gè)元素 console.log(fruits); // 輸出: ['??', '??'] (原數(shù)組被修改) console.log(removed); // 輸出: ['??', '??'] (返回被刪除元素)
2. 添加元素
let colors = ['red', 'green', 'blue']; colors.splice(1, 0, 'yellow', 'purple'); // 在索引1處添加元素 console.log(colors); // 輸出: ['red', 'yellow', 'purple', 'green', 'blue']
3. 替換元素
let numbers = [10, 20, 30, 40]; let replaced = numbers.splice(2, 1, 99); // 將索引2的元素替換為99 console.log(numbers); // 輸出: [10, 20, 99, 40] console.log(replaced); // 輸出: [30] (被替換的元素)
4. 刪除末尾元素
let arr = [1, 2, 3, 4, 5]; arr.splice(-2, 1); // 倒數(shù)第2位開(kāi)始刪除1個(gè)元素 console.log(arr); // 輸出: [1, 2, 3, 5]
關(guān)鍵特性
- 修改原數(shù)組:與
slice()不同,splice()直接改變?cè)瓟?shù)組 - 負(fù)索引支持:
startIndex可為負(fù)數(shù)(從末尾倒數(shù)) - 返回被刪除元素:始終返回?cái)?shù)組(無(wú)刪除時(shí)返回空數(shù)組)
- 高效操作:適合需要同時(shí)添加/刪除的場(chǎng)景
?? 注意:當(dāng) deleteCount 大于剩余元素?cái)?shù)時(shí),會(huì)刪除從起始位置到末尾的所有元素。
與 slice() 對(duì)比
方法 | 修改原數(shù)組 | 返回內(nèi)容 | 主要用途 |
splice() | ? | 被刪除的元素 | 添加/刪除元素 |
slice() | ? | 新數(shù)組(子數(shù)組) | 提取子數(shù)組 |
// 示例對(duì)比 let a = [1,2,3]; a.splice(0,1); // 返回 [1], a變?yōu)閇2,3] let b = [1,2,3]; b.slice(0,1); // 返回 [1], b仍為[1,2,3]
到此這篇關(guān)于詳解JavaScript中.splice()的用法的文章就介紹到這了,更多相關(guān)JavaScript .splice()內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
javascript在firefox下設(shè)為首頁(yè)的代碼
javascript在firefox下設(shè)為首頁(yè)的代碼...2007-09-09
深入理解JS中attribute和property的區(qū)別
property 和 attribute非常容易混淆,但實(shí)際上,二者是不同的東西,屬于不同的范疇,本文就詳細(xì)的介紹一下JS中attribute和property的區(qū)別 ,感興趣的可以了解一下2022-02-02
JS為什么說(shuō)async/await是generator的語(yǔ)法糖詳解
這篇文章主要給大家介紹了關(guān)于JS為什么說(shuō)async/await是generator的語(yǔ)法糖的相關(guān)資料,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家學(xué)習(xí)或者使用JS具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-07-07
javascript event在FF和IE的兼容傳參心得(絕對(duì)好用)
event在IE和FF不兼,下面為大家分享的是javascript event在FF和IE的兼容傳參心得,需要的朋友可以參考下2014-07-07
JS實(shí)現(xiàn)文檔加載完成后執(zhí)行代碼
本文給大家講述的是使用javascript實(shí)現(xiàn)文檔加載完成后再執(zhí)行代碼的方法和示例,非常簡(jiǎn)單實(shí)用,有需要的小伙伴可以參考下。2015-07-07
js實(shí)現(xiàn)開(kāi)啟密碼大寫(xiě)提示
本文主要分享了js實(shí)現(xiàn)開(kāi)啟密碼大寫(xiě)提示的實(shí)例,代碼簡(jiǎn)單易懂。需要的朋友一起來(lái)看下吧2016-12-12
JS組件系列之Bootstrap Icon圖標(biāo)選擇組件
這篇文章給大家介紹js組件系列之Bootstrap Icon圖標(biāo)選擇組件,對(duì)bootstrap icon圖標(biāo)相關(guān)知識(shí)感興趣的朋友一起學(xué)習(xí)吧2016-01-01

