如何通过值从 JavaScript 数组中删除一个项目?

javascriptweb developmentfront end technology

在本教程中,我们将学习如何通过值从 JavaScript 数组中删除一个项目。

数组是一种数据结构,可以存储具有相同数据类型的数据集合。为数组元素分配一个连续的内存位置。每个数组元素都由其索引值标识。

您必须通过插入元素、删除或更改等方式来处理数组。JavaScript 有很多方法来更新数组。让我们看一下按值从 JavaScript 数组中删除项目的各种方法。

以下是按值从数组中删除项目的方法/函数 -l

  • 数组 filter() 方法
  • 数组 splice() 方法

使用数组 filter() 方法

filter() 是一种创建满足给定条件的新元素数组的方法。filter() 方法不会更改原始数组。

用户可以按照以下语法使用 filter() 方法按值从 JavaScript 数组中删除项目。

语法

let arr = [1,2,3,......,n];
array.filter( function(curr_element, index, arr)) => {
/* condition*/
});

在上面的语法中,我们使用了 filter 方法并传递了包含条件的回调函数来过滤数组。

参数

  • function − 针对每个数组元素执行的函数

  • curr_element − 当前元素的值

  • index − 当前元素的索引(可选)

  • arr − 当前元素的数组(可选)

示例

在下面给出的示例中,我们使用 filter() 方法按值从 JavaScript 数组中删除一个项目。我们采用了两个数组示例并按值从 JavaScript 数组中删除了一个项目。

<html> <body> <h3>Use <i>filter()</i> method to remove an item from a JavaScript array by value.</h3> <p><b>Example 1: </b>Remove value 4</p> <div id="output1"></div> <p><b>Example 2:</b> remove value "E"</p> <div id="output2"></div> <script> let output1 = document.getElementById("output1"); let output2 = document.getElementById("output2"); let output = ""; let arr1 = [1, 2, 3, 4, 5]; output = "Array before filter() = " + arr1 + "<br>"; let arr1_new = arr1.filter(function(f) { return f !== 4 }); output = output + " New array after filter() = " + arr1_new; output1.innerHTML = output; let arr2 = ["A", "B", "C", "D", "E"]; output = "Array before filter() = " + arr2 + " <br>"; let arr2_new = arr2.filter(function(f) { return f !== "E" }); output = output + " New array after filter() = " + arr2_new; output2.innerHTML = output; </script> </body> </html>

在上面两个数组中,用户可以看到 filter() 方法返回符合条件的新元素数组。

使用数组 splice() 方法

splice() 方法可从数组中添加或删除元素。

splice() 方法可更改原始数组。

查看者可以按照以下语法使用 splice() 方法按值从 JavaScript 数组中删除项目。

语法

let arr = [1,2,3,......,n];
arr.splice( index, count, elements)

在上面的语法中,我们使用了 spilce() 方法,用户可以在下面了解其参数。

参数

  • index - 要添加/删除的元素的索引

  • count - 要添加的元素数量(可选)

  • elements - 要添加的元素的名称(可选)

示例

在下面给出的示例中,我们使用 splice() 方法按值从 JavaScript 数组中删除一个项目。我们采用两个数组示例,并按值从 JavaScript 数组中删除一个项目。

<html> <head> </head> <body> <h3>Use <i>splice()</i> to remove an item from a JavaScript array by value.</h3> <p><b>Example 1</b></p> <div id = "output1"></div> <p><b>Example 2</b></p> <div id = "output2"></div> <script> let output1 = document.getElementById("output1"); let output2 = document.getElementById("output2"); let output=""; let arr1=[1,2,3,4,5]; let element=arr1.indexOf(2); output="Array before splice() = "+arr1+"<br>"; if (element > -1) { arr1.splice(element, 1); } output=output+"New array after splice() = "+arr1; output1.innerHTML = output; let arr2=["A","B","C","D","E"]; let element1=arr2.indexOf("B"); output="Array before splice() = "+arr2+"<br>"; if (element1 > -1) { arr2.splice(element1, 1); } output=output+"New array after splice(): "+arr2; output2.innerHTML = output; </script> </body> </html>

我们已经学习了两种按值从 JavaScript 数组中删除项目的方法。在这些方法中,filter() 方法根据条件创建一个新的元素数组。

splice() 用于添加或删除特定索引上的元素,从而更改原始数组。


相关文章