詳解JavaScript中7種常見刪除數(shù)組中指定元素的方法(含代碼)
在JavaScript中,有多種方法可以從數(shù)組中刪除指定的元素。以下是幾種常見的方法:
1.使用splice()方法
2.1 splice介紹
JavaScript的splice()
方法是一個(gè)非常強(qiáng)大的數(shù)組方法,它允許你同時(shí)從數(shù)組中刪除和添加元素。splice()
方法可以接受兩個(gè)參數(shù):開始修改數(shù)組的索引位置和要?jiǎng)h除的元素?cái)?shù)量。之后,你可以添加任意數(shù)量的新元素到該位置。
下面是splice()
方法的基本使用方法:
let arr = [1, 2, 3, 4, 5]; arr.splice(index, deleteCount, item1, ..., itemX);
參數(shù)說明:
index
(必需):開始修改數(shù)組的索引位置。如果為負(fù)值,則從數(shù)組尾部開始計(jì)算位置。deleteCount
(必需):要?jiǎng)h除的元素?cái)?shù)量。如果設(shè)置為0,則不會(huì)刪除任何元素。如果省略,則默認(rèn)刪除從index
位置到數(shù)組末尾的所有元素。item1, ..., itemX
(可選):要添加到數(shù)組的新元素。
注意:splice()方法會(huì)直接修改原始數(shù)組,并返回被刪除的元素(如果有)。如果沒有元素被刪除,則返回一個(gè)空數(shù)組。
2.2 代碼實(shí)現(xiàn)
splice()
方法可以同時(shí)從數(shù)組中刪除和添加元素。如果只提供了兩個(gè)參數(shù),那么它只會(huì)刪除元素。
let arr = [1, 2, 3, 4, 5]; let index = arr.indexOf(3); // 找到要?jiǎng)h除的元素的索引 if (index !== -1) { // 確保元素存在于數(shù)組中 arr.splice(index, 1); // 刪除一個(gè)元素 } console.log(arr); // 輸出: [1, 2, 4, 5]
2.使用filter()方法
2.1 filter介紹
JavaScript的filter()
方法是一個(gè)非常有用的數(shù)組方法,它創(chuàng)建一個(gè)新數(shù)組,新數(shù)組中的元素是通過檢查指定條件為真的元素。這個(gè)方法不會(huì)改變?cè)紨?shù)組。
這是filter()
方法的基本語(yǔ)法:
let newArray = arr.filter(callback(element[, index[, array]])[, thisArg])
參數(shù)說明:
callback
:必需。測(cè)試每個(gè)元素是否符合條件的函數(shù),該函數(shù)應(yīng)返回一個(gè)布爾值。thisArg
:可選。執(zhí)行 callback 函數(shù)時(shí)使用的 this 值。
回調(diào)函數(shù)callback
接收以下參數(shù):
element
:必需。數(shù)組中正在處理的當(dāng)前元素。index
(可選):數(shù)組中正在處理的當(dāng)前元素的索引。array
(可選):filter 被調(diào)用的數(shù)組。
回調(diào)函數(shù)callback
應(yīng)該返回一個(gè)布爾值,以指示元素是否應(yīng)包含在新數(shù)組中。如果返回 true
,則該元素將包含在新數(shù)組中;如果返回 false
,則不包含。
2.2 代碼實(shí)現(xiàn)
let arr = [1, 2, 3, 4, 5]; let newArr = arr.filter(item => item !== 3); // 過濾掉等于3的元素 console.log(newArr); // 輸出: [1, 2, 4, 5]
3.使用delete運(yùn)算符
3.1 delete介紹
JavaScript 中的 delete
運(yùn)算符用于刪除對(duì)象的屬性或數(shù)組的元素。
當(dāng)用于對(duì)象時(shí),delete
運(yùn)算符將刪除對(duì)象的指定屬性。如果該屬性存在,則該屬性及其相關(guān)聯(lián)的值將被完全刪除。如果該屬性不存在,則 delete
運(yùn)算符將返回 false
。
需要注意的是,delete
運(yùn)算符只會(huì)刪除引用類型的屬性或元素,而不能刪除基本類型的屬性或元素。此外,刪除后的屬性或元素將被設(shè)置為 undefined
,而不是完全消失。
3.2 代碼實(shí)現(xiàn)
delete
運(yùn)算符可以刪除數(shù)組的元素,但是不會(huì)影響其他數(shù)組元素,也不會(huì)改變數(shù)組的長(zhǎng)度。
let arr = [1, 2, 3, 4, 5]; let index = arr.indexOf(3); // 找到要?jiǎng)h除的元素的索引 if (index !== -1) { // 確保元素存在于數(shù)組中 delete arr[index]; // 刪除元素 } console.log(arr); // 輸出: [1, 2, undefined, 4, 5]
4.使用for循環(huán)和splice()方法
我們可以使用 for
循環(huán)遍歷數(shù)組,并在遍歷過程中使用 splice()
方法刪除元素。
let arr = [1, 2, 3, 4, 5]; for (let i = 0; i < arr.length; i++) { if (arr[i] === 3) { // 如果元素等于3,則刪除它 arr.splice(i, 1); // 使用splice()刪除元素,然后減小i以跳過被刪除的元素 i--; // 因?yàn)槲覀儎h除了一個(gè)元素,所以我們需要減小索引以保持正確的遍歷順序 } } console.log(arr); // 輸出: [1, 2, 4, 5]
5.使用includes()方法
5.1 includes介紹
includes()
是 JavaScript 中的一個(gè)數(shù)組方法,用于檢查數(shù)組中是否包含特定的元素。如果數(shù)組包含該元素,則返回 true
,否則返回 false
。
語(yǔ)法:
arr.includes(searchElement[, fromIndex])
searchElement
:必需。要在數(shù)組中查找的值。fromIndex
:(可選)開始搜索的位置。如果該索引值大于或等于數(shù)組長(zhǎng)度,則返回false
。如果該索引值小于0,則將其視為0。默認(rèn)值為 0。
注意事項(xiàng):
includes()
方法對(duì)NaN的處理與==
和===
運(yùn)算符不同。例如,[NaN].includes(NaN)
的結(jié)果為false
。- 與
indexOf()
方法相比,includes()
方法在查找NaN
時(shí)表現(xiàn)得更準(zhǔn)確。例如,[NaN].indexOf(NaN)
的結(jié)果為-1
,而[NaN].includes(NaN)
的結(jié)果為false
。
5.2 代碼實(shí)現(xiàn)
我們可以使用 includes()
方法檢查數(shù)組中是否存在指定的元素,如果存在,則使用 splice()
方法刪除它。這種方法可以避免在循環(huán)中使用復(fù)雜的條件判斷。
let arr = [1, 2, 3, 4, 5]; let itemToRemove = 3; // 要?jiǎng)h除的元素 let index = arr.indexOf(itemToRemove); // 在數(shù)組中查找要?jiǎng)h除的元素的索引 if (index !== -1) { // 如果元素存在于數(shù)組中,則刪除它 arr.splice(index, 1); // 使用splice()刪除元素,并返回被刪除的元素(雖然在這個(gè)例子中我們不需要它) } console.log(arr); // 輸出: [1, 2, 4, 5]
6.使用shift()或pop()方法
6.1 shift介紹
shift()
是 JavaScript 中的一個(gè)數(shù)組方法,用于刪除并返回?cái)?shù)組的第一個(gè)元素。
語(yǔ)法:
arr.shift()
注意事項(xiàng):
shift()
方法會(huì)改變?cè)瓟?shù)組。- 如果數(shù)組為空,則
shift()
方法不返回任何值,也不更改數(shù)組。
6.2 代碼實(shí)現(xiàn)
shift()
方法刪除并返回?cái)?shù)組的第一個(gè)元素,而 pop()
方法刪除并返回?cái)?shù)組的最后一個(gè)元素。
let arr = [1, 2, 3, 4, 5]; let itemToRemove = 3; // 要?jiǎng)h除的元素 arr.splice(arr.indexOf(itemToRemove), 1); // 刪除元素 console.log(arr); // 輸出: [1, 2, 4, 5]
7.使用map()方法
7.1 map介紹
map()
是 JavaScript 中的一個(gè)數(shù)組方法,用于創(chuàng)建一個(gè)新數(shù)組,其結(jié)果是該數(shù)組中的每個(gè)元素都調(diào)用一個(gè)提供的函數(shù)后的結(jié)果。
語(yǔ)法:
arr.map(callback(currentValue, index, array)[, thisArg])
callback
:必需。為數(shù)組中每個(gè)元素執(zhí)行的函數(shù),并返回一個(gè)由回調(diào)函數(shù)返回的結(jié)果組成的數(shù)組。thisArg
:(可選)執(zhí)行回調(diào)函數(shù)時(shí)使用的 this 值。
注意事項(xiàng):
map()
方法不會(huì)改變?cè)紨?shù)組。- 如果提供的回調(diào)函數(shù)在某個(gè)位置返回
undefined
,則該位置在新數(shù)組中將被設(shè)置為undefined
。
7.2 代碼實(shí)現(xiàn)
map()
方法創(chuàng)建一個(gè)新數(shù)組,其結(jié)果是該數(shù)組中的每個(gè)元素都調(diào)用一個(gè)提供的函數(shù)后的結(jié)果。如果提供的函數(shù)在某個(gè)位置返回 false
,則該位置的元素不會(huì)被包括在新數(shù)組中。
let arr = [1, 2, 3, 4, 5]; let newArr = [...arr.map(item => item !== 3 ? item : [])].flat(); console.log(newArr); // 輸出: [1, 2, 4, 5]
到此這篇關(guān)于詳解JavaScript中7種常見刪除數(shù)組中指定元素的方法(含代碼)的文章就介紹到這了,更多相關(guān)js刪除數(shù)組指定元素內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
- JavaScript刪除數(shù)組中指定元素5種方法例子
- js刪除數(shù)組中指定元素的幾種方式
- JS實(shí)現(xiàn)數(shù)組刪除指定元素功能示例
- 詳解js刪除數(shù)組中的指定元素
- JS實(shí)現(xiàn)根據(jù)指定值刪除數(shù)組中的元素操作示例
- js從數(shù)組中刪除指定值(不是指定位置)的元素實(shí)現(xiàn)代碼
- 基于JavaScript實(shí)現(xiàn)移除(刪除)數(shù)組中指定元素
- JavaScript從數(shù)組中刪除指定值元素的方法
- javascript中刪除指定數(shù)組中指定的元素的代碼
- JS數(shù)組添加或刪除元素的三種方式示例詳解
相關(guān)文章
javascript實(shí)現(xiàn)貪吃蛇游戲(娛樂版)
這篇文章主要為大家詳細(xì)介紹了javascript實(shí)現(xiàn)貪吃蛇,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2020-08-08js 顯示日期時(shí)間的實(shí)例(時(shí)間過一秒加1)
下面小編就為大家?guī)硪黄猨s 顯示日期時(shí)間的實(shí)例(時(shí)間過一秒加1)。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-10-10利用JS響應(yīng)式修改vue實(shí)現(xiàn)頁(yè)面的input值
這篇文章主要給大家介紹了關(guān)于如何利用JS響應(yīng)式修改vue實(shí)現(xiàn)頁(yè)面的input值,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家學(xué)習(xí)或者使用JS具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2019-09-09詳解如何使用JSZip實(shí)現(xiàn)在瀏覽器中操作文件與文件夾
這篇文章主要介紹了如何使用JSZip實(shí)現(xiàn)在瀏覽器中操作文件與文件夾,文中的示例代碼講解詳細(xì),具有一定的借鑒價(jià)值,有需要的小伙伴可以參考一下2024-04-04JavaScript數(shù)據(jù)結(jié)構(gòu)與算法之二叉樹實(shí)現(xiàn)查找最小值、最大值、給定值算法示例
這篇文章主要介紹了JavaScript數(shù)據(jù)結(jié)構(gòu)與算法之二叉樹實(shí)現(xiàn)查找最小值、最大值、給定值算法,涉及javascript二叉樹定義、賦值、遍歷、查找等相關(guān)操作技巧,需要的朋友可以參考下2019-03-03js判斷瀏覽器類型及設(shè)備(移動(dòng)頁(yè)面開發(fā))
這篇文章主要介紹了js判斷瀏覽器類型及設(shè)備(移動(dòng)頁(yè)面開發(fā)),需要的朋友可以參考下2015-07-07