Метод Array.from — как создать массив чисел в JavaScript

Это статический метод, который создаёт новый экземпляр массива из массивоподобного или итерируемого объекта. Метод Array.from в JavaScript возвращает массив из любого объекта со свойством length. Его можно использовать для создания массива чисел в указанном диапазоне.

В частности, в этой статье мы рассмотрим, что из себя представляет метод Array.from(), как он работает и как с его помощью можно создавать диапазон чисел.

Как работает метод Array.from в JavaScript

Этот метод принимает один обязательный параметр и два необязательных:

• arraylike (массивоподобный или итерируемый объект для преобразования в массив);
• mapFunc (функция вызывается для каждого элемента; необязательный);
• thisArg (используется при выполнении mapFunc; необязательный).

// Синтаксис
Array.from(arraylike, mapFunc, thisArg)

Чтобы увидеть, как это работает, давайте создадим массив из строки с помощью метода Array.from.

let newArray = Array.from('freeCodeCamp');

console.log(newArray); // ['f','r','e','e','C','o','d','e','C','a','m','p']

В приведённом выше примере мы получили массив строки. Использовать этот метод можно также для возврата массива из любого объекта со свойством length, которое определяет количество элементов в нём.

let arrayLike = {0: 1, 1: 2, 2: 3, length: 3};
let newArray = Array.from(arrayLike);

console.log(newArray); // [1,2,3]

Функция map позволяет добавить возможность манипулировать каждым элементом массива. Например, умножая каждый из них на определённое число.

let arrayLike = {0: 1, 1: 2, 2: 3, length: 3};
let newArray = Array.from(arrayLike, x => x * 2);

console.log(newArray); // [2,4,6]

Стоит отметить, что Array.from() — это статический метод, поэтому он использует имя класса Array. Его можно применять только как Array.from(), а не, например, myArray.from(), где myArray — массив. В этом случае он вернёт undefined.

Как создать последовательность через

Этот способ делает возможным создание последовательности чисел, используя функцию map. Например:

let newArray = Array.from({ length: 7 }, (value, index) => index);

console.log(newArray); // [0,1,2,3,4,5,6]

Описанный выше метод создаёт массив из 7 элементов, которые по умолчанию инициализируются как undefined.

let newArray = Array.from({ length: 7 }, (value, index) => value);

console.log(newArray); 
// [undefined,undefined,undefined,undefined,undefined,undefined,undefined]

Но при использовании функции map значение индекса теперь используется вместо фактического значения undefined.

Если используется фактическое значение, то получится массив из 7 элементов (в зависимости от длины) со значением undefined.

Читайте также: Использование операторов сравнения в Javascript.

Как создать диапазон чисел через метод Array.from

Теперь вы знаете, как создать массив с последовательностью чисел. То есть формировать диапазон чисел, чтобы они начинались и заканчивались указанным значением. Например, числа в диапазоне от 4 до 8 будут 4, 5, 6, 7, 8.

Вы также можете указать, хотите ли вы получить массив чётных или нечётных чисел в указанном диапазоне. Всё это может быть достигнуто с помощью метода Array.from().

const arrayRange = (start, stop, step) =>
    Array.from(
    { length: (stop - start) / step + 1 },
    (value, index) => start + index * step
);

Стоит отметить, что в приведённом выше примере коде длина массивоподобного объекта определяется путём вычитания последнего числа из первого в диапазоне и деления на шаг плюс единица. Это позволит получить точное количество элементов в массиве.

В функции map начальный номер добавляется к индексу каждого элемента (помните, что его значение всегда не определено) и умножается на значение шага. Эта функция сопоставления выполняется для каждого элемента и помогает вычислить его значение.

Давайте попробуем этот метод на нескольких примерах.

// Формируем перечень чисел в диапазоне от 2 до 7
let range = arrayRange(2, 7, 1);
console.log(range); // [2,3,4,5,6,7]

// Формируем перечень чётных чисел в диапазоне от 2 до 7
let evenRange = arrayRange(2, 7, 2);
console.log(evenRange); // [2,4,6]

// Формируем перечень нечётных чисел в диапазоне от 1 до 5
let oddRange = arrayRange(1, 5, 2);
console.log(oddRange); // [1,3,5]

Не забывайте, что существуют и другие варианты создания диапазона чисел в JavaScript, но эта статья посвящена методу Array.from().

Кроссбраузерность

Кроме Internet Explorer этот метод работает во всех современных браузерах.