当前位置：极客教程 > JavaScript > JavaScript 精品文章 > JavaScript 根据对象属性删除数组元素

JavaScript 根据对象属性删除数组元素

JavaScript 根据对象属性删除数组元素

在JavaScript中，我们经常使用对象数组。有时候我们可能需要根据对象包含的特定属性来从数组中删除一个元素。例如，我们可能希望删除所有对象中id属性值与某个特定值相匹配的元素。在本文中，我们将讨论在JavaScript中实现这个目标的各种方法。

有几种方法可以根据对象属性来删除数组元素：

  • 使用filter()方法
  • 使用splice()方法
  • 使用forEach()方法
  • 使用reduce()方法

我们将探讨上述方法来实现根据对象属性删除数组元素的目标。

方法1：使用filter()方法

filter()方法非常有用，如果你希望保留原始数组并创建一个不包含要删除元素的新数组。filter()方法根据提供的函数实现的测试来创建一个新的数组，其中包含通过测试的所有元素。

array.filter(callback(element, index, array), thisArg)
JavaScript

参数：

  • callback： 一个最多可以接受三个参数的函数。filter() 方法会对数组中的每个元素调用该回调函数，并返回一个由回调函数返回“true”的所有元素组成的新数组。
  • element： 数组中正在处理的当前元素。
  • index（可选）： 数组中正在处理的当前元素的索引。
  • array（可选）： 调用filter()方法的数组。
  • thisArg（可选）： 在执行回调函数时要使用的对象。

示例： 在这个示例中，代码使用filter()方法从数组arr中移除id为2的对象，并记录更新后的数组。

Javascript

let arr = [{
    id: 1,
    name: 'John'
},
{
    id: 2,
    name: 'Jane'
},
{
    id: 3,
    name: 'Bob'
},
{
    id: 4,
    name: 'Alice'
}
];
 
arr = arr.filter(item => item.id !== 2);
 
console.log(arr);
JavaScript

输出

[
  { id: 1, name: 'John' },
  { id: 3, name: 'Bob' },
  { id: 4, name: 'Alice' }
]
JavaScript

方法2：splice()方法

splice()方法通过删除或替换现有元素和/或在原地添加新元素来更改数组的内容。

array.splice(start, deleteCount, item1, ..., itemX)
JavaScript

参数：

  • start： 改变数组的索引位置。如果大于数组的长度，实际的起始索引将设置为数组的长度。如果为负数，则从数组末尾开始的那么多元素。
  • deleteCount（可选）： 一个整数，表示要删除的旧数组元素的数量。如果 deleteCount 为0或负数，则不删除任何元素。
  • item1，…itemX（可选）： 添加到数组中的元素，从起始索引开始。如果您没有指定任何元素， splice() 仅从数组中删除元素。

示例： 以下代码演示了 forEach() 方法。在这个例子中，我们使用 forEach() 方法迭代数组。在回调函数内部，我们检查当前元素的’id’属性是否与要删除的值匹配。如果匹配，我们使用 splice() 方法从数组中删除该元素。由于我们在迭代数组时对其进行修改，我们需要使用索引参数确保删除正确的元素。最后，我们将更新后的数组记录到控制台。

Javascript

let arr = [{
    id: 1,
    name: 'John'
},
{
    id: 2,
    name: 'Jane'
},
{
    id: 3,
    name: 'Bob'
},
{
    id: 4,
    name: 'Alice'
}
];
 
arr.forEach((item, index) => {
    if (item.id === 2) {
        arr.splice(index, 1);
    }
});
 
console.log(arr);
JavaScript

输出

[
  { id: 1, name: 'John' },
  { id: 3, name: 'Bob' },
  { id: 4, name: 'Alice' }
]
JavaScript

方式3：

使用 forEach() 方法，对数组中的每个元素执行一次提供的函数。

array.forEach(callback(currentValue, index, array), thisArg)
JavaScript

参数：

  • callback： 接受最多三个参数的函数。forEach()方法在数组中的每个元素上调用回调函数。
  • currentValue： 正在处理的当前元素的值。
  • index（可选）： 正在处理的当前元素的索引。
  • array（可选）： 调用forEach()的数组。
  • thisArg（可选）： 在执行回调时使用的对象。

示例： 以下代码演示了splice()方法。在此示例中，我们使用for循环来迭代数组。在循环内部，我们检查当前元素的”id”属性是否与我们要删除的值匹配。如果匹配，我们使用splice()方法从数组中删除该元素。我们还递减索引变量以确保我们不跳过任何元素。最后，我们将更新后的数组记录到控制台。

Javascript

let arr = [{
    id: 1,
    name: 'John'
}, {
    id: 2,
    name: 'Jane'
},
{
    id: 3,
    name: 'Bob'
}, {
    id: 4,
    name: 'Alice'
}
];
 
for (let i = 0; i < arr.length; i++) {
    if (arr[i].id === 2) {
        arr.splice(i, 1);
        i--;
    }
}
 
console.log(arr);
JavaScript

输出

[
  { id: 1, name: 'John' },
  { id: 3, name: 'Bob' },
  { id: 4, name: 'Alice' }
]
JavaScript

方法4：使用reduce()方法

在这种方法中，我们使用reduce()方法根据特定的属性值从数组中移除一个对象：

语法：

array.reduce( function(total, currentValue, currentIndex, arr),   
initialValue )
JavaScript

例子： 在这个例子中，我们使用reduce()来遍历arr。将id不等于2的对象推入acc，从而产生一个更新后的数组，不包含id为2的对象。

Javascript

let arr = [
    {
        id: 1,
        name: 'John'
    },
    {
        id: 2,
        name: 'Jane'
    },
    {
        id: 3,
        name: 'Bob'
    },
    {
        id: 4,
        name: 'Alice'
    }
];
 
let idToRemove = 2;
 
arr = arr.reduce((acc, item) => {
    if (item.id !== idToRemove) {
        acc.push(item);
    }
    return acc;
}, []);
 
console.log(arr);
JavaScript

输出

[
  { id: 1, name: 'John' },
  { id: 3, name: 'Bob' },
  { id: 4, name: 'Alice' }
]
JavaScript

通过利用适当的方法，您可以高效地从数组中移除不需要的元素并根据需要操纵数据。

Python教程

Python 教程

Python 教程
Tkinter 教程

Tkinter 教程
Pandas 教程

Pandas 教程
NumPy 教程

NumPy 教程
Flask 教程

Flask 教程
Django 教程

Django 教程
PySpark 教程

PySpark 教程
wxPython 教程

wxPython 教程
SymPy 教程

SymPy 教程
Seaborn 教程

Seaborn 教程
SciPy 教程

SciPy 教程
RxPY 教程

RxPY 教程
Pycharm 教程

Pycharm 教程
Pygame 教程

Pygame 教程
PyGTK 教程

PyGTK 教程
PyQt 教程

PyQt 教程
PyQt5 教程

PyQt5 教程
PyTorch 教程

PyTorch 教程
Matplotlib 教程

Matplotlib 教程
Web2py 教程

Web2py 教程
BeautifulSoup 教程

BeautifulSoup 教程

Java教程

Java 教程

Java 教程

Web教程

HTML 教程

HTML 教程
CSS 教程

CSS 教程
CSS3 教程

CSS3 教程
jQuery 教程

jQuery 教程
Ajax 教程

Ajax 教程
AngularJS 教程

AngularJS 教程
TypeScript 教程

TypeScript 教程
WordPress 教程

WordPress 教程
Laravel 教程

Laravel 教程
Next.js 教程

Next.js 教程
PhantomJS 教程

PhantomJS 教程
Three.js 教程

Three.js 教程
Underscore.JS 教程

Underscore.JS 教程
WebGL 教程

WebGL 教程
WebRTC 教程

WebRTC 教程
VueJS 教程

VueJS 教程

数据库教程

SQL 教程

SQL 教程
MySQL 教程

MySQL 教程
MongoDB 教程

MongoDB 教程
PostgreSQL 教程

PostgreSQL 教程
SQLite 教程

SQLite 教程
Redis 教程

Redis 教程
MariaDB 教程

MariaDB 教程

图形图像教程

Vulkan 教程

Vulkan 教程
OpenCV 教程

OpenCV 教程

大数据教程

R语言 教程

R语言 教程

开发工具教程

Git 教程

Git 教程
VSCode 教程

VSCode 教程
Docker 教程

Docker 教程
Gerrit 教程

Gerrit 教程
Excel 教程

Excel 教程

计算机教程

Go语言 教程

Go语言 教程
C++ 教程

C++ 教程

JavaScript 精品教程

登录

找回密码？

注册