Кроме карты, фильтровать, уменьшать
За последние годы в 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.