从对象数组搜索| JavaScript

We have seen and worked with JavaScript arrays before and now we will talk about objects in the array.

我们之前已经看过JavaScript数组并已经使用过它，现在我们将讨论数组中的对象 。

Before jumping into Arrays of Objects, let’s see the following Example:

在进入对象数组之前，让我们看下面的示例：

const todoList = ['Buy Chocolates','Go to Gym','Complete the Assignment'] //line1
console.log(todoList.indexOf('Buy chocolates'))	//line 2

The output of the following code snippet is:

以下代码段的输出是：

OOPS! Why -1?

糟糕！ 为什么是-1？

Don’t worry; the above code is deliberately done such a way to point out a common mistake that can be encounter by you later, so making you aware about it now. The above result it because the phrase "Buy Chocolate" in Line 1 and "Buy chocolate" in Line 2 are different due to a different case of C (one is lowercase and other uppercase) so now -1 makes sense, it means it doesn’t exist in the array.

不用担心 上面的代码是经过精心设计的，旨在指出您以后可能遇到的常见错误，因此请您立即意识到。 上面的结果是因为第1行中的短语“购买巧克力”和第2 行中的短语“购买巧克力”由于C的大小写不同(一个是小写而另一个是大写)而不同，所以现在-1有意义，这意味着它没有在数组中不存在。

Now we create an array of Objects:

现在我们创建一个对象数组：

const todoList = [{
	job: 'Buy Chocolates',
	isDone: false,
},{
	job: 'Go to Gym',
	isDone: false,
},{
	job: 'Complete the Assignment',
	isDone: true,
}]

In the above code, we created an array with objects with similar properties job which tells the task description and isDone is the status of the task whether it’s done or not it takes Boolean as its value.

在上面的代码中，我们创建了具有类似性质的工作 ，这告诉任务描述和isDone是任务的状态，不管是做或不该花布尔作为它的值对象的数组 。

Now we will proceed to search for our object in our Array, for that we have two array methods and here we will discuss both here,

现在，我们将继续在Array中搜索我们的对象 ，因为我们有两种数组方法，在这里我们将讨论这两种方法，

1)使用findIndex()方法 (1) Using the findIndex() Method)

Syntax:

句法：

 array.findIndex(callback[,thisArgs])

findIndex() uses a callback function and returns the index of the objects its name says, else return -1 is object will not in the array.

findIndex()使用回调函数并返回其名称所表示的对象的索引，否则返回-1表示对象将不在数组中。

Example:

例：

const todoList = [{
	job: 'Buy Chocolates',
	isDone: false,
},{
	job: 'Go to Gym',
	isDone: false,
},{
	job: 'Complete the Assignment',
	isDone: true,
}]

const findTask = function(arrayTodo,value){				//line 1
	const position = arrayTodo.findIndex(function(objectTodo){  //line 2
		return objectTodo.job.toLowerCase() === value.toLowerCase() //line 3
	})
	return position
}

console.log(findTask(todoList,'complete the assignment'))

Explanation:

说明：

Let me explain what happened in the above code, after creating an array of objects we created a function findTask which will return the position of the job. We passed arrayTodo an array and value the job that needs to be searched in the array, then we call method findIndex() with a callback function as its parameter where we passed a local object which will pass for each object in arrayTodo array. In line 3, when the job of objectTodo will be equal to the value passed then it will return the index of that object to position then position will be returned to findTask. Thus the output of the above code is 2.

让我解释一下上面代码中发生的情况，在创建对象数组之后，我们创建了一个函数findTask ，它将返回作业的位置 。 我们向arrayTodo传递了一个数组，并对需要在该数组中搜索的作业进行了赋值 ，然后我们以回调函数作为参数调用了findIndex()方法，并在其中传递了一个本地对象，该对象将为arrayTodo数组中的每个对象传递。 在第3行中，当objectTodo的工作等于传递的值时，它将把该对象的索引返回到position，然后将position返回给findTask。 因此，以上代码的输出为2 。

2)使用find()方法 (2) Using the find() Method)

const todoList = [{
	job: 'Buy Chocolates',
	isDone: false,
},{
	job: 'Go to Gym',
	isDone: false,
},{
	job: 'Complete the Assignment',
	isDone: true,
}]
const findTask = function(arrayTodo,value){				//line 1
	const position =arrayTodo.find(function(objectTodo){ //line 2
		return objectTodo.job.toLowerCase() ===value.toLowerCase() //line 3
	})
	return position
}

console.log(findTask(todoList,'complete the assignment'))

Now, above code snippet is same as in case of findIndex() method but the only findIndex is changed with find() and the output will be changed from 2 to { job: 'Complete the Assignment', isDone: true } rest will remain same...

现在，上面的代码片段与findIndex()方法的情况相同，但是唯一的findIndex用find()进行了更改，并且输出将从2更改为{job：'Complete the Assignment'，isDone：true}其余部分将保留相同...

翻译自: https://www.includehelp.com/code-snippets/search-from-array-of-objects-javascript .aspx