Создание массивов в JavaScript — фундаментальная задача, однако есть несколько нюансов и ошибок, которые могут упустить из виду даже опытные разработчики. Давайте углубимся в основы и рассмотрим некоторые интересные аспекты создания массивов и манипуляций с ними, которые могут оказаться для вас полезными.

Базовое создание массива

Самый простой способ создания массива — использование литералов массива:

let arr = [];

Затем вы можете заполнить этот массив с помощью цикла:

for (let i = 0; i 



При этом создается массив с элементами [0, 1, 2, 3, 4]. Однако если вы создадите пустой массив, не заполняя его, вы получите массив без элементов и пустых слотов.


  
  
  Использование конструктора массива


Другой способ создания массивов — использование конструктора Array:



let arr = Array(5);




Когда передается один числовой аргумент, создается разреженный массив указанной длины, но без фактических элементов:



console.log(arr.length); // 5
console.log(arr); // [empty × 5]





  
  
  Разреженные массивы


Разреженные массивы имеют «пустые слоты», что может привести к неожиданному поведению при использовании таких методов, как карта, фильтр или forEach. Эти методы пропускают пустые слоты:



let arr = Array(5);
arr = arr.map((x, i) => i); // Still [empty × 5]




Чтобы заполнить такой массив, необходимо вручную задать значения:



arr[0] = 2;
arr[4] = 3;
console.log(arr); // [2, empty × 3, 3]





  
  
  Обработка разреженных массивов


Для эффективной обработки разреженных массивов вы можете использовать такие методы, как fill, для инициализации значений:



let arr = Array(5).fill(1);
console.log(arr); // [1, 1, 1, 1, 1]




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



let arr = Array(5).fill({});
arr[0].name = 'John';
console.log(arr); // [{name: 'John'}, {name: 'John'}, {name: 'John'}, {name: 'John'}, {name: 'John'}]




Каждый элемент ссылается на один и тот же объект. Чтобы избежать этого, используйте карту:



let arr = Array(5).fill(0).map(() => ({}));
arr[0].name = 'John';
console.log(arr); // [{name: 'John'}, {}, {}, {}, {}]





  
  
  Метод Array.from


Array.from предоставляет универсальный способ создания массивов из массивоподобных или итерируемых объектов:



let arr = Array.from({ length: 5 }, (_, i) => i);
console.log(arr); // [0, 1, 2, 3, 4]




Этот метод также может помочь при создании двумерных массивов:



let arr2D = Array.from({ length: 5 }, () => Array(5).fill(0));
arr2D[0][0] = 1;
console.log(arr2D); // [[1, 0, 0, 0, 0], [0, 0, 0, 0, 0], [0, 0, 0, 0, 0], [0, 0, 0, 0, 0], [0, 0, 0, 0, 0]]





  
  
  Итерация по массивам


JavaScript предоставляет несколько способов перебора массивов, каждый из которых по-разному обрабатывает разреженные массивы:

• Цикл for: обрабатывает каждый индекс, рассматривая пустые слоты как неопределенные.
• for...in: перебирает индексы массива, пропуская пустые слоты.
• for...of: перебирает значения, рассматривая пустые слоты как неопределенные.

Заключение

Понимание тонкостей создания массивов и манипуляций с ними в JavaScript поможет вам избежать распространенных ошибок и написать более эффективный код. Независимо от того, используете ли вы литералы массива, конструктор Array или такие методы, как Array.from и fill, знание того, как работают эти инструменты, позволит вам эффективно обрабатывать массивы в ваших проектах.

Если это руководство показалось вам полезным, дайте мне знать. Я всегда стремлюсь создавать больше контента, раскрывающего основы JavaScript. Спасибо за чтение и удачного программирования!