Кроме карты, фильтровать, уменьшать

За последние годы в JavaScript было добавлено множество полезных методов работы с массивами. Есть также некоторые, которые существуют со времен ES5, но, возможно, не получают достаточного внимания. Это мой список фаворитов, основанный на их общей полезности и ясности кода, которую они обеспечивают.

Статические методы

Array.isArray

Доступно с ES5 — Поддержка браузера

Этому можно передать любой аргумент, чтобы проверить, является ли что-то массивом. Это лучше, чем утиный тип по двум причинам: он надежен, и его название ясно говорит о том, что он делает.

Array.isArray([]); // => true
Array.isArray('string'); // => false
Array.isArray(undefined); // => false
Array.isArray(null); // => false

Array.from

Доступно с ES2015 — Поддержка браузера

Это создает новый массив из любого итерируемого.

let iterable = 'abc';
Array.from(iterable); // => ['a', 'b', 'c']

Синтаксис распространения настолько хорош, что этот метод может показаться не очень полезным, но Array.from принимает необязательный второй и третий аргумент. Вторая — это функция сопоставления, которая применяется к каждому элементу во время создания. Третий аргумент предназначен для установки контекста this.

Array.from('abc', letter => letter.toUpperCase());
// => ['A', 'B', 'C']

Методы экземпляра

.every

Доступно с ES5 — Поддержка браузера

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

let myArr = [1, 1, 6];
myArr.every(num => num < 5); // => false
myArr.every(num => num > 0); // => true

.some

Доступно с ES5 — Поддержка браузера

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

let people = [
  { name: 'Ada' },
  { name: 'Grace' }
];
people.some(person => person.name === 'Grace');
// => true

Примечание. При вызове пустого массива some всегда возвращает false. И наоборот, every всегда будет возвращать true.

.find

Доступно с ES2015 — Поддержка браузера

Этот метод найдет элемент в массиве. Он похож на some, но возвращает сам найденный элемент или undefined, если он не найден.

let people = [
  { name: 'Ada' },
  { name: 'Grace' }
];
people.find(person => person.name === 'Ada');
// => { name: 'Ada' }

.findIndex

Доступно с ES2015 — Поддержка браузера

Так же, как find, но возвращает индекс найденного элемента или undefined, если он не найден.

.includes

Доступно с ES2016 — Поддержка браузера

Проверить, имеет ли массив заданное значение.

let myArray = [1, 2, 3];
myArray.includes(9); // => false
myArray.includes(1); // => true

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

Из МДН:

Для любых непримитивных объектов x и y, которые имеют одинаковую структуру, но сами являются разными объектами, все приведенные выше формы оцениваются как false.

let myObject = { foo: true };
let arrayWithObject = [ myObject ];
arrayWithObject.includes({ foo: true }); // => false
arrayWithObject.includes(myObject); // => true

Пожалуйста, полифилл

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

Вы можете автоматизировать добавление необходимых полифилов с помощью @babel/preset-env. Убедитесь, что для useBuiltIns установлено значение usage.

{
  "presets": [
    ["@babel/preset-env", {
      "useBuiltIns": "usage"
    }]
  ]
}

Тот факт, что вам нужно использовать полифиллы вместе с чем-то вроде Babel, может быть неочевидным. Какую бы стратегию полифилла вы ни использовали, просто знайте, что вам нужно будет убедиться, что эти методы существуют (будь то собственные или нет) перед их выполнением в вашей целевой среде.

Вывод

Вы можете многое сделать с помощью базовых массивов в JavaScript. Если вы используете правильные методы в соответствующих местах, ваш код будет на один шаг ближе к передаче намерений.

Первоначально опубликовано на nj.codes.