JavaScript метод .from()ECMAScript 2015

JavaScript Array

Определение и применение

JavaScript метод .from()ECMAScript 2015 преобразует и возвращает новый массив из массивоподобного, или итерируемого объекта.

Поддержка браузерами

МетодChrome
Chrome
Firefox
Firefox
Opera
Opera
Safari
Safari
Internet Explorer
IExplorer
Microsoft Edge
Edge
.from()ECMAScript 201545.032.032.09.0НетДа

JavaScript синтаксис:

// только с указанием  массивоподобного, или итерируемого объекта
var newArray = Array.from( arrayLike );

// с callback функцией
var newArray = Array.from( arrayLike, function( currentValue, index ));

// с использованием объекта, на который может ссылаться ключевое слово this
var newArray = Array.from( arrayLike, function( currentValue, index ),  thisValue );

Версия JavaScript

ECMAScript 2015 (6th Edition)

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

ПараметрОписание
arrayLikeМассивоподобный, или итерируемый объект, который преобразуется в массив. Обязательное значение.
function Функция обратного вызова, которая будет выполнена один раз для каждого элемента в массиве. Функция принимает следующие параметры:
  • currentValue - значение текущего элемента
  • index - индекс массива текущего элемента.

Если в качестве параметра метода передается что-то, что не является объектом функции, то будет вызвано исключение TypeError. Необязательный параметр.

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

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

В следующем примере мы с помощью метода .from()ECMAScript 2015 создадим новый массив из переменной и из строки:

let array = [1, 2, 3]; // инициализируем переменную, содержащую массив
let newArray = Array.from( array ); // инициализируем переменную, содержащую результат преобразования метода .from()
console.log( newArray ); // выводим в консоль значение переменной newArray 
// результат [1, 2, 3]


let newArrayString = Array.from( "string" ); // инициализируем переменную, содержащую результат преобразования метода .from()
console.log( newArrayString ); // выводим в консоль значение переменной newArrayString 
// результат ["s", "t", "r", "i", "n", "g"]

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

let array = [1, 2, 3]; // инициализируем переменную, содержащую массив

// используем стрелочную функцию во втором аргументе
let newArray = Array.from( array, ( currentValue, index ) => currentValue * index ); // инициализируем переменную, содержащую результат преобразования метода .from() 

console.log( newArray ); // выводим в консоль значение переменной newArray 
// результат [0, 2, 6]

В следующем примере мы рассмотрим использование третьего аргумента метода .from()ECMAScript 2015, который указывает на объект, на который мы можем ссылаться с использованием ключевого слова this внутри функции обратного вызова:

let numbers = [2, 3, 4]; // инициализируем переменную, содержащую массив числовых значений 
let myObject = { // инициализируем переменную, содержащую объект 
  square: function( currentValue ) { // метод объекта, который принимает значение  
    return currentValue * currentValue; // возвращаем новое значение (текущее значение умноженное на себя) 
  }
};

let squared = Array.from( numbers, function( currentValue ) {
    return this.square( currentValue ); // с помощью ключевого слова this вызываем метод объекта и возвращаем результат его выполнения
}, myObject ); // объект, на который мы можем ссылаться внутри функции (с помощью клюевого слова this) 

console.log( squared ); // выводим значение переменной squared равное [4, 9, 16];
JavaScript Array