详解JavaScript中7种常见删除数组中指定元素的方法(含代码)

在JavaScript中，有多种方法可以从数组中删除指定的元素。以下是几种常见的方法：

1.使用splice()方法

2.1 splice介绍

JavaScript的splice()方法是一个非常强大的数组方法，它允许你同时从数组中删除和添加元素。splice()方法可以接受两个参数：开始修改数组的索引位置和要删除的元素数量。之后，你可以添加任意数量的新元素到该位置。

下面是splice()方法的基本使用方法：

let arr = [1, 2, 3, 4, 5];  
arr.splice(index, deleteCount, item1, ..., itemX);

参数说明：

• index（必需）：开始修改数组的索引位置。如果为负值，则从数组尾部开始计算位置。
• deleteCount（必需）：要删除的元素数量。如果设置为0，则不会删除任何元素。如果省略，则默认删除从index位置到数组末尾的所有元素。
• item1, ..., itemX（可选）：要添加到数组的新元素。

注意：splice()方法会直接修改原始数组，并返回被删除的元素（如果有）。如果没有元素被删除，则返回一个空数组。

2.2 代码实现

splice() 方法可以同时从数组中删除和添加元素。如果只提供了两个参数，那么它只会删除元素。

let arr = [1, 2, 3, 4, 5];  
let index = arr.indexOf(3); // 找到要删除的元素的索引  
if (index !== -1) { // 确保元素存在于数组中  
    arr.splice(index, 1); // 删除一个元素  
}  
console.log(arr); // 输出: [1, 2, 4, 5]

2.使用filter()方法

2.1 filter介绍

JavaScript的filter()方法是一个非常有用的数组方法，它创建一个新数组，新数组中的元素是通过检查指定条件为真的元素。这个方法不会改变原始数组。

这是filter()方法的基本语法：

let newArray = arr.filter(callback(element[, index[, array]])[, thisArg])

参数说明：

• callback：必需。测试每个元素是否符合条件的函数，该函数应返回一个布尔值。
• thisArg：可选。执行 callback 函数时使用的 this 值。

回调函数callback接收以下参数：

• element：必需。数组中正在处理的当前元素。
• index（可选）：数组中正在处理的当前元素的索引。
• array（可选）：filter 被调用的数组。

回调函数callback应该返回一个布尔值，以指示元素是否应包含在新数组中。如果返回 true，则该元素将包含在新数组中；如果返回 false，则不包含。

2.2 代码实现

let arr = [1, 2, 3, 4, 5];  
let newArr = arr.filter(item => item !== 3); // 过滤掉等于3的元素  
console.log(newArr); // 输出: [1, 2, 4, 5]

3.使用delete运算符

3.1 delete介绍

JavaScript 中的 delete 运算符用于删除对象的属性或数组的元素。

当用于对象时，delete 运算符将删除对象的指定属性。如果该属性存在，则该属性及其相关联的值将被完全删除。如果该属性不存在，则 delete 运算符将返回 false。

需要注意的是，delete 运算符只会删除引用类型的属性或元素，而不能删除基本类型的属性或元素。此外，删除后的属性或元素将被设置为 undefined，而不是完全消失。

3.2 代码实现

delete 运算符可以删除数组的元素，但是不会影响其他数组元素，也不会改变数组的长度。

let arr = [1, 2, 3, 4, 5];  
let index = arr.indexOf(3); // 找到要删除的元素的索引  
if (index !== -1) { // 确保元素存在于数组中  
    delete arr[index]; // 删除元素  
}  
console.log(arr); // 输出: [1, 2, undefined, 4, 5]

4.使用for循环和splice()方法

我们可以使用 for 循环遍历数组，并在遍历过程中使用 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--; // 因为我们删除了一个元素，所以我们需要减小索引以保持正确的遍历顺序  
    }  
}  
console.log(arr); // 输出: [1, 2, 4, 5]

5.使用includes()方法

5.1 includes介绍

includes() 是 JavaScript 中的一个数组方法，用于检查数组中是否包含特定的元素。如果数组包含该元素，则返回 true，否则返回 false。

语法：

arr.includes(searchElement[, fromIndex])

• searchElement：必需。要在数组中查找的值。
• fromIndex：（可选）开始搜索的位置。如果该索引值大于或等于数组长度，则返回 false。如果该索引值小于0，则将其视为0。默认值为 0。

注意事项：

• includes() 方法对NaN的处理与 == 和 === 运算符不同。例如，[NaN].includes(NaN) 的结果为 false。
• 与 indexOf() 方法相比，includes() 方法在查找 NaN 时表现得更准确。例如，[NaN].indexOf(NaN) 的结果为 -1，而 [NaN].includes(NaN) 的结果为 false。

5.2 代码实现

我们可以使用 includes() 方法检查数组中是否存在指定的元素，如果存在，则使用 splice() 方法删除它。这种方法可以避免在循环中使用复杂的条件判断。

let arr = [1, 2, 3, 4, 5];  
let itemToRemove = 3; // 要删除的元素  
let index = arr.indexOf(itemToRemove); // 在数组中查找要删除的元素的索引  
if (index !== -1) { // 如果元素存在于数组中，则删除它  
    arr.splice(index, 1); // 使用splice()删除元素，并返回被删除的元素（虽然在这个例子中我们不需要它）  
}  
console.log(arr); // 输出: [1, 2, 4, 5]

6.使用shift()或pop()方法

6.1 shift介绍

shift() 是 JavaScript 中的一个数组方法，用于删除并返回数组的第一个元素。

语法：

arr.shift()

注意事项：

• shift() 方法会改变原数组。
• 如果数组为空，则 shift() 方法不返回任何值，也不更改数组。

6.2 代码实现

shift() 方法删除并返回数组的第一个元素，而 pop() 方法删除并返回数组的最后一个元素。

let arr = [1, 2, 3, 4, 5];  
let itemToRemove = 3; // 要删除的元素  
arr.splice(arr.indexOf(itemToRemove), 1); // 删除元素  
console.log(arr); // 输出: [1, 2, 4, 5]

7.使用map()方法

7.1 map介绍

map() 是 JavaScript 中的一个数组方法，用于创建一个新数组，其结果是该数组中的每个元素都调用一个提供的函数后的结果。

语法：

arr.map(callback(currentValue, index, array)[, thisArg])

• callback：必需。为数组中每个元素执行的函数，并返回一个由回调函数返回的结果组成的数组。
• thisArg：（可选）执行回调函数时使用的 this 值。

注意事项：

• map() 方法不会改变原始数组。
• 如果提供的回调函数在某个位置返回 undefined，则该位置在新数组中将被设置为 undefined。

7.2 代码实现

map() 方法创建一个新数组，其结果是该数组中的每个元素都调用一个提供的函数后的结果。如果提供的函数在某个位置返回 false，则该位置的元素不会被包括在新数组中。

let arr = [1, 2, 3, 4, 5];
let newArr = [...arr.map(item => item !== 3 ? item : [])].flat();
console.log(newArr); // 输出: [1, 2, 4, 5]

到此这篇关于详解JavaScript中7种常见删除数组中指定元素的方法(含代码)的文章就介绍到这了,更多相关js删除数组指定元素内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

最新评论