Как найти нужный объект в массиве js

• Главная

• Инструкции

• JavaScript

• Методы поиска в массивах JavaScript

Поиск в массиве — довольно несложная задача для программиста. На ум сразу приходит перебор через цикл for или бинарный поиск в отсортированном массиве, для элементов которого определены операции «больше» и «меньше». Но, как и любой высокоуровневый язык программирования, JavaScript предлагает разработчику встроенные функции для решения различных задач. В этой статье мы рассмотрим четыре метода поиска в массивах JavaScript: find, includes, indexOf и filter.

indexOf

indexOf — это функция поиска элемента в массиве. Этот метод с помощью перебора ищет искомый объект и возвращает его индекс или “-1”, если не находит подходящий.

Синтаксис

Функция имеет такой синтаксис:

Array.indexOf (search element, starting index)

где:

• Array — массив;
• search element — элемент, который мы ищем;
• starting index — индекс, с которого начинаем перебор. Необязательный аргумент, по умолчанию работа функции начинается с индекса “0”, т.е. метод проверяет весь Array. Если starting index больше или равен Array.length, то метод сразу возвращает “-1” и завершает работу. 

Если starting index отрицательный, то JS трактует это как смещение с конца  массива: при starting index = “-1” будет проверен только последний элемент, при “-2” последние два и т.д. 

Практика

Опробуем метод на практике. Запустим такой код и проверим результаты его работы:

let ExampleArray = [1,2,3,1,'5', null, false, NaN,3];
console.log("Позиция единицы", ExampleArray.indexOf(1) );
console.log("Позиция следующей единицы", ExampleArray.indexOf(1,2) );
console.log("Позиция тройки", ExampleArray.indexOf(3) );
console.log("Позиция тройки, если starting index отрицательный", ExampleArray.indexOf(3,-2) );
console.log("Позиция false", ExampleArray.indexOf(false) );
console.log("Позиция 5", ExampleArray.indexOf("5") ); 
console.log("Позиция NaN", ExampleArray.indexOf(NaN));



  


                       
  

В результате работы этого кода мы получили такой вывод: 

Позиция единицы 0
Позиция следующей единицы 3
Позиция тройки 2
Позиция тройки, если starting index отрицательный 8
Позиция false 6
Позиция 5 -1
Позиция NaN -1

indexOf осуществляет поиск элемента в массиве слева направо и останавливает свою работу на первом совпавшем. Отчетливо это проявляется в примере с единицей. Для того, чтобы идти справа налево, используйте метод LastIndexOf с аналогичным синтаксисом.

Для сравнения искомого и очередного объекта применяется строгое сравнение (===). При использовании строгого сравнения для разных типов данных, но с одинаковым значение, например 5, ‘5’ и “5” JavaScript даёт отрицательный результат, поэтому IndexOf не нашел 5. 

Также стоит помнить, что indexOf некорректно обрабатывает NaN. Так что для работы с этим значением нужно применять остальные методы.

includes

includes не совсем проводит поиск заданного элемента в массиве, а проверяет, есть ли он там вообще. Работает он примерно также как и indexOf. В конце работы includes возвращает «True», если нашел искомый объект, и «False», если нет. Также includes правильно обрабатывает NaN

Синтаксис

includes имеет следующий синтаксис:

Array.includes (search element, starting index)

где: 

• Array — массив;
• search element — элемент, который мы ищем;
• starting index — индекс, с которого начинаем перебор. Необязательный аргумент, по умолчанию работа функции начинается с индекса “0”, т.е. метод проверяет весь Array. Если starting index больше или равен Array.length, то метод сразу возвращает «False» и завершает работу.  

Если starting index отрицательный, то JS трактует это как смещение с конца массива: при starting index = “-1” будет проверен только последний элемент, при “-2” последние два и т.д.  

Практика

Немного изменим код из предыдущего примера и запустим его:

let Example = [1,2,3,1,'5', null, false,NaN, 3];
console.log("Наличие единицы", Example.includes(1) );
console.log("Наличие следующей единицы", Example.includes(1,2) );
console.log("Наличие тройки", Example.includes(3) );
console.log("Наличие тройки, если starting index отрицательный", Example.includes(3,-1) );
console.log("Наличие false", Example.includes(false) );
console.log("Наличие 5", Example.includes(5) ); 
console.log("Наличие NaN", Example.includes(NaN));

Вывод:

Наличие единицы true
Наличие следующей единицы true
Наличие тройки true
Наличие тройки, если starting index отрицательный true
Наличие false true
Наличие 5 false
Наличие NaN true

Для includes отсутствует альтернативная функция, которая проводит поиск по массиву js справа налево, которая, в общем-то, и не очень актуальна.

find

Предположим, что нам нужно найти в массиве некий объект. Но мы хотим найти его не по значению, а по его свойству. Например, поиск числа в массиве со значением между 15 и 20. Как и прежде, мы можем воспользоваться перебором с помощью for, но это не слишком удобно. Для поиска с определенным условием в JavaScript существует метод find.

Синтаксис

Array.find(function(...){
//если элемент соответствует условиям (true), то функция возвращает его  и прекращает работу;
//если ничего не найдено, то возвращает undefined
})

• Array — массив;
• function(…) — функция, которая задает условия.

Практика

Как и в прошлых примерах, напишем небольшой код и опробуем метод:

let ExampleArray = ["Timeweb", 55555, "Cloud", "облачный провайдер", "буквы"];
console.log(ExampleArray.find(element => element.length == 5))

Вывод:

Cloud

В этом примере мы искали строки с длиной в 5 символов. Для числовых типов данных длина не определена, поэтому 55555 не подходит. find находит первый элемент и возвращает его, поэтому «буквы» также не попали в результат работы нашей функции. Для того, чтобы найти несколько элементов, соответствующих некоторому условию, нужно использовать метод filter.

Также не стоит забывать о методе findIndex. Он возвращает индекс подходящего элемента. Или -1, если его нет. В остальном он работает точно также, как и find.

filter

find ищет и возвращает первый попавшийся элемент, соответствующий условиям поиска. Для того, чтобы найти все такие элементы, необходимо использовать метод filter. Результат этой функции — массив (если ничего не найдено, то он будет пустым).

Синтаксис

Array.find(function(...){
//если элемент соответствует условиям (true), то добавляем его к конечному результату и продолжаем перебор;
})

• Array — массив;
• function(…) — функция, которая задает условия.

Практика

Представим следующую задачу: у нас есть список кубоидов (прямоугольных параллелепипедов) с длинами их граней и нам нужно вывести все кубоиды с определенным объемом. Напишем код, реализующий решение данной задачи:

let ExampleArray = [
  [10, 15, 8],
  [11, 12, 6],
  [5, 20, 1],
  [10, 10, 2],
  [16,2, 4]
  ];
console.log(ExampleArray.filter(element=> element[0]*element[1]*element[2]>300))

 Вывод:

[ [ 10, 15, 8 ],
 [ 11, 12, 6 ] ]

В этом примере мы нашли прямоугольные параллелепипеды с объемом больше 300. В целом, метод filter в JS позволяет реализовывать всевозможные условия для поиска. 

Заключение

В этой статье узнали о методах поиска в JavaScript и научились ими пользоваться. Все перечисленные методы — универсальные инструменты для разработчиков. Но, как и любые универсальные инструменты, они не всегда являются самыми производительными. Так, например, бинарный поиск будет куда эффективнее, чем find и filter.

This post will discuss how to find a value in an array of objects in JavaScript.

1. Using Array.prototype.find() function

The recommended solution is to use the find() method that returns the first occurrence of an element in the array that satisfies the given predicate. The following code example demonstrates this by finding a person with the name John.

Download  Run Code

2. Using Array.prototype.findIndex() function

Alternatively, you can use the findIndex() method, which is similar to the find() method but returns the index of the first occurrence of an element or -1 if no element is found.

Download  Run Code

3. Using Array.prototype.forEach() function

Here, the idea is to iterate over the given array using the forEach() method and determine whether the object is present in the array.

Download  Run Code

4. Using Array.prototype.filter() function

Another plausible way is to filter the array to return all objects that pass the specified predicate. This can be easily done using the filter() method.

Download  Run Code

5. Using jQuery

The jQuery’s $.grep method works similarly to JavaScript’s native filter() method.

Download Code

6. Using Lodash/Underscore Library

The Underscore and Lodash library have the _.filter method, similar to the JavaScript’s native filter() method. The following code example demonstrates the usage of the _.filter method.

Download Code

That’s all about finding the value in an array of objects in JavaScript.

In this article, we will learn how to search and find an object in an array of objects based on particular criteria. First, we will discuss different ways in which we can find an object in an array and then move on to the different criteria through which we can search for the object.

Let’s consider an example of an array of car objects with properties of id, brand, model, price, and release_date with id having the unique value for every object.

const carList = [{ id:13, brand: "BMW", model: "X5", price:"$23000", release_date:"2015-10-12"},

                 { id:9, brand: "Audi", model: "S3", price:"$35000", release_date:"2013-08-23"},

                 { id:11, brand: "Bugatti", model: "Veyron", price:"$500000", release_date:"2006-02-10"},
                 
                 { id:7, brand: "VW", model: "Polo", price:"$8000", release_date:"2018-05-03"},
                
                 { id:4, brand: "Fiat", model: "Punto", price:"$6000", release_date:"2017-01-25"}]

There are two approaches to find the required object, they are as follows:

1. Finding index of search object using Array.findIndex()
2. Searching the object directly using Array.find()

Method 1: Array.findIndex() to find the search index

The first approach would be to find the array index of the search object using Array.findIndex(). Once the search index is found, we can access the search object by “array[index]” and then perform any required operations on the object that is found. This method is useful when we need to update the search object reference of the array.

In the below example, we find the index of the object with model value as “X5” and print the price and brand through the “carList[searchIndex]” object reference. Read more about Array.findIndex() from developer.mozilla.org/Array/findIndex.

// Finding index of the car with modal "X5" 
const searchIndex = carList.findIndex((car) => car.model=="X5");

console.log(`Model X5 is present in brand ${carList[searchIndex].brand}`);
//"Model X5 is present in brand BMW"

console.log(`The price of model X5 is ${carList[searchIndex].price}`);
//"The price of model X5 is $23000"

Method 2: Array.find() to find the search object

Another approach would be to find the search object itself by using Array.find() and assign it to a variable. Now all the search object details can be accessed from this variable. This approach is more suitable if we want to perform operations on search objects independently from the array.

In the below example, we find the object entry with model value as “X5” from the array using Array.find() and print its brand and price values. Read more about Array.find() from developer.mozilla.org/Array/find.

// Finding car object with modal "X5" 
const searchObject= carList.find((car) => car.model=="X5");

console.log(`Model X5 is present in brand ${searchObject.brand}`);
//"Model X5 is present in brand BMW"

console.log(`The price of model X5 is ${searchObject.price}`);
//"The price of model X5 is $23000"

We need criteria to search the object in the array of objects, here we will discuss 3 types of search that are as follows:

1. Search object by unique id / Property value
2. Search object with Min & Max property value
3. Search object with Latest or oldest date

Find object by Unique id / Property value

The most common approach is to match the search object by unique id or property value, however, it would fail if two or more items have the same value. Simple “==” operator coupled with Array.find() will achieve a successful search operation.

In the below example, carList has a property of “id” which is unique to every object in the array. We find the car object with id = 11 from the array and print the details of the object found.

const searchId = 11;

// Finding car object with id 11
const searchObject = carList.find((car) => car.id == searchId);

const {brand, model, price} = searchObject;

console.log(`Car with id ${searchId} is ${brand} ${model}`);
//"Car with id 11 is Bugatti Veyron"

console.log(`${brand} ${model} is priced at ${price}`);
//"Bugatti Veyron is priced at $500000"

Find object with Min & Max value in array

We can find objects with minimum and maximum values in an array of objects in 3 steps:

1. Create array of property values using Array.map((item) => item.property)
2. Find min / max value from the array using Math.max.apply(null, array) or Math.min.apply(null, array)
3. Find the object with max/ min value using Array.find((item) => item.property == max_value/min_Value)

In the below example, we are finding the most expensive and cheapest car object from carList array.

// Creating array with all prices in number
const prices = carList.map((car) => Number(car.price.replace("$", "")))

// Calculate higest and lowest price value
const highestPrice = "$" + Math.max.apply(null, prices);
const lowestPrice = "$" + Math.min.apply(null, prices);

// Matching values to find the expensive and cheap car
const expensiveCar = carList.find((car) => car.price == highestPrice)
const cheapCar = carList.find((car) => car.price == lowestPrice)

console.log(`Most expensive Car is ${expensiveCar.brand} ${expensiveCar.model} at ${highestPrice}`)
// "Most expensive Car is Bugatti Veyron at $500000"

console.log(`Cheapest Car is ${cheapCar.brand} ${cheapCar.model} at ${lowestPrice}`)
// "Cheapest Car is Fiat Punto at $6000"

Based on Latest or Oldest Date

We need to follow 4 steps to find an object with a min/max date from the array of objects:

1. Make sure the date field of objects are in YYYY-MM-DD format.
2. Define callback function for max value which returns Date.parse(car1.release_date) < (Date.parse(car2.release_date) ? a : b
3. Callback function for min value with Date.parse(car1.release_date) > (Date.parse(car2.release_date) ? a : b
4. Apply Array.reduce() with the callback function and assign the return value to a variable

In the below example, we find cars with the oldest and latest release date from carList array based on the “release_date” property value.

// "Get car with oldest release date"
const oldestCar = carList.reduce((car1, car2) => {
  return (Date.parse(car1.release_date)) < (Date.parse(car2.release_date)) ? a : b;
});

console.log(`The Oldest Car is ${oldestCar.brand} ${oldestCar.model} at ${oldestCar.release_date}`)
// "The Oldest Car is Bugatti Veyron at 2006-02-10"

// "Get car with latest release date"
const latestCar = carList.reduce((car1, car2) => {
  return (Date.parse(car1.release_date)) > (Date.parse(car2.release_date)) ? a : b;
});

console.log(`The Latest Car is ${latestCar.brand} ${latestCar.model} at ${latestCar.release_date}`)
//"The Latest Car is VW Polo at 2018-05-03"