詳解JavaScript中.splice()的用法
更新時間：2025年10月11日 10:13:46 作者：搖滾俠
Array.prototype.splice()是JavaScript中用于在數(shù)組的指定位置添加或刪除元素的方法,同時直接修改原數(shù)組,本文就來詳細(xì)的介紹一下.splice()的用法小結(jié),感興趣的可以了解一下
JavaScript Array splice() 方法詳解
Array.prototype.splice() 是 JavaScript 數(shù)組的核心方法，用于在指定位置添加/刪除元素，并返回被刪除的元素，同時直接修改原數(shù)組。其語法為：
array.splice(startIndex, deleteCount, item1, item2, ...)
參數(shù)說明：
startIndex：操作起始位置（索引從 0 開始）deleteCount：要刪除的元素數(shù)量（若為 0 則不刪除）item1, item2...：要添加的新元素（可選）
使用示例
1. 刪除元素
let fruits = ['??', '??', '??', '??']; let removed = fruits.splice(1, 2); // 從索引1開始刪除2個元素 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位開始刪除1個元素 console.log(arr); // 輸出: [1, 2, 3, 5]
關(guān)鍵特性
- 修改原數(shù)組：與
slice()不同，splice()直接改變原數(shù)組 - 負(fù)索引支持：
startIndex可為負(fù)數(shù)（從末尾倒數(shù)） - 返回被刪除元素：始終返回數(shù)組（無刪除時返回空數(shù)組）
- 高效操作：適合需要同時添加/刪除的場景
?? 注意：當(dāng) deleteCount 大于剩余元素數(shù)時，會刪除從起始位置到末尾的所有元素。
與 slice() 對比
方法 | 修改原數(shù)組 | 返回內(nèi)容 | 主要用途 |
splice() | ? | 被刪除的元素 | 添加/刪除元素 |
slice() | ? | 新數(shù)組（子數(shù)組） | 提取子數(shù)組 |
// 示例對比 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)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了JS版元素周期表實(shí)現(xiàn)方法,可實(shí)現(xiàn)基于javascript動態(tài)生成元素周期表的功能,點(diǎn)擊元素項(xiàng)可以在下方顯示對應(yīng)元素的各種常用屬性,需要的朋友可以參考下2015-08-08
這篇文章主要介紹了點(diǎn)評js異步加載的4種方式，幫助大家更全面的了解js異步加載方式，感興趣的小伙伴們可以參考一下2015-12-12
javascript在firefox下設(shè)為首頁的代碼
javascript在firefox下設(shè)為首頁的代碼...2007-09-09
深入理解JS中attribute和property的區(qū)別
property 和 attribute非常容易混淆，但實(shí)際上，二者是不同的東西，屬于不同的范疇，本文就詳細(xì)的介紹一下JS中attribute和property的區(qū)別 ，感興趣的可以了解一下2022-02-02
JS為什么說async/await是generator的語法糖詳解
這篇文章主要給大家介紹了關(guān)于JS為什么說async/await是generator的語法糖的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家學(xué)習(xí)或者使用JS具有一定的參考學(xué)習(xí)價值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2019-07-07
javascript event在FF和IE的兼容傳參心得(絕對好用)
event在IE和FF不兼，下面為大家分享的是javascript event在FF和IE的兼容傳參心得,需要的朋友可以參考下2014-07-07
JS實(shí)現(xiàn)文檔加載完成后執(zhí)行代碼
本文給大家講述的是使用javascript實(shí)現(xiàn)文檔加載完成后再執(zhí)行代碼的方法和示例，非常簡單實(shí)用，有需要的小伙伴可以參考下。2015-07-07
本文主要分享了js實(shí)現(xiàn)開啟密碼大寫提示的實(shí)例，代碼簡單易懂。需要的朋友一起來看下吧2016-12-12
這篇文章主要介紹了js識別uc瀏覽器的代碼,需要的朋友可以參考下2015-11-11
JS組件系列之Bootstrap Icon圖標(biāo)選擇組件
這篇文章給大家介紹js組件系列之Bootstrap Icon圖標(biāo)選擇組件，對bootstrap icon圖標(biāo)相關(guān)知識感興趣的朋友一起學(xué)習(xí)吧2016-01-01