JS?Array方法詳解之如何區(qū)分slice和splice
省流總結(jié):
slice(起, 終),切片 ,復(fù)制,返回新數(shù)組,不改原數(shù)組
splice(起, 刪幾個(gè), 插入哪幾個(gè)),增刪改,改 原數(shù)組,返回被改后的原數(shù)組。
一、 slice():不改變原數(shù)組 ,返回“切片”
功能:
從原數(shù)組中提取部分元素,返回一個(gè)新數(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
:要?jiǎng)h除的元素?cái)?shù)量item1...
:要插入的新元素(可選)
刪除元素示例:
const arr = [1, 2, 3, 4, 5]; arr.splice(2, 2); // 從索引 2 開始刪除 2 個(gè)元素 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 個(gè)元素?fù)Q成 'a' 和 'b' console.log(arr); // [1, 'a', 'b', 3]
特點(diǎn):
原地修改原數(shù)組;
返回值是被刪除的元素組成的新數(shù)組。
slice vs splice 對比表:
特性 | slice() | splice() |
---|---|---|
原數(shù)組是否改變 | ? 否(不改變) | ? 是(原地修改) |
返回值 | 提取的新數(shù)組 | 被刪除的元素?cái)?shù)組 |
用于 | 拷貝、截取 | 刪除、插入、替換 |
是否支持插入 | ? 不支持 | ? 支持 |
常用通用寫法總結(jié):
拷貝數(shù)組:
const newArr = arr.slice();
提取最后三個(gè)元素:
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)文章
js實(shí)現(xiàn)網(wǎng)頁同時(shí)進(jìn)行多個(gè)倒計(jì)時(shí)功能
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)網(wǎng)頁同時(shí)進(jìn)行多個(gè)倒計(jì)時(shí)功能,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2019-02-02JS 中forEach,for in、for of用法實(shí)例總結(jié)
這篇文章主要介紹了JS 中forEach,for in、for of用法,結(jié)合實(shí)例形式總結(jié)分析了JS 中forEach,for in、for of的基本功能、使用方法與相關(guān)注意事項(xiàng),需要的朋友可以參考下2023-05-05javascript實(shí)現(xiàn)Table排序的方法
這篇文章主要介紹了javascript實(shí)現(xiàn)Table排序的方法,涉及javascript針對表格對象的獲取與排序相關(guān)技巧,需要的朋友可以參考下2015-05-05echarts實(shí)現(xiàn)晶體球面投影的實(shí)例教程
這篇文章主要給大家介紹了關(guān)于echarts實(shí)現(xiàn)晶體球面投影的相關(guān)資料,文中介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-10-10一個(gè)鼠標(biāo)移動滑出層效果的實(shí)現(xiàn)代碼
一個(gè)鼠標(biāo)移動滑出層的代碼,根據(jù)網(wǎng)上的視頻教程學(xué)習(xí)的,這也算是第一次練手吧,鼠標(biāo)靠近復(fù)選框的時(shí)候,就會顯示出一個(gè)層,移開則消失。2011-08-08uniapp 微信默認(rèn)地圖選點(diǎn)功能實(shí)現(xiàn)
這篇文章主要介紹了uniapp 微信默認(rèn)地圖選點(diǎn)功能實(shí)現(xiàn),本文通過實(shí)例代碼效果圖展示給大家介紹的非常詳細(xì),感興趣的朋友跟隨小編一起看看吧2024-07-07js 實(shí)現(xiàn)無干擾陰影效果 簡單好用(附文件下載)
js實(shí)現(xiàn)無干擾陰影效果,簡單好用,需要的朋友可以參考下。2009-12-12