README.md

Новые возможности JavaScript — Новые методы Array

Оглавление

Array.includes

В ECMAScript 5 для поиска требуемого элемента в массиве приходилось использовать метод Array.indexOf или Array.some (при этом мало кто знает о методах Array.some/Array.every).

Вот как это выглядело:

// ECMAScript 5
var array = [1, 2, 3, 4, 5];
var searchElement = 5;

console.log(array.indexOf(searchElement) !== -1);
// Ожидаемый результат: true

// ECMAScript 5
var array = [1, 2, 3, 4, 5];
var searchElement = 5;

console.log(array.some(item => item === searchElement));
// Ожидаемый результат: true

Однако в ECMAScript 7 появился метод Array.includes. В него достаточно передать искомый элемент, и метод вернёт boolean значение. В отличие от предыдущих двух методов теперь сравнивать текущий элемент массива с искомым не надо.
При этом стоит отметить, что алгоритмическая сложность осталась прежней O(n).

// ECMAScript 7
const array = [1, 2, 3, 4, 5];
const searchElement = 5;

console.log(array.includes(searchElement));
// Ожидаемый результат: true

Array.find

Метод Array.find производит поиск искомого элемента по массиву, и возвращает первое значение, которое соответствует заданному условию в функции обратного вызова.

// ECMAScript 6
const array = [0, 5, 10];

console.log(array.find(item => item > 1));
// Ожидаемый результат: 5

Array.findIndex

Метод Array.findIndex работает таким же образом, как и find, но вместо значения искомого элемента, соответствующему условию в функции обратного вызова, возвращает индекс данного элемента.

// ECMAScript 6
const array = [0, 5, 10];

console.log(array.findIndex(item => item > 1));
// Ожидаемый результат: 1

Array.fill

Метод Array.fill позволяет заполнить массив заданным значением.

// ECMAScript 6
const array = [1, 2, 3];

console.log(array.fill(5));
// Ожидаемый результат: [5, 5, 5]

// ECMAScript 6
console.log(new Array(3).fill(5));
// Ожидаемый результат: [5, 5, 5]

При этом fill принимает 2 дополнительных аргумента: индекс позиций начала и конца заполнения массива.

// ECMAScript 6
const array = [0, 2, 4, 6, 8];

console.log(array.fill(10, 1, 3));
// Ожидаемый результат: [0, 10, 10, 10, 8]

Array.from

Метод Array.from создаёт новый экземпляр массива Array из:

• «Псевдомассива», имеющего свойство length и индексированные элементы. Например, результат поиска по DOM методом document.getElementsByClassName();
• Интерируемых объектов, содержимое которых можно получить по одному элементу за раз. Массивы являются итерируемыми, так же как и новые структуры данных Map и Set.

// ECMAScript 6
const list = document.querySelectorAll('.className');

Array.from(list).forEach(item => console.log(item));

function Fn() {
  return Array.from(arguments);
}

console.log(Fn('one', 'two', 3, 4, 5));
// Ожидаемый результат: ["one", "two", 3, 4, 5]

Вот так, например, можно создать массив со значениями элементов, соответствующих индексу:

// ECMAScript 6
const array = Array.from(new Array(5), (value, index) => index);

console.log(array);
// Ожидаемый результат: [0, 1, 2, 3, 4]

Array.of

Метод Array.of создаёт новый экземпляр массива Array из произвольного числа аргументов, вне зависимости от числа или типа аргумента.

// ECMAScript 6
const array = [1, 2, 3, 4, 5];

console.log(Array.of(1));
// Ожидаемый результат: [1]
console.log(Array.of(1, 2, 3));
// Ожидаемый результат: [1, 2, 3]
console.log(Array.of(array));
// Ожидаемый результат: [[1, 2, 3, 4, 5]]
console.log(Array.of(...array));
// Ожидаемый результат: [1, 2, 3, 4, 5]

---

Следующие методы помогают в повторении массивов:

• Array.entries
• Array.keys
• Array.values

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

// ECMAScript 6
const array = ['a', 'b', 'c'];

console.log(array.entries());
// Ожидаемый результат: [[0, "a"], [1, "b"], [2, "c"]]
console.log(array.keys());
// Ожидаемый результат: [0, 1, 2]
console.log(array.values());
// Ожидаемый результат: ["a", "b", "c"]