ES6 в действии: новый Array. * И Array.prototype. * Методы

В этой статье мы обсудим большинство новых методов, доступных в ES6, которые работают с типом Array , используя Array.* И Array.prototype.* .

Обсуждая их, я напишу Array.method() когда опишу метод «class», и Array.prototype.method() когда Array.prototype.method() метод «instance».

Мы также увидим некоторые примеры использования и упомянем несколько полифилов для них. Если вам нужна библиотека polyfill-them-all, вы можете использовать es6-shim Пола Миллера .

Array.from ()

Первый метод, который я хочу упомянуть, это Array.from() . Он создает новый экземпляр Array из массива или итеративного объекта. Этот метод может быть использован для решения старой проблемы с массивными объектами, которую большинство разработчиков решают с помощью этого кода:

 // typically arrayLike is arguments var arr = [].slice.call(arrayLike); 

Синтаксис Array.from() показан ниже:

 Array.from(arrayLike[, mapFn[, thisArg]]) 

Значение его параметров:

• arrayLike : arrayLike или повторяемый объект
• mapFn : функция для вызова каждого содержащегося элемента
• thisArg : значение для использования в качестве контекста ( this ) функции mapFn .

Теперь, когда мы знаем его синтаксис и его параметры, давайте посмотрим на этот метод в действии. В приведенном ниже коде мы собираемся создать функцию, которая принимает переменное число аргументов и возвращает массив, содержащий эти элементы, удвоенные:

 function double(arr) { return Array.from(arguments, function(elem) { return elem * 2; }); } const result = double(1, 2, 3, 4); // prints [2, 4, 6, 8] console.log(result); 

Демонстрационная версия предыдущего кода показана ниже и также доступна на JSBin .

Этот метод поддерживается в Node и во всех современных браузерах, за исключением Internet Explorer. Если вам требуется поддержка старых браузеров, на выбор предлагается пара полифилов: один доступен на странице метода в MDN , а другой написан Матиасом Биненсом и называется Array.from .

Array.prototype.find ()

Еще один из представленных методов — Array.prototype.find() . Синтаксис этого метода:

 Array.prototype.find(callback[, thisArg]) 

Как видите, он принимает функцию обратного вызова, используемую для проверки элементов массива, и необязательный аргумент для установки контекста ( this значения) функции обратного вызова. Функция обратного вызова получает три параметра:

• element : текущий элемент
• index : индекс текущего элемента
• array : массив, который вы использовали для вызова метода.

Этот метод возвращает значение в массиве, если он удовлетворяет предоставленной функции обратного вызова или undefined противном случае. Обратный вызов выполняется один раз для каждого элемента в массиве, пока не найдет элемент, в котором будет возвращено истинное значение. Если в массиве более одного элемента, он вернет истинное значение, и будет возвращен только первый.

Пример использования показан ниже:

 const arr = [1, 2, 3, 4]; const result = arr.find(function(elem) { return elem > 2; }); // prints "3" because it's the first // element greater than 2 console.log(result); 

 const arr = [1, 2, 3, 4]; const result = arr.findIndex(function(elem) {return elem > 2;}); // prints "2" because is the index of the // first element greater than 2 console.log(result); 

 Array.prototype.keys() 

 const arr = [1, 2, 3, 4]; const iterator = arr.keys(); // prints "0, 1, 2, 3", one at a time, because the // array contains four elements and these are their indexes let index = iterator.next(); while(!index.done) { console.log(index.value); index = iterator.next(); } 

 Array.prototype.values() 

 const arr = [1, 2, 3, 4]; const iterator = arr.values(); // prints "1, 2, 3, 4", one at a time, because the // array contains these four elements let index = iterator.next(); while(!index.done) { console.log(index.value); index = iterator.next(); } 

 Array.prototype.fill(value[, start[, end]]) 

 const arr = new Array(6); // This statement fills positions from 0 to 2 arr.fill(1, 0, 3); // This statement fills positions from 3 up to the end of the array arr.fill(2, 3); // prints [1, 1, 1, 2, 2, 2] console.log(arr);