JavaScript?刪除數(shù)組元素的方法
本文介紹JavaScript 刪除數(shù)組中的元素的六大方法，分為如下兩大類
- 操作方法改變了原數(shù)組 - 4 種
- 操作方法不改變原數(shù)組 - 2 種
一、4 種 改變原數(shù)組的操作方法
1.shift()- 隊(duì)列方法
用于刪除數(shù)組中第一個元素，即從左邊開始的第一個元素，該操作會影響到數(shù)組本身，改變數(shù)組原來的長度
let arr = [1,2,3,4]; arr.shift();//刪除第一個元素 arr => [2,3,4]
2. pop() - 棧方法
用于刪除數(shù)組中最后一個元素，即從右邊開始的第一個元素，該操作會影響到數(shù)組本身，改變數(shù)組原來的長度。
let arr = [1,2,3,4]; arr.pop();//刪除最后一個元素 arr => [1,2,3]
3. splice() 可以刪除多個連續(xù)的元素
該方法接收兩個參數(shù)，第一個參數(shù)是要刪除的元素下標(biāo)，第二個參數(shù)是從要刪除的下標(biāo)開始刪除幾個元素；
let arr = [1,2,3,4]; arr.splice(arr.indexOf(1),2);//刪除元素值是 1的下標(biāo)開始的2個元素 arr => [3,4]
4. delete() 可以刪除指定元素-特殊的刪除操作
delete(arr[0]) 該方法可以刪除 arr[0] 的值，但是arr 的 長度依舊是原來的長度，只是 arr[0] 被設(shè)置為了 ‘empty’ ，它的值變?yōu)榱藆ndefined。相當(dāng)于把指定元素的值設(shè)置為了undefined。
let arr = [1,2,3,4]; delete(arr[0]);// arr => [empty,2,3,4] arr[0] //=> undefined
二、2 種 不改變原數(shù)組，而是返回新對象的操作
1. slice() 方法 - 切片
slice() 方法 返回一個新的對象，不影響原數(shù)組，該方法有兩個入?yún)?，第一個參數(shù)是起始下標(biāo)，第二個參數(shù)是結(jié)束下標(biāo)的位置。截取的片段不包含第二個參數(shù)代表的下標(biāo)，如果參數(shù)為負(fù)值說明是從后面數(shù)倒數(shù)第幾個的位置。
let arr = [1,2,3,4]; console.log(arr.slice(1,2));//從下標(biāo) 1 開始截取到下標(biāo) 2 前面的片段，即 返回的是[2] console.log(arr.slice(-3,-1));//從倒數(shù)第三個開始截取到倒數(shù)第一個之前，即返回 [2,3] console.log(arr);//=>[1,2,3,4] 依舊不變 l
2. filter() 方法 - 數(shù)組的遍歷方法
可以通過 ES6 提供的 filter() 方法過濾掉指定值，返回一個新數(shù)組
let arr = [1,2,3,4]; let new_arr = arr.filter(item=>item != 2);// new_arr => [1,3,4] console.log(arr);// arr => [1,2,3,4]
到此這篇關(guān)于JavaScript 刪除數(shù)組元素的方法的文章就介紹到這了,更多相關(guān)JavaScript 刪除數(shù)組元素內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
在localStorage中存儲對象數(shù)組并讀取的方法
頻繁ajax請求導(dǎo)致頁面響應(yīng)變慢，所以考慮將數(shù)據(jù)存儲在window.storage中，這樣只需請求一次ajax，接下來通過本文給大家介紹了在localStorage中存儲對象數(shù)組并讀取的方法,需要的朋友可以參考下2016-09-09
大家瀏覽網(wǎng)頁的時(shí)候，見到過圖片跟隨鼠標(biāo)移動的js特效，效果非常好，是怎么實(shí)現(xiàn)的呢，實(shí)現(xiàn)這個功能很簡單，感興趣的朋友一起看看吧2015-11-11
這篇文章主要為大家介紹了jsPDF導(dǎo)出PDF寬大于高異常處理,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-08-08
js 實(shí)現(xiàn)無干擾陰影效果 簡單好用（附文件下載）
js實(shí)現(xiàn)無干擾陰影效果,簡單好用，需要的朋友可以參考下。2009-12-12
window.print()局部打印三種方式(小結(jié))
本文主要介紹了window.print()局部打印三種方式，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-06-06
微信小程序?qū)崿F(xiàn)的動態(tài)設(shè)置導(dǎo)航欄標(biāo)題功能示例
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)的動態(tài)設(shè)置導(dǎo)航欄標(biāo)題功能,結(jié)合實(shí)例形式分析了微信小程序使用wx.setNavigationBarTitle接口動態(tài)設(shè)置導(dǎo)航欄標(biāo)題的相關(guān)操作技巧,需要的朋友可以參考下2019-01-01
這篇文章主要為大家詳細(xì)介紹了原生js實(shí)現(xiàn)自定義滾動條，可點(diǎn)擊、拖動到達(dá)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-01-01
three.js利用卷積法如何實(shí)現(xiàn)物體描邊效果
這篇文章主要給大家介紹了關(guān)于three.js利用卷積法如何實(shí)現(xiàn)物體描邊效果的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家學(xué)習(xí)或者使用three.js具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2019-11-11
在web頁面中，我們經(jīng)常需要通過修改樣式（style）來達(dá)到更好的用戶體驗(yàn)，需要的朋友可以參考下。2010-10-10
JavaScript實(shí)現(xiàn)消消樂的源代碼
這篇文章主要介紹了JavaScript實(shí)現(xiàn)消消樂-源代碼,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2021-01-01