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(' ');