Учебное пособие по массиву объектов JavaScript - Как создавать, обновлять и перебирать объекты с помощью методов массива JS

В среднем я работаю с данными JSON 18 раз в неделю. И мне все еще нужно искать в Google конкретные способы манипулирования ими почти каждый раз. Что, если бы существовал полный гид, который всегда мог бы дать вам ответ?

В этой статье я покажу вам основы работы с массивами объектов в JavaScript.

Если вы когда-либо работали со структурой JSON, вы работали с объектами JavaScript. В буквальном смысле. JSON расшифровывается как JavaScript Object Notation.

Создать объект так просто:

{ "color": "purple", "type": "minivan", "registration": new Date('2012-02-03'), "capacity": 7 } 

Этот объект представляет собой автомобиль. Автомобили могут быть разных типов и цветов, каждый объект представляет собой конкретную машину.

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

Учитывая, что каждый элемент списка категорий выглядит в HTML так:

Я не хотел, чтобы этот код повторялся 12 раз, что сделало бы его недоступным.

Создание массива объектов

Но вернемся к машинам. Давайте посмотрим на этот набор машин:

Мы можем представить его как массив следующим образом:

let cars = [ { "color": "purple", "type": "minivan", "registration": new Date('2017-01-03'), "capacity": 7 }, { "color": "red", "type": "station wagon", "registration": new Date('2018-03-03'), "capacity": 5 }, { ... }, ... ] 

Массивы объектов не всегда остаются неизменными. Нам почти всегда нужно ими манипулировать. Итак, давайте посмотрим, как мы можем добавлять объекты в уже существующий массив.

Добавить в начало новый объект - Array.unshift

Чтобы добавить объект в первую позицию, используйте Array.unshift.

let car = { "color": "red", "type": "cabrio", "registration": new Date('2016-05-02'), "capacity": 2 } cars.unshift(car); 

В конце добавляем новый объект - Array.push

Чтобы добавить объект в последнюю позицию, используйте Array.push.

let car = {  "color": "red",  "type": "cabrio",  "registration": new Date('2016-05-02'),  "capacity": 2 } cars.push(car); 

Добавьте новый объект посередине - Array.splice

Чтобы добавить объект посередине, используйте Array.splice. Эта функция очень удобна, так как она также может удалять элементы. Следите за его параметрами:

Array.splice( {index where to start}, {how many items to remove}, {items to add} ); 

Итак, если мы хотим добавить красный Volkswagen Cabrio на пятой позиции, мы должны использовать:

let car = {  "color": "red",  "type": "cabrio",  "registration": new Date('2016-05-02'),  "capacity": 2 } cars.splice(4, 0, car); 

Цикл по массиву объектов

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

JavaScript предоставляет множество функций, которые могут решить вашу проблему без фактической реализации логики в общем цикле. Давайте взглянем.

Найти объект в массиве по его значениям - Array.find

Допустим, мы хотим найти красный автомобиль. Мы можем использовать функцию Array.find.

let car = cars.find(car => car.color === "red"); 

Эта функция возвращает первый соответствующий элемент:

console.log(car); // output: // { //   color: 'red', //   type: 'station wagon', //   registration: 'Sat Mar 03 2018 01:00:00 GMT+0100 (GMT+01:00)', //   capacity: 5 // } 

Также можно искать несколько значений:

let car = cars.find(car => car.color === "red" && car.type === "cabrio");

В этом случае мы получим последнюю машину в списке.

Получить несколько элементов из массива, соответствующих условию - Array.filter

Array.findФункция возвращает только один объект. Если мы хотим получить все красные машины, нам нужно использовать Array.filter.

let redCars = cars.filter(car => car.color === "red"); console.log(redCars); // output: // [ // { //    color: 'red', //    type: 'station wagon', //    registration: 'Sat Mar 03 2018 01:00:00 GMT+0100 (GMT+01:00)', //    capacity: 5 //  }, // { //    color: 'red', //    type: 'cabrio', //    registration: 'Sat Mar 03 2012 01:00:00 GMT+0100 (GMT+01:00)', //    capacity: 2 //  } // ] 

Преобразование объектов массива - Array.map

Это то, что нам нужно очень часто. Преобразуйте массив объектов в массив различных объектов. Это работа для Array.map. Допустим, мы хотим разделить наши автомобили на три группы в зависимости от их размера.

let sizes = cars.map(car => { if (car.capacity <= 3){ return "small"; } if (car.capacity <= 5){ return "medium"; } return "large"; }); console.log(sizes); // output: // ['large','medium','medium', ..., 'small'] 

Также возможно создать новый объект, если нам нужно больше значений:

let carsProperties = cars.map(car => { let properties = { "capacity": car.capacity, "size": "large" };  if (car.capacity <= 5){    properties['size'] = "medium";  }  if (car.capacity <= 3){    properties['size'] = "small";  } return properties; }); console.log(carsProperties); // output: // [ //   { capacity: 7, size: 'large' }, //   { capacity: 5, size: 'medium' }, //   { capacity: 5, size: 'medium' }, //   { capacity: 2, size: 'small' }, // ... // ] 

Добавьте свойство к каждому объекту массива - Array.forEach

Но что, если нам нужен и объект «автомобиль»? В этом случае мы можем улучшить объект для нового свойства size. Это хороший вариант использования Array.forEachфункции.

cars.forEach(car => { car['size'] = "large";  if (car.capacity <= 5){    car['size'] = "medium";  }  if (car.capacity <= 3){    car['size'] = "small";  } }); 

Сортировка массива по свойству - Array.sort

Когда мы закончили преобразование объектов, нам обычно нужно так или иначе отсортировать их.

Как правило, сортировка основана на значении свойства каждого объекта. Мы можем использовать эту Array.sortфункцию, но нам нужно предоставить функцию, определяющую механизм сортировки.

Допустим, мы хотим отсортировать автомобили по вместимости в порядке убывания.

let sortedCars = cars.sort((c1, c2) => (c1.capacity  c2.capacity) ? -1 : 0); console.log(sortedCars); // output: // [ // { // color: 'purple', // type: 'minivan', // registration: 'Wed Feb 01 2017 00:00:00 GMT+0100 (GMT+01:00)', // capacity: 7 // }, // { // color: 'red', // type: 'station wagon', // registration: 'Sat Mar 03 2018 01:00:00 GMT+0100 (GMT+01:00)', // capacity: 5 // }, // ... // ] 

Array.sortСравнивает два объекта и помещает первый объект во втором месте , если результат функции сортировки является положительным. Таким образом, вы можете смотреть на функцию сортировки, как если бы это был вопрос: следует ли поместить первый объект на второе место?

Make sure to always add the case for zero when the compared value of both objects is the same to avoid unnecessary swaps.

Checking if objects in array fulfill a condition - Array.every, Array.includes

Array.every and Array.some come handy when we just need to check each object for a specific condition.

Do we have a red cabrio in the list of cars? Are all cars capable of transporting at least 4 people? Or more web-centric: Is there a specific product in the shopping cart?

cars.some(car => car.color === "red" && car.type === "cabrio"); // output: true cars.every(car => car.capacity >= 4); // output: false 

You may remember the function Array.includes which is similar to Array.some, but works only for primitive types.

Summary

In this article, we went through the basic functions that help you create, manipulate, transform, and loop through arrays of objects. They should cover most cases you will stumble upon.

If you have a use-case that requires more advanced functionality, take a look at this detailed guide to arrays or visit the W3 schools reference.

Or get in touch with me and I will prepare another article :-)