Иногда нам может потребоваться получить отдельные значения из массива объектов в нашем коде JavaScript.

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

Извлечение значений с помощью методов массива

Один из способов получить отдельные значения из массива объектов в JavaScript - использовать собственные методы массива.

Например, мы можем написать:

const array = [{
    "name": "jane",
    "age": 17
  },
  {
    "name": "joe",
    "age": 17
  },
  {
    "name": "bob",
    "age": 35
  }
];
const uniques = array.map(item => item.age)
  .filter((value, index, self) => self.indexOf(value) === index)
console.log(uniques)

для вызова map и filter для возврата уникальных значений свойства age из всех элементов в массиве.

Мы вызываем map, чтобы вернуть массив со всеми значениями age.

Затем мы используем filter, чтобы вернуть массив с различными значениями массива значений age, возвращенного из map.

Обратный вызов, который мы передаем в filter, имеет параметры value, index и self.

value имеет значение, которое проходит итерацию.

index имеет индекс value.

А self - это сам array.

Мы можем проверить, является ли это первым экземпляром заданного значения с помощью self.indexOf(value) === index.

indexOf возвращает индекс первого экземпляра value в массиве.

Таким образом, мы можем использовать этот возвращаемый массив, который имеет только первый экземпляр данного элемента.

Следовательно, uniques это [17, 35].

Мы можем заменить вызов filter, поместив массив значений age в набор, а затем распространив его обратно в массив:

const array = [{
    "name": "jane",
    "age": 17
  },
  {
    "name": "joe",
    "age": 17
  },
  {
    "name": "bob",
    "age": 35
  }
];
const uniques = [...new Set(array.map(item => item.age))]
console.log(uniques)

И uniques имеет то же значение, что и в предыдущем примере.

Распространение можно заменить методом Array.from:

const array = [{
    "name": "jane",
    "age": 17
  },
  {
    "name": "joe",
    "age": 17
  },
  {
    "name": "bob",
    "age": 35
  }
];
const uniques = Array.from(new Set(array.map(item => item.age)))
console.log(uniques)

поскольку Array.from работает с любыми итерируемыми объектами, включая наборы, для преобразования их в массив.

Лодаш

Lodash имеет метод uniq для возврата уникальных значений из массива объектов.

Итак, мы можем использовать это в письменной форме;

const array = [{
    "name": "jane",
    "age": 17
  },
  {
    "name": "joe",
    "age": 17
  },
  {
    "name": "bob",
    "age": 35
  }
];
const uniques = _.uniq(_.map(array, 'age'));
console.log(uniques)

Мы вызываем map, чтобы вернуть массив age значений из array.

Затем мы вызываем uniq в возвращенном массиве, чтобы получить уникальные значения из этого возвращенного массива.

Таким образом, мы получаем тот же результат для uniques, что и в других примерах.

Заключение

Мы можем использовать собственные методы массива JavaScript или Lodash для извлечения различных значений из свойства из массива объектов.

Больше контента на plainenglish.io