詳解JavaScript中.splice()的用法
更新時間：2025年10月11日 10:13:46 作者：搖滾俠
Array.prototype.splice()是JavaScript中用于在數(shù)組的指定位置添加或刪除元素的方法,同時直接修改原數(shù)組,本文就來詳細的介紹一下.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ù)組 - 負索引支持：
startIndex可為負數(shù)（從末尾倒數(shù)） - 返回被刪除元素：始終返回數(shù)組（無刪除時返回空數(shù)組）
- 高效操作：適合需要同時添加/刪除的場景
?? 注意：當 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)文章
這篇文章主要介紹了Javascript幻燈片播放功能實現(xiàn)過程解析,文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2020-05-05
js+html5實現(xiàn)canvas繪制簡單矩形的方法
這篇文章主要介紹了js+html5實現(xiàn)canvas繪制簡單矩形的方法,涉及html5圖形繪制的基本技巧,需要的朋友可以參考下2015-06-06
我們在日常生活中無論是坐公交還是點餐,都會接觸各種各樣的小程序,下面這篇文章主要給大家介紹了關(guān)于小程序中權(quán)限設(shè)計的相關(guān)資料,文中通過圖文介紹的非常詳細,需要的朋友可以參考下2022-09-09
ZeroClipboard 是國外大神開發(fā)的一個用于剪貼板復(fù)制的 JS 插件，它是基于 Flash 來實現(xiàn)跨瀏覽器的復(fù)制功能的。當我們使用 ZeroClipboard 的時候，它會悄悄隱藏一個小小的 Flash 影片(swf)，不會對我們的用戶界面造成影響。我們只需要借助它實現(xiàn)復(fù)制功能就行了。2016-03-03
這篇文章主要介紹了Bootstrap Validator 表單驗證的相關(guān)資料,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2016-07-07
這篇文章主要介紹了JS 實現(xiàn)獲取驗證碼 倒計時功能,非常不錯，具有一定的參考借鑒價值，需要的朋友可以參考下2018-10-10
layui+ssm實現(xiàn)數(shù)據(jù)表格雙擊編輯更新數(shù)據(jù)功能
在使用layui加載后端數(shù)據(jù)請求時,對數(shù)據(jù)選項框進行雙擊即可實現(xiàn)數(shù)據(jù)的輸入編輯更改,本文結(jié)合示例代碼給大家介紹的非常詳細,對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友參考下吧2023-12-12
這篇文章主要介紹了微信小程序鏈接傳參并跳轉(zhuǎn)新頁面的相關(guān)資料,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2016-11-11
剛開始我以為是會跟平時使用onclick()一樣，沒想到最近在寫javascript入門ppt的時候發(fā)現(xiàn)了，原來自己太自以為是了！看來還有很多javascript的細節(jié)沒有掌握好啊2013-11-11
Ajax異步提交表單數(shù)據(jù)的說明及方法實例，需要的朋友可以參考一下2013-06-06