Как создать список в JS?

Создание списков в JavaScript

В JavaScript существует несколько способов создания и работы со списками (массивами). Давайте рассмотрим основные подходы.

Основные методы создания массивов

1. Литерал массива (наиболее распространенный способ)

// Создание пустого массива
const emptyList = [];

// Создание массива с элементами
const fruits = ['apple', 'banana', 'orange'];
const numbers = [1, 2, 3, 4, 5];
const mixed = [1, 'text', true, {name: 'John'}, [1, 2, 3]];

// Многострочное объявление (для лучшей читаемости)
const colors = [
    'red',
    'green',
    'blue',
    'yellow',
    'purple'
];

2. Конструктор Array

// Пустой массив
const arr1 = new Array();

// Массив с определенной длиной
const arr2 = new Array(5); // Создает массив с 5 пустыми слотами

// Массив с элементами
const arr3 = new Array(1, 2, 3, 4, 5);
const arr4 = new Array('a', 'b', 'c');

3. Array.from() (ES6+)

// Из строки
const fromString = Array.from('hello');
// Результат: ['h', 'e', 'l', 'l', 'o']

// Из Set
const fromSet = Array.from(new Set([1, 2, 2, 3]));
// Результат: [1, 2, 3]

// Из Map
const fromMap = Array.from(new Map([['a', 1], ['b', 2]]));
// Результат: [['a', 1], ['b', 2]]

// С функцией преобразования
const doubled = Array.from([1, 2, 3], x => x * 2);
// Результат: [2, 4, 6]

4. Array.of() (ES6+)

// Создает массив из аргументов
const list1 = Array.of(7);       // [7]
const list2 = Array.of(1, 2, 3); // [1, 2, 3]
const list3 = Array.of();        // []

// Разница с конструктором Array:
const a = Array.of(7);    // [7]
const b = new Array(7);   // Массив с 7 пустыми слотами

Работа с элементами списка

const items = ['first', 'second', 'third'];

// Доступ по индексу
console.log(items[0]);      // 'first'
console.log(items[1]);      // 'second'

// Изменение элементов
items[1] = 'updated';
console.log(items);         // ['first', 'updated', 'third']

// Добавление элементов
items.push('fourth');       // Добавление в конец
items.unshift('zero');      // Добавление в начало

// Удаление элементов
items.pop();                // Удаление с конца
items.shift();              // Удаление с начала

Создание списка объектов

// Список пользователей
const users = [
    { id: 1, name: 'Alice', age: 25 },
    { id: 2, name: 'Bob', age: 30 },
    { id: 3, name: 'Charlie', age: 35 }
];

// Список продуктов
const products = [
    { id: 101, name: 'Laptop', price: 999, category: 'electronics' },
    { id: 102, name: 'Mouse', price: 25, category: 'electronics' },
    { id: 103, name: 'Notebook', price: 5, category: 'stationery' }
];

Динамическое создание списков

// Создание списка чисел от 1 до 10
const numbersList = [];
for (let i = 1; i <= 10; i++) {
    numbersList.push(i);
}

// Использование Array.from с длиной
const sequence = Array.from({length: 10}, (_, i) => i + 1);
// Результат: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

// Генерация случайных чисел
const randomNumbers = Array.from({length: 5}, () => Math.floor(Math.random() * 100));

Особенности и лучшие практики

1. Используйте const для объявления массивов, если не планируете переназначать переменную:

   const list = [1, 2, 3];
   list.push(4); // Можно, массив изменяется
   // list = [5, 6, 7]; // Ошибка - нельзя переназначить const
   

2. Spread оператор для создания копий и объединения:

   const original = [1, 2, 3];
   const copy = [...original];
   const combined = [...original, 4, 5, ...copy];
   

3. Деструктуризация для извлечения значений:

   const [first, second, ...rest] = [1, 2, 3, 4, 5];
   console.log(first); // 1
   console.log(second); // 2
   console.log(rest); // [3, 4, 5]
   

4. Многомерные массивы:

   const matrix = [
       [1, 2, 3],
       [4, 5, 6],
       [7, 8, 9]
   ];
   
   console.log(matrix[1][2]); // 6
   

Современные подходы (ES6+)

// Генерация диапазона чисел
const range = (start, end) => 
    Array.from({length: end - start + 1}, (_, i) => start + i);

// Уникальные значения
const uniqueArray = [...new Set([1, 2, 2, 3, 3, 3])];

// Плоское представление вложенных массивов
const nested = [1, [2, [3, [4]]]];
const flatArray = nested.flat(Infinity);

Рекомендации по выбору метода:

• Для простых случаев используйте литералы массива []
• Для преобразования итерируемых объектов используйте Array.from()
• Для создания массивов из аргументов используйте Array.of()
• Избегайте new Array() с одним числовым аргументом (создает массив с пустыми слотами)

Правильный выбор метода создания списка зависит от конкретной задачи, но в большинстве случаев литерал массива [] является наиболее читаемым и производительным решением.