JS?Array方法詳解之如何區(qū)分slice和splice
更新時間：2025年06月16日 10:50:05 作者：要加油哦～
在JavaScript中splice()和slice()是兩個用于操作數(shù)組的方法,盡管它們的名字相似,但功能和用途卻截然不同,這篇文章主要介紹了JS?Array方法詳解之如何區(qū)分slice和splice,需要的朋友可以參考下
省流總結(jié)：
slice(起, 終)，切片 ，復(fù)制，返回新數(shù)組，不改原數(shù)組
splice(起, 刪幾個, 插入哪幾個)，增刪改，改 原數(shù)組，返回被改后的原數(shù)組。
一、 slice()：不改變原數(shù)組 ，返回“切片”
功能：
從原數(shù)組中提取部分元素，返回一個新數(shù)組，原數(shù)組不變。
語法：
array.slice(start, end)
start：起始索引（包含）end：結(jié)束索引（不包含）
例子：
const arr = [10, 20, 30, 40, 50]; const newArr = arr.slice(1, 4); console.log(newArr); // [20, 30, 40] console.log(arr); // 原數(shù)組不變 [10, 20, 30, 40, 50]
特點(diǎn)：
適合“復(fù)制數(shù)組”：
const copy = arr.slice();不破壞原數(shù)組，返回值是新的數(shù)組
二、splice()：直接修改原數(shù)組
功能：
刪除元素
插入元素
替換元素
語法： array.splice(起始索引, 刪除數(shù)量, 插入的新元素)
array.splice(start, deleteCount, item1, item2, ...)
start：開始修改的位置索引deleteCount：要刪除的元素數(shù)量item1...：要插入的新元素（可選）
刪除元素示例：
const arr = [1, 2, 3, 4, 5]; arr.splice(2, 2); // 從索引 2 開始刪除 2 個元素 console.log(arr); // [1, 2, 5]
插入元素示例：
const arr = [1, 2, 5]; arr.splice(2, 0, 3, 4); // 在索引 2 位置插入 3 和 4 console.log(arr); // [1, 2, 3, 4, 5]
替換元素示例：
const arr = [1, 2, 3]; arr.splice(1, 1, 'a', 'b'); // 把索引1的 1 個元素?fù)Q成 'a' 和 'b' console.log(arr); // [1, 'a', 'b', 3]
特點(diǎn)：
原地修改原數(shù)組；
返回值是被刪除的元素組成的新數(shù)組。
slice vs splice 對比表：
| 特性 | slice() | splice() |
|---|---|---|
| 原數(shù)組是否改變 | ? 否（不改變） | ? 是（原地修改） |
| 返回值 | 提取的新數(shù)組 | 被刪除的元素數(shù)組 |
| 用于 | 拷貝、截取 | 刪除、插入、替換 |
| 是否支持插入 | ? 不支持 | ? 支持 |
常用通用寫法總結(jié)：
拷貝數(shù)組：
const newArr = arr.slice();
提取最后三個元素：
const last3 = arr.slice(-3);
清空數(shù)組（splice）：
arr.splice(0, arr.length); // 原數(shù)組變?yōu)榭?
插入新元素到中間：
arr.splice(2, 0, '新元素');
總結(jié)
到此這篇關(guān)于JS Array方法詳解之如何區(qū)分slice和splice的文章就介紹到這了,更多相關(guān)JS Array方法區(qū)分slice和splice內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
一個實用的簡單的鼠標(biāo)劃過切換效果,附帶ie6兼容png js2010-06-06
解決bootstrap模態(tài)框數(shù)據(jù)緩存的問題方法
今天小編就為大家分享一篇解決bootstrap模態(tài)框數(shù)據(jù)緩存的問題方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08
JavaScript中的offsetWidth、clientWidth、scrollWidth等一系列屬性詳解
在JavaScript編程中,offsetWidth是一種用于獲取元素寬度的屬性,下面這篇文章主要介紹了JavaScript中的offsetWidth、clientWidth、scrollWidth等一系列屬性的相關(guān)資料,需要的朋友可以參考下2025-06-06
下面小編就為大家?guī)硪黄狫S正則替換掉小括號及內(nèi)容的方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-11-11
這篇文章主要給大家介紹了關(guān)于Three.js入門之hello world以及如何繪制線的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧。2017-09-09
這篇文章介紹了javascript中類型判斷的最佳方式，文中通過示例代碼介紹的非常詳細(xì)。對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-06-06
前端根據(jù)鏈接生成二維碼的方案及相關(guān)常用API
這篇文章主要介紹了qrcode插件的使用方法,包括ES6/ES7示例、常用API及Vue示例,同時還討論了二維碼的優(yōu)點(diǎn)和缺點(diǎn),文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2025-01-01
當(dāng)點(diǎn)擊元素時，會發(fā)生 click 事件。當(dāng)鼠標(biāo)指針停留在元素上方，然后按下并松開鼠標(biāo)左鍵時，就會發(fā)生一次 click。click() 方法觸發(fā) click 事件，或規(guī)定當(dāng)發(fā)生 click 事件時運(yùn)行的函數(shù)。2015-06-06
才發(fā)現(xiàn)的超鏈接js導(dǎo)致網(wǎng)頁中GIF動畫停止的解決方法
才發(fā)現(xiàn)的超鏈接js導(dǎo)致網(wǎng)頁中GIF動畫停止的解決方法...2007-11-11
js簡單實現(xiàn)讓文本框內(nèi)容逐個字的顯示出來
逐個字顯示效果就像是打印機(jī)一樣，在某些情況下起到強(qiáng)調(diào)作用，下面有個不錯的示例，大家可以學(xué)習(xí)下2013-10-10