5 способов создать массив в JavaScript

Способ № 1 (объявление)

1.1. С помощью литерала массива.

Синтаксис:

[element0, element1, ..., elementN]

Параметры:

elementN — элементы, из которых создаётся массив.

• Литерал массива — это список из нуля или более выражений, каждое из которых представляет элемент массива, заключенный в квадратные скобки ( [] ). Когда вы создаете массив, используя литерал массива, он инициализируется с помощью переданных значений, которые будут являться его элементами, длина массива будет равна числу переданных аргументов.
• Создание пустого массива

const array = [];

• Создание массива и инициализация (создание одного элемента не имеет особенностей)

const array = [0, false, ''];

• Можно указывать не все значения, пропущенные элементы будут иметь значение undefined

const array = [0, ,2];

1.2. Через конструктор Array()

Синтаксис:

new Array(element0, element1[, ...[, elementN]])
new Array(arrayLength)

Параметры:

elementN — элементы, из которых создаётся массив.

arrayLength — длина массива (количество элементов )

• создание пустого массива

const array = new Array();

• массив с инициализацией (в примере массив с двумя элементами. Значение первого элемента — 1, значение второго элемента — 2). Данная запись возможна только при числе элементов от двух.

const array = new Array(1,2);

• массив с заданной длинной, но не инициализированным(-и) значением(-ями). В данном примере длина массива (array.length) будет 3 элемента, значение элементов - undefined.

const array = new Array(3);

1.3. Объявление массива как функцию

• Если вызовем Array как функцию, будет создан новый объект Array. Этот метод вызывает конструктор Array, поэтому примеры выше будут выглядеть следующим образом:

//создание пустого массива
const array1 = Array();
//создание массива и инициализация
const array2 = Array(1,2);
//создание массива с заданной длинной
const array3 = Array(3);

1.4. С помощью метода Array.of()

Синтаксис:

Array.of(element0[, element1[, ...[, elementN]]])

Параметры:

elementN — элементы, из которых создаётся массив.

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

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

Способ № 2 (копирование)

2.1. Создание массива с помощью копирования — метод slice(begin, end).

Синтаксис:

arr.slice([begin[, end]])

Параметры:

begin — индекс, с которого начинается извлечение.Если индекс отрицательный, begin указывает смещение от конца последовательности. Если begin опущен, slice() начинает работать с индекса 0.

end — индекс, по которому заканчивается извлечение. Если индекс отрицательный, end указывает смещение от конца последовательности. Если end опущен, slice() извлекает все элементы до конца последовательности (arr.length).

Возвращает новый массив, старый не изменяется

• Метод slice() позволяет копировать массив полностью или частично. Этот метод принимает два аргумента slice(begin, end). Первый — begin указывает на индекс элемента с которого будет копирование массива, второй — end до какого индекса (не включительно). Если второй аргумент не определён (undefined), то копирование до конца массива. slice() — частный случай, где begin и end — не определены. В примере array2 — получит все элементы массива array

const array = [1, 2, 3];
const array2 = array.slice(); 
//array  [1, 2, 3]
//array2 [1, 2, 3]

2.2. Создание массива с помощью копирования — метод concat()

Синтаксис:

var new_array = old_array.concat(value1[, value2[, ...[, valueN]]])

valueN — массивы и/или значения, соединяемые в новый массив.

Возвращает новый массив, старый не изменяется

• Метод concat() без аргументов — копирует массив полностью. Принимает множество аргументов, которые добавляются значениями в новый массив в конец. Если значение массив, то будет добавлены значения этого массива (но, не объекты).

const array = [1, 2, 3];
const array2 = array.concat() 
//array2 [1, 2, 3]

Способ № 3 (изменение существующего)

3.1. Создание массива из другого путём изменения первого — метод splice().

Синтаксис:

array.splice(start, deleteCount[, item1[, item2[, ...]]])

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

deleteCount — целое число, показывающее количество старых удаляемых из массива элементов. Если deleteCount равен 0, элементы не удаляются. Если deleteCount больше количества элементов, начиная с индекса start будут удалены все элементы до конца массива.

itemN — необязательные параметры. Добавляемые к массиву элементы.

• Без аргументов метод splice() возвращает пустой массив. Когда указан первый аргумент — splice(1) — удаляет все элементы базового массива, начиная с указанного индекса и массив из удалённых элементов. Второй аргумент в методе splice(1, 2) указывает на количество удаляемых элементов. Если указано 0- удалять не будет. Все последующие аргументы этого метода будут добавлены как элементы массива на место удалённых элементов

const array = [1, 2, 3];
const array2 = array.splice();
const array3 = array.splice(0, 3, 5, 2, 3)
//array = [1, 2, 3]
//array2 = []
//array3 = [1, 2, 3], но array имеет новые значения [5, 2, 3]

Способ № 4. (из объекта)

4.1. Создание массива с помощью метода from()

Нужно оговорить, что объект, из которого создаём массив должен быть массивоподобным или инерируемым

Синтаксис:

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

Параметры:

arrayLike — массивоподобный или итерируемый объект, преобразуемый в массив.

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

thisArg— необязательный параметр. Значение, используемое в качестве this при выполнении функции mapFn.

• Простой пример создания с помощью этого метода массива из строки

const array = Array.from('text'); //array = ['t','e','x','t']

Способ № 5. Array comprehension

Этот способ назвала синтаксисом, который был доступен в черновике ECMAScript2015. Array comprehension — это JavaScript-выражение, которое позволяет быстро создавать новый массив из существующего. Данный синтаксис не стандартен, поэтому вместо него рекомендованы следующие:

5.1. Создание нового массива с помощью метода filter()

Синтаксис:

var newArray = arr.filter(callback[, thisArg])

Параметры:

callback — функция, которая будет вызвана для каждого элемента массива. Если функция возвращает true, то элемент добавляется в новый массив, если false, то не добавляется. В функцию будет передано три аргумента: element, index, array.

element — текущий обрабатываемый элемент в массиве.

index — необязательный параметр. Индекс текущего обрабатываемого элемента в массиве.

array — необязательный параметр. Массив, по которому осуществляется проход.

thisArg — необязательный параметр. Значение, используемое в качестве this при вызове функции callback.

• Способ создания нового массива из существующего с элементами, для которых результат выполнения функции (передали первым аргументом) будет true.

const array = ['t', 'e', 'x', 'text'];
const array2 = array.filter(char => char.length < 2);
//array2 = ['t', 'e', 'x']

5.2. Создание нового массива с помощью метода map()

Синтаксис:

var new_array = arr.map(function callback(currentValue, index, array) { 
    // Возвращает элемент для new_array 
}[, thisArg])

Параметры:

callback— функция, создающая элемент в новом массиве, принимает три аргумента:currentValue — текущий обрабатываемый элемент массива.index— индекс текущего обрабатываемого элемента в массиве.array— массив, по которому осуществляется проход.

thisArg— необязательный параметр. Значение, используемое в качестве this при вызове функции callback.

• Метод вызывает функцию один раз для каждого элемента базового массива и результат выполнения будет элементом нового массива. В примере каждый элемент массива возводиться степень 2 (умножается сам на себя). Если функция из примера будет возвращать return elem; , то мы просто с помощью этого метода скопируем базовый массив.

const array = [1, 2, 3, 4];
const array2 = array.map(elem =>elem ** 2);
//array2 = [1, 4, 9, 16];

5.3. С помощью оператора расширения spread

Синтаксис:

• в литерах массива:

[...iterableObj, 4, 5, 6]

• при деструктурирующем присваивании

[a, b, ...iterableObj] = [1, 2, 3, 4, 5];

Параметры:

iterableObj — обязательный. Итерируемый объект.

• Пример для деструктурирующего присваивания. Вообщем-то, это оператор rest — противоположность spread — собирает множество в один массив. В данном случае, множество, это всё, кроме первого элемента (index ==0), которое решили присвоить переменной name.

const array = ['Olga', 't', 'e', 'x', 't'];
const [name, ...restElement] = array;
const array2 = restElement;
//array без изменения, name = 'Olga', array2 = ['t', 'e', 'x', 't']

• А в этом примере получилось копирование, аналогично методу slice():

const array = [1, 2, 3];
const array2 = [...array];
//array  [1, 2, 3]
//array2 [1, 2, 3]

5.4. С помощью стрелочных функций

Синтаксис очень объемный, поэтому оставлю ссылку на него

• Стрелочные функции отличаются от обычных тем, что у них нет собственного объекта аргумента и контекста this.
• В примере создали функцию, которая возвращает массив элементов, которые передали аргументами с помощью оператора rest

const array = (...rest) => rest;
array(1, 2, 3);
//array [1, 2, 3]

• С помощью стрелочной функции и метода from() можно получить результат примера с методом map():

const array = Array.from([1, 2, 3, 4], x => x ** 2);
// [1, 4, 9, 16]

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

['Спасибо','за','внимание'].join(' ');