在 JavaScript 中从数组中删除重复的内容

本教程将解释我们如何在 JavaScript 中使用不同的方法从数组中删除重复的数组。其中一种方法是将目标数组传递给 Set 类的构造函数,以返回一个等价的非重复数组。另一种方法是使用 JavaScript Array 的 filter() 方法,并在其回调函数中实现测试条件。

使用 Set 删除带有 ECMAScript 6 spread 语法的 JavaScript 中的重复项

在数学中,集合包含一组唯一的、非重复的元素。在 JavaScript 中,Set 类可以从一个数组中得到所有这些非重复的元素。

在 ECMAScript 6 中,我们可以通过使用 Set 类来获得一个新的非重复元素数组,并将其发送给 Set() 构造函数,从而使用传播语法的力量。

var arr = [1,2,3,4,1,2,3,1,2,3]
var uniqueArr = [...new Set(arr)]
console.log(uniqueArr)

输出:

[1, 2, 3, 4]

使用 Array.filter() 从 JavaScript 数组中删除重复的内容

JavaScript 数组引入了一个名为 filter() 的高阶函数,它对每个数组元素进行循环,对其应用一个测试条件,只有在满足条件时才返回该元素。这个测试条件将在回调函数里面实现,作为参数传递给 filter() 方法。

我们可以通过设置测试条件来检查当前元素在循环中的索引是否是该数组中的第一次出现,从而从数组中删除重复的元素。filter() 函数在执行过程中,会取额外的参数 pos 来代表元素的数组索引。

var arrTwo=["Hello 1 "," Hello 2 ","Hello 1 " , " Hello 2 ","Hello 1 again"]
const filteredArray = arrTwo.filter(function(ele , pos){
    return arrTwo.indexOf(ele) == pos;
})
console.log("The filtered array ",filteredArray);

输出:

The filtered array  (3) ["Hello 1 ", " Hello 2 ", "Hello 1 again"]

如果我们能使用 JavaScript ECMAScript 6 的箭头语法,那么删除重复操作就能更好地实现。

var arrTwo=["Hello 1 "," Hello 2 ","Hello 1 " , " Hello 2 ","Hello 1 again"];
const filteredArray = arrTwo.filter( (ele,pos)=>arrTwo.indexOf(ele) == pos);
console.log("The filtered array",filteredArray);

输出:

The filtered array  (3) ["Hello 1 ", " Hello 2 ", "Hello 1 again"]

在 JavaScript 中使用 hashtable 从一个原始数组中删除重复的元素

如果我们有一个数组只由数字 [ 1, 2, 3, 4, 1, 2, 3 ] 这样的基元类型组成,而我们想从这个数组 [ 1, 2, 3, 4 ] 中删除重复的值,我们可以使用 hashtables 实现我们的 filterArray() 函数。

我们将建立一个名为 found 的临时对象,它将包含所有非重复的值。在 filter 函数中,如果元素已经存在于 found 对象中,我们的条件将返回 false;否则,我们将以 true 的值将该元素添加到 found 对象中。

var arrThree = ["Hello 1 ", " Hello 2 ", " Hello 2 ", "Welcome", "Hello 1 again", "Welcome", "Goodbye"]
function filterArray(inputArr){
    var found ={};
    var out = inputArr.filter(function(element){
        return found.hasOwnProperty(element)? false : (found[element]=true);
    });
    return out;
}
const outputArray = filterArray(arrThree);
console.log("Original Array",arrThree);
console.log("Filtered Array",outputArray);

输出:

Original Array ["Hello 1 ", " Hello 2 ", " Hello 2 ", "Welcome", "Hello 1 again", "Welcome", "Goodbye"]
Filtered Array ["Hello 1 ", " Hello 2 ", "Welcome", "Hello 1 again", "Goodbye"]

使用 underscoreLoDash 库中的 _.uniq() 函数从 JavaScript 中删除数组中的重复元素

如果我们已经在使用 underscore 库中的任何一种方法,我们可以使用 _.uniq() 方法,因为它只返回输入数组中元素的第一次出现。

var arrFive = [1, 2, 3, 1, 5, 2];
console.log("LoDash output", _.uniq(arrFive));
LoDash output [1, 2, 3, 5]

我们可以从这里导入这个库。

在 JavaScript 中从数组中删除对象

在本文中,我们将学习如何从 JavaScript 数组中删除对象。本文将介绍和实现诸如 splice()slice()filter() 等方法。

在 JavaScript 中使用 splice() 方法从数组中删除对象

方法 splice() 可能是我们可以用来从数组中删除对象的最佳方法。它通过删除或替换现有元素或在适当位置添加新元素来更改数组的内容。splice() 方法的语法如下所示。

Array.splice(index, count, items1, ... , itemX)

index 选项指的是一个整数,指定在什么位置添加/删除项目。我们还可以使用负值来指定从数组末尾开始的位置。count 选项是可选的,表示要删除的项目数。items1, ..., itemX 选项也是可选的,可用于向数组添加新项目。

首先,我们声明一个名为 myArray 的数组变量,它包含数组中的三个对象。然后,在第二行,我们对数组使用 splice() 方法。我们还指出 01 作为参数。然后我们在控制台中记录数组。

最初,该数组包含三个对象。splice() 方法中的值 0 表示数组的第一个索引,即第一个对象。这意味着我们将开始从第一个索引中删除。方法中的下一个值 1 指定该方法将从起点删除一项。因此,下面的示例将删除数组中的第一个对象。

我们应该注意到 splice() 方法修改了数组;因此,我们可以使用 slice() 方法从数组中删除所需的对象,而无需更改原始数组。

代码示例:

var myArray = [{id:1, name:'John'},{id:2, name:'Rick'},{id:3, name:'Anna'}];
myArray.splice(0,1)
console.log(myArray)

输出:

[{id:2, name:'Rick'},{id:3, name:'Anna'}]

在 JavaScript 中使用 slice() 方法从数组中删除对象

slice() 方法返回从开始到结束选择的数组部分的修改副本,但不会包括传递给该方法的结束索引。slice() 方法的语法如下。

Array.slice(startIndex, endIndex)

在这里,startIndex 是我们开始提取的从零开始的索引。可以使用负索引,它表示距序列末尾的偏移量。例如,slice(-3) 提取序列中的最后三个元素。如果 startIndex 未定义,则 slice() 函数从索引 0 开始,而如果 startIndex 大于数组的索引范围,则返回一个空数组。

endIndex 选项也是一个从零开始的索引,在该索引之前结束提取。slice() 方法最多提取 endIndex,但包括 endIndex 本身。如果排除 endIndex 选项,slice() 函数从序列的末尾提取,即提取到 array.length。如果 endIndex 大于序列的长度,slice() 函数也会提取到序列的末尾。

下面示例中的 slice(1,3) 方法将从第二个索引到第四个索引中提取元素。由于数组中没有第四个索引,它将提取元素直到序列结束。

代码示例:

var myArray = [{id:1, name:'Morty'},{id:2, name:'Rick'},{id:3, name:'Anna'}];
var newArray = myArray.slice(1, 3);
console.log(newArray)

输出:

[{id:2, name:'Rick'},{id:3, name:'Anna'}]

使用 filter() 方法从数组中删除一个对象

filter() 方法使用通过函数提供的测试的元素创建一个新数组。这意味着它将返回一个新的对象数组。如果没有元素通过测试,该函数将返回一个空数组。我们将使用箭头函数来演示 filter() 方法。

filter() 方法使用了一个叫做回调函数的术语,就像

var newArray = myArray.filter( (element, index, array) => {
... Items passing this condition will be added to the new array...
})

该方法接受三个参数。element 选项是数组中正在处理的当前元素。index 是可选的,表示数组中正在处理的当前元素的索引。最后,array 选项是调用的数组过滤器并且是可选的。

首先,按照上述方法创建一个包含对象的数组。然后使用数组变量调用 filter() 函数。指定 item 作为箭头函数的参数,并使用表达式 item.id ! == 1 返回数组的元素。将新数组存储在 newArray 变量中并将其记录在控制台中。

下面的示例仅返回 id 不等于值 1 的数组元素。因此,它返回数组的第二个和第三个元素。

示例代码:

var myArray = [{id:1, name:'Morty'},{id:2, name:'Rick'},{id:3, name:'Anna'}];
var newArray = myArray.filter((item) => item.id !== 1);
console.log(newArray);

输出:

[{id:2, name:'Rick'},{id:3, name:'Anna'}]

在 JavaScript 中从数组中删除最后一个元素

数组将每个元素存储在特定索引处。元素的索引从 0 开始到数组长度减 1。

在本教程中,讨论了在 JavaScript 中从数组中删除最后一个元素的不同方法。

使用 array.prototype.splice() 从数组 JavaScript 中删除最后一个元素

splice() 方法用于通过删除或替换元素来更改数组。如果删除了任何元素,则返回已删除的元素。否则,返回一个空数组。

我们可以使用它从数组中删除最后一个元素。

参考下面的代码。

var array = [10,11,12,13,14,15,16,17];
array.splice(-1,1);
console.log(array);

输出:

[10, 11, 12, 13, 14, 15, 16]

使用 array.prototype.pop() 从 Array JavaScript 中删除最后一个元素

pop() 函数是实现此目的最直接的方法。它从数组中删除最后一个元素并返回删除的元素。

例如,

var array = [10,11,12,13,14,15,16,17];
array.pop();
console.log(array)

输出:

[10, 11, 12, 13, 14, 15, 16]

在 JavaScript 中使用 array.prototype.slice() 从数组中删除最后一个元素

slice() 函数创建从 startstop(不包括结尾)中选择的定义部分的副本。startstop 值是数组的索引。它返回新数组。

参考下面的代码。

var array = [10,11,12,13,14,15,16,17];
array = array.slice(0,-1);
console.log(array);

输出。

[10, 11, 12, 13, 14, 15, 16]

在 JavaScript 中使用 array.prototype.filter() 从数组中删除最后一个元素

filter() 方法根据传递的提供的函数返回修改后的数组。

要使用此函数删除最后一个元素,请参考下面的代码。

var array = [10,11,12,13,14,15,16,17];
array = array.filter((element, index) => index < array.length - 1);
console.log(array);

输出:

[10, 11, 12, 13, 14, 15, 16]

在 JavaScript 中使用用户定义的方法从数组中删除最后一个元素

我们可以创建一个新函数,该函数将数组作为输入,如果数组的长度大于零,则减少数组的长度。

我们在下面的例子中实现了这一点。

var array = [10,11,12,13,14,15,16,17];
function removeElement(arr) {
  if(arr.length > 0)
    arr.length --;
  return arr
};
var newArray = removeElement(array);
console.log(newArray);

输出:

[10, 11, 12, 13, 14, 15, 16]

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

JavaScript 编程语言有很多预构建方法,可以帮助我们加快开发过程。对于你可能想到的任何任务,JavaScript 中总会有一个预先构建的方法来完成该特定任务。例如,对字符串进行切片、从数组中插入和删除元素、将一种数据类型转换为另一种数据类型或生成随机数等等。

同样,在处理数组时,有很多方便的方法可以帮助我们在 JavaScript 中工作和操作数组数据结构。在本文中,我们将看到可以使用三种方法从数组中删除第一个元素。

JavaScript 中有两种可用的方法。一种方法会改变原数组,第二种方法会保持原数组不变。如果原始数组被更改后没有任何问题,请使用 splice()shift 方法。但是,如果你不想更改原始数组,请使用 filter()slice 方法。

在 JavaScript 中通过更改原始数组来删除数组的第一个元素

  1. splice() 方法:

splice() 方法用于从数组中删除或替换现有元素。此方法更改或修改原始数组。splice() 方法还返回已从数组中删除的元素。如果要获取已删除的元素,还可以将返回的元素存储到某个变量中以供进一步使用。

语法:

splice(start)
splice(start, deleteCount)
splice(start, deleteCount, item1)
splice(start, deleteCount, item1, item2, itemN)

start 参数告诉我们从哪个元素开始操作数组。start 可以采用正值或负值。如果你使用正值 (1, 2, 3…., n) 那么它将开始从左到右更改数组,如果你使用负值 (-1, -2, -3, .. ., -n) 然后它将开始从右到左更改数组。

然后我们还有 deleteCountitem1, item2, ... 参数,这两个参数都是可选的。如果要从数组中删除某些元素,可以将要删除的元素的总数作为值传递给 deleteCount 参数。如果传递 0,则不会从数组中删除任何元素。在 item1, item2, ... 中,你可以传递要添加到数组中的元素。有关更多信息,请阅读 splice() 方法的文档。

下面我们在由 5 个元素组成的 array 变量中存储了一个数字数组。在我们的例子中,我们需要删除数组的第一个元素。在这里,我们必须指定起始索引和要删除的元素数。由于我们要删除第一个元素,因此我们的起始索引将是 0,我们需要删除的总元素是 1。因此,我们将把值 (0, 1) 作为参数传递给 splice() 方法。

let array = [1,2,3,4,5]
let firstElement = array.splice(0, 1);
console.log(array, firstElement);

我们还将从数组中删除的元素存储到名为 firstElement 的变量中。从数组中删除第一个元素后,我们将打印 array 和存储在 firstElement 变量中的值。

你可以将上面的代码粘贴到浏览器的控制台中运行,然后你将获得如下输出。

输出:

Array(4) [ 2, 3, 4, 5 ]
Array [ 1 ]

从输出中可以看出,第一个元素(在本例中为 1)已从原始数组中成功删除。

  1. shift() 方法:

从数组中删除第一个元素的另一种方法是使用 shift() 方法。使用 splice() 方法,你可以添加或删除数组中任何索引处的任何元素,但 shift() 方法专门用于删除 0 索引处的元素。它删除第一个元素(索引 0 处的元素)并将数组的其余元素向左移动。

此方法还返回已从数组中删除的元素。在这里,我们还创建了一个 firstElement 变量,用于存储从数组中删除的第一个元素。

let array = [1,2,3,4,5];
let firstElement = array.shift();
console.log(array, firstElement);

最后,我们将打印 arrayfirstElement 变量。

输出:

Array(4) [ 2, 3, 4, 5 ]
1

在 JavaScript 中通过保持原始数组不变来移除数组的第一个元素

  1. filter() 方法:

我们已经看到了改变或修改原始数组的方法;现在让我们看看一些保持原始数组原样并将操作结果存储到新数组中的方法。一种这样的方法是 filter() 方法。

filter() 方法基于条件工作。并根据条件是真还是假,决定是否将元素添加到新数组中。

let array_1 = [1,2,3,4,5];
let array_2 = array_1.filter((element, index) => index > 0);
console.log(array_1, array_2);

filter() 方法将回调函数(箭头函数)作为参数。在数组的每个元素上调用此回调函数。该函数将为我们提供数组的元素及其索引

由于我们要删除第一个元素,我们将添加一个条件,即元素的索引是否大于零(index > 0)。如果这是真的,那么只有 filter() 函数会将元素插入到新数组中,否则不会。除了索引 0 处的元素(即第一个元素)之外,所有其他元素都将插入到新数组中。

输出:

Array(5) [ 1, 2, 3, 4, 5 ]
Array(4) [ 2, 3, 4, 5 ]
  1. slice() 方法:

下一个保留原始数组的方法是 slice() 方法。slice() 方法在两个位置切割数组。为此,我们必须指定开始和结束索引。start 代表我们想要开始切片数组的第一个索引,切片将在 end 之前停止一个元素。

startend 中存在的任何元素(包括起始值和在结束前停止一个元素)都将插入到新数组中。这两个参数都是可选的。有关更多信息,请阅读 slice() 方法文档。

let array_1 = [1,2,3,4,5];
let array_2 = array_1.slice(1);
console.log(array_1, array_2);

我们将仅传递 start 参数,因为我们想从数组中删除第一个元素。不指定 end 意味着将包含从 start 值开始的数组的所有元素。在我们的例子中,我们将通过 slice(1)。这会将元素 [2,3,4,5] 从原始数组即 array_1 复制到 array_2。最后,我们将使用 console.log() 方法打印两个数组。上述代码的输出如下所示。

输出:

Array(5) [ 1, 2, 3, 4, 5 ]
Array(4) [ 2, 3, 4, 5 ]

在 JavaScript 中从数组中搜索对象

在 JavaScript 中,在数组数据结构中使用和存储数据是很常见的。数组数据结构可以采用多种方式,例如数字、字符串、另一个数组作为元素或对象。在本文中,让我们讨论如何搜索数组中的对象以及每个单独对象中存在的各种值。

在这里,我们有一个名为 arrayofObjects 的对象数组。在每个对象内部,有由键值对表示的各种值。有 3 个键值对。键是名称职业公司。使用这些键,我们将能够访问每个单独对象的相应值。

var arrayofObjects = [
        { name:"Adam", profession:"Engineer", company: "Google" },
        { name:"Sam", profession:"Manager", company: "Amazon" },
        { name:"Gerogia", profession:"Designer", company: "Netflix" },
        { name:"Kate", profession:"Engineer", company: "Microscoft" },
        { name:"James", profession:"Sales", company: "Amazon" },
    ];

数组由方括号 [] 表示,而对象由大括号 {} 表示。

有几种方法可以在数组中查找对象。一些方法如下所示。

在 JavaScript 中使用 forEach() 在数组中搜索对象

在数组中查找对象的传统方法是使用 forEach() 循环。有了这个,我们可以遍历 for 循环中存在的每个元素。

首先,让我们使用 forEach() 从数组中访问整个对象。稍后我们将看到如何访问存在于对象中的各个值。要从上述数组打印整个对象,你可以使用 forEach() 循环。这个循环将为我们提供两件事:来自数组的元素本身和元素的索引。为此,我们必须将两个参数传递给 forEach()。在这种情况下,我们只需要元素而不需要索引,因此我们将传递一个参数,object。你可以为此参数指定任何名称。

//print name of the people who work at amazon
arrayofObjects.forEach(object =>{
    console.log(object);
});

由于 forEach() 循环将遍历每个元素,该元素将存储在这个 object 变量中。现在 object 变量将包含数组中的整个对象。如果你使用控制台打印这个 object 变量,它将打印数组中存在的所有对象。

输出:

Object { name: "Adam", profession: "Engineer", company: "Google" }
Object { name: "Sam", profession: "Manager", company: "Amazon" }
Object { name: "Gerogia", profession: "Designer", company: "Netflix" }
Object { name: "Kate", profession: "Engineer", company: "Microsoft" }
Object { name: "James", profession: "Sales", company: "Amazon" }

我们已经从数组中获取了每个对象;让我们从这些对象访问内部值。现在让我们打印在亚马逊公司工作的员工的姓名。要访问对象中的任何键,我们可以在 object 变量后面使用一个点并指定键。例如,要访问公司密钥,我们将使用 object.company

//print name of the people who work at amazon
arrayofObjects.forEach(object =>{
    if(object.company === "Amazon"){
        console.log("Amazon Employee:", object.name);
    }
});

使用 if 语句,我们将键的值与字符串 Amazon 进行比较,如果匹配,我们将输入 if 语句。之后,我们将使用 object.name 打印在亚马逊工作的员工的姓名,如上所示。这将为我们提供以下输出。

输出:

Amazon Employee: Sam
Amazon Employee: James

由于只有两个人在亚马逊工作,我们将 Sam 和 James 作为输出。

同样,我们可以使用下面的 nameprofession 和 company 键打印所有对象的所有值。

//print every details of a person
arrayofObjects.forEach(object =>{
    console.log(object.name + " is " + object.profession +" who works at " + object.company);
});

输出:

Adam is Engineer who works at Google
Sam is Manager who works at Amazon
Georgia is a Designer who works at Netflix
Kate is Engineer who works at Microsoft
James is Sales who works at Amazon

使用 JavaScript 中的 find() 方法在数组中搜索对象

find() 方法是在 JavaScript 中从数组中查找对象及其元素的另一种方法。find() 是一种 ES6 方法。这个方法的工作原理类似于 forEach() 循环,访问对象内部的元素与我们之前看到的类似。

在你的代码中用 find 替换 forEach,你就可以开始了。下面的代码还将打印数组中的每个对象。

arrayofObjects.find(object =>{
    console.log(object);
});

输出:

Object { name: "Adam", profession: "Engineer", company: "Google" }
Object { name: "Sam", profession: "Manager", company: "Amazon" }
Object { name: "Gerogia", profession: "Designer", company: "Netflix" }
Object { name: "Kate", profession: "Engineer", company: "Microsoft" }
Object { name: "James", profession: "Sales", company: "Amazon" }

同样,我们也可以使用它们各自的键访问数组中对象的每个值,如下所示。

arrayofObjects.find(object =>{
    console.log(object.name + " is " + object.profession +" who works at " + object.company);
});

输出:

Adam is Engineer who works at Google
Sam is Manager who works at Amazon
Georgia is Designer who works at Netflix
Kate is Engineer who works at Microsoft
James is Sales who works at Amazon