LearnJS

Создание массива в JavaScript

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

В JavaScript массив чаще всего создают с помощью квадратных скобок.

let users = [];

Пустой массив

Пустой массив записывается так:

let tasks = [];

В нем пока нет элементов, поэтому длина равна 0.

let tasks = [];

console.log(tasks.length); // 0

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

let numbers = [];

numbers.push(10);
numbers.push(20);

console.log(numbers); // [10, 20]

Массив с элементами

Если элементы известны сразу, их перечисляют внутри квадратных скобок через запятую.

let fruits = ['apple', 'orange', 'banana'];

console.log(fruits);

Порядок элементов сохраняется. Первый элемент будет иметь индекс 0, второй - индекс 1, третий - индекс 2.

let fruits = ['apple', 'orange', 'banana'];

console.log(fruits[0]); // apple
console.log(fruits[1]); // orange

В конце последнего элемента можно оставить запятую.

let fruits = [
  'apple',
  'orange',
  'banana',
];

Такая запятая не добавляет новый элемент. Она просто помогает удобнее менять строки местами и добавлять новые значения.

Какие значения можно хранить

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

let values = ['Анна', 25, true];

JavaScript это позволяет, но на практике чаще стараются хранить в одном массиве однотипные данные.

let prices = [1200, 850, 400];
let names = ['Анна', 'Олег', 'Мария'];

Такой массив проще читать, перебирать и передавать в функции.

Создание через Array()

Массив также можно создать через конструктор Array().

let users = new Array();

console.log(users); // []

Если передать несколько значений, они станут элементами массива.

let numbers = new Array(10, 20, 30);

console.log(numbers); // [10, 20, 30]

Но в обычном коде такой вариант используют редко. Запись через квадратные скобки короче и читается проще.

let numbers = [10, 20, 30];

Массив заданной длины

У new Array() есть особенность: если передать одно число, JavaScript создаст не массив с этим числом, а пустой массив заданной длины.

let items = new Array(3);

console.log(items); // [empty x 3]
console.log(items.length); // 3

В таком массиве есть длина, но нет обычных элементов.

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

let numbers = [3];

console.log(numbers); // [3]

Если нужно заранее создать массив из нескольких одинаковых значений, можно использовать fill().

let scores = new Array(3).fill(0);

console.log(scores); // [0, 0, 0]

Создание через Array.from()

Array.from() создает массив из значения, которое можно перебрать.

Например, из строки можно получить массив символов.

let letters = Array.from('JavaScript');

console.log(letters);

Результат:

['J', 'a', 'v', 'a', 'S', 'c', 'r', 'i', 'p', 't']

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

let buttons = Array.from(document.querySelectorAll('button'));

console.log(buttons);

После этого с buttons можно работать как с обычным массивом.

Что выбрать

В большинстве случаев выбирайте квадратные скобки.

let users = [];
let roles = ['admin', 'editor', 'user'];

Такой синтаксис встречается чаще всего и быстрее считывается при чтении кода.

new Array() нужен редко. Обычно он полезен только тогда, когда заранее нужна конкретная длина массива.

Array.from() стоит использовать, когда массив нужно получить из строки, коллекции DOM-элементов или другого перебираемого значения.

Итого

Массив чаще всего создают через квадратные скобки.

  • [] создает пустой массив.
  • [‘apple’, ‘orange’] создает массив с элементами.
  • Элементы массива перечисляются через запятую.
  • new Array(3) создает пустой массив длиной 3, а не массив [3].
  • Array.from() помогает создать массив из перебираемого значения.