如何在JavaScript中从数组中删除对象

尼耳多
4,711 阅读5分钟

JavaScript - Remove Object From Array

JavaScript数组允许你以不同的方式添加和删除数组项。不幸的是，没有一个简单的array.remove()函数。那么，你如何从JavaScript数组中删除一个元素呢？除了删除方法外，JavaScript数组还有多种方式可以让你删除和清除数组值。让我们看看如何从JavaScript数组中删除对象。

JavaScript从数组中删除对象

在Javascript中要从数组中删除一个对象。

  1. array.pop()- pop()方法从数组的末端删除。
  2. array.splice() - splice()方法从一个特定的数组索引中删除。
  3. array.shift() - shift()方法从一个数组的开始删除。
  4. array.slice() - slice()方法删除不必要的项目并返回需要的项目。
  5. array.filter()- 允许你以编程方式从一个数组中移除元素。

JavaScript数组pop()

array pop()方法删除数组的最后一个项目，返回该项目，并更新数组的长度。这里，项指的是对象。

让我们通过一个例子来理解这个问题。

const objArr = [
  { name: 'Eleven', show: 'Stranger Things' },
  { name: 'Jonas', show: 'Dark' },
  { name: 'Mulder', show: 'The X Files' },
  { name: 'Ragnar', show: 'Vikings' },
  { name: 'Scully', show: 'The X Files' },
];

removedEl = objArr.pop();
console.log(objArr);
console.log(removedEl);

输出

[
  { name: 'Eleven', show: 'Stranger Things' },
  { name: 'Jonas', show: 'Dark' },
  { name: 'Mulder', show: 'The X Files' },
  { name: 'Ragnar', show: 'Vikings' }
]
{ name: 'Scully', show: 'The X Files' }

你可以看到，我们定义了一个有五个对象的数组。

为了从数组中删除最后一个对象，我们使用了array.pop()方法，该方法总是删除最后一个项目并返回该项目。所以，最后，我们打印了array和removementEl两个变量。

JavaScript数组拼接()

JavaScript数组splice()是一个内置的方法，通过删除或替换现有的元素和添加新的项目来改变数组的项目。

要从数组中删除第一个对象或从数组中删除最后一个对象，然后使用splice()方法。让我们从数组中删除第一个对象。

请看下面的代码。

// app.js

const objArr = [
  { name: 'Eleven', show: 'Stranger Things' },
  { name: 'Jonas', show: 'Dark' },
  { name: 'Mulder', show: 'The X Files' },
  { name: 'Ragnar', show: 'Vikings' },
  { name: 'Scully', show: 'The X Files' },
];

removedEl = objArr.splice(0, 1);
console.log(objArr);
console.log(removedEl);

输出

[
  { name: 'Jonas', show: 'Dark' },
  { name: 'Mulder', show: 'The X Files' },
  { name: 'Ragnar', show: 'Vikings' },
  { name: 'Scully', show: 'The X Files' }
]
[ { name: 'Eleven', show: 'Stranger Things' } ]

从输出中可以看出，splice()方法返回一个包含被移除项的数组。

JavaScript数组shift()

JavaScript数组shift()是一个内置的函数，可以从数组中移除第一个对象，并返回这个被删除的对象。

要从数组中删除第一个对象，请使用array.shift()方法。

请看下面的代码。

// app.js

const objArr = [
  { name: 'Eleven', show: 'Stranger Things' },
  { name: 'Jonas', show: 'Dark' },
  { name: 'Mulder', show: 'The X Files' },
  { name: 'Ragnar', show: 'Vikings' },
  { name: 'Scully', show: 'The X Files' },
];

removedEl = objArr.shift();
console.log(objArr);
console.log(removedEl);

输出

[
  { name: 'Jonas', show: 'Dark' },
  { name: 'Mulder', show: 'The X Files' },
  { name: 'Ragnar', show: 'Vikings' },
  { name: 'Scully', show: 'The X Files' }
]
{ name: 'Eleven', show: 'Stranger Things' }

shift()方法并不返回一个数组。相反，它返回从数组中删除的元素。

JavaScript数组slice()

JavaScript数组slice()是一个内置的函数，它返回从头到尾选择的数组部分的浅层拷贝到一个新的数组对象。

要从数组中删除最后一个对象，请使用array.slice()方法。

// app.js

const objArr = [
  { name: 'Eleven', show: 'Stranger Things' },
  { name: 'Jonas', show: 'Dark' },
  { name: 'Mulder', show: 'The X Files' },
  { name: 'Ragnar', show: 'Vikings' },
  { name: 'Scully', show: 'The X Files' },
];

remainingArr = objArr.slice(0, objArr.length - 1);
console.log(remainingArr);

输出

[
  { name: 'Eleven', show: 'Stranger Things' },
  { name: 'Jonas', show: 'Dark' },
  { name: 'Mulder', show: 'The X Files' },
  { name: 'Ragnar', show: 'Vikings' }
]

我们知道我们必须从数组中移除最后一个对象，所以我们使用了array.slice()方法来移除该元素。

JavaScript数组过滤器()

如果你想根据属性值来删除一个对象，那么你可以使用array.filter()方法。

Javascript数组filter()是一个内置的方法，它创建了一个新的数组，其中包含所有通过所提供的函数实现的测试的元素。

请看下面的代码。

// app.js

const objArr = [
  { name: 'Eleven', show: 'Stranger Things' },
  { name: 'Jonas', show: 'Dark' },
  { name: 'Mulder', show: 'The X Files' },
  { name: 'Ragnar', show: 'Vikings' },
  { name: 'Scully', show: 'The X Files' },
];

remainingArr = objArr.filter(data => data.name != 'Ragnar');
console.log(remainingArr);

在这个例子中，我们必须删除名字属性值为Ragnar 的对象**。** 因此，我们将过滤并返回数组，其中不包括Ragnar这个值的对象。

基于这个条件，数组将被过滤掉。要使用filter()方法移除元素，你必须根据这个条件来写。

通过减少数组的大小来删除最后一个元素。

还有一种方法是通过减少数组长度到1来删除数组的最后一个元素。

要找到一个数组的长度，使用arr.length属性，为了删除最后一个对象，我们将用数组长度减去1，这意味着最后一个元素将被删除。

请看下面的代码。

// app.js

const objArr = [
  { name: 'Eleven', show: 'Stranger Things' },
  { name: 'Jonas', show: 'Dark' },
  { name: 'Mulder', show: 'The X Files' },
  { name: 'Ragnar', show: 'Vikings' },
  { name: 'Scully', show: 'The X Files' },
];

objArr.length = objArr.length - 1;
console.log(objArr);

输出

[
  { name: 'Eleven', show: 'Stranger Things' },
  { name: 'Jonas', show: 'Dark' },
  { name: 'Mulder', show: 'The X Files' },
  { name: 'Ragnar', show: 'Vikings' }
]

你可以看到，通过改变数组的长度，最后一个对象被删除。但是，不建议使用这种方法，因为这样会修改原始数组的长度。

结论

从数组中删除对象并不是一件困难的事情，我们已经尝试了很多方法来准确地实现这一目标。然而，移除JavaScript数组元素对于管理你的数据是至关重要的。

没有原生的 "移除"方法可用，但有不同的方法和技术可以用来消灭不需要的数组项目。

参见

JavaScript:从数组中删除第一个元素

JavaScript清除数组

JavaScript:寻找数组中的对象

JavaScript 地图对象

The postHow to Remove Object From Array in JavaScriptappeared first onAppDividend.

avatar
文章
阅读
粉丝