Лучшее из современного JavaScript  — Array.from и получение элементов

С 2015 года JavaScript значительно улучшился.

Пользоваться им сейчас гораздо приятнее, чем когда-либо.

В этой статье мы рассмотрим метод Array.from и некоторые методы экземпляра.

Array.from и карта

Array.from принимает второй аргумент, который принимает функцию, которая сопоставляет запись с нужными нам значениями.

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

const divs = document.querySelectorAll('div');
const texts = Array.from(divs, d => d.textContent);

Мы получаем элементы div с помощью метода querySelectorAll.

Затем мы вызываем Array.from с NodeList с div в качестве первого аргумента.

Второй аргумент — это обратный вызов, позволяющий нам сопоставить значение.

Это короче, чем писать:

const divs = document.querySelectorAll('div');
const texts = Array.prototype.map.call(divs, s => s.textContent);

Метод from является статическим, поэтому он будет унаследован, если мы создадим подкласс массива.

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

const obj = {
  length: 1,
  0: 'foo'
};
class FooArray extends Array {
  //...
}
const arr = FooArray.from(obj);

Мы можем передать подобный массиву объект в FooArray.from так же, как и с любым массивом.

Функция отображения также работает.

Итак, мы можем написать:

class FooArray extends Array {
  //...
}
const divs = document.querySelectorAll('div');
const arr = FooArray.from(divs, d => d.textContent);

Мы вызвали FooArray.from так же, как и Array.from, и получили тот же результат.

Array.of

Array.of — еще один метод массива.

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

Это альтернатива конструктору Array.

Вместо того, чтобы писать:

const arr = new Array(1, 2, 3);

Мы можем написать:

const arr = Array.of(1, 2, 3);

Array.of лучше, поскольку возвращает массив с аргументами, даже если аргумент только один.

Это не относится к конструктору Array.

Если мы передадим один аргумент, то он попытается создать массив заданной длины.

Это также работает с подклассами Array.

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

class FooArray extends Array {
  //...
}
const arr = FooArray.of(1, 2, 3);

Затем мы можем проверить, является ли arr экземпляром FooArray, написав:

console.log(arr instanceof FooArray);
console.log(arr.length === 3);

Array.prototype Методы

В ES6 также добавлены новые методы Array.prototype.

К ним относятся Array.prototype.entries() , Array.prototype.keys() и Array.prototype.entries() .

Array.prototype.entries() возвращает массив с массивами index и element в качестве записей.

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

const arr = ['foo', 'bar', 'baz'];
for (const [index, element] of arr.entries()) {
  console.log(index, element);
}

index будет иметь индекс каждой записи, а element — элемент для каждого индекса.

Array.prototype.keys() имеют индекс массива.

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

const arr = ['foo', 'bar', 'baz'];
for (const index of arr.keys()) {
  console.log(index);
}

Затем мы получаем значение index для каждой записи.

Array.prototype.values возвращает массив значений.

Итак, мы можем написать:

const arr = ['foo', 'bar', 'baz'];
for (const element of arr.values()) {
  console.log(element);
}

Поиск элементов массива

Мы можем искать элементы массива с помощью метода Array.prototype.find.

Он принимает predicate, который является обратным вызовом, который возвращает условие, которое мы ищем.

Второй аргумент — это значение для this, которое мы используем в нашем обратном вызове.

Он возвращает первый найденный элемент.

Если ничего не найдено, то возвращается undefined.

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

const num = [2, -1, 6].find(x => x < 0)

тогда num равно -1.

Если мы напишем:

const num = [2, 1, 6].find(x => x < 0)

тогда num равно undefined .

Вывод

Array.from можно использовать для сопоставления элементов так, как мы хотим.

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