Создание массива с повторяющимися элементами несколько раз

Вы можете создать массив фиксированной длины и заполнить его одинаковыми значениями в JavaScript следующими способами:

1. Используя метод Array.apply, вы можете создать массив указанной длины, а затем заполнить его значениями с помощью метода map:

Array.apply(null, Array(10)).map(function(){return 5})
// Результат: [5, 5, 5, 5, 5, 5, 5, 5, 5, 5]

2. В ES6 вы можете воспользоваться методом Array.from, который позволяет создавать массивы из объектов, имеющих свойства length, заполняя их с помощью функции:

Array.from({length: 10}, () => 5)
// Результат: [5, 5, 5, 5, 5, 5, 5, 5, 5, 5]

Оба этих подхода создают массив длиной 10, заполненный значением 5. Выберите тот, который больше подходит для вашего кода!

...и метод Array.fill() приходит на помощь!

Ранее приходилось писать это всё вручную, пока не узнал об этом методе 🤦🏽‍♂️

Array(5).fill('🔥')  // =>  ['🔥','🔥','🔥','🔥','🔥']

Array(4).fill(0)  // =>  [0, 0, 0, 0]

Также легко можно создать последовательный массив, используя fill() + map():

Array(4).fill('').map((_, i) => i + ' 🌵') // =>  ['0 🌵','1 🌵','2 🌵','3 🌵']

Array(3).fill(' 🌻').map((flower, i) => i + flower) // =>  ['0 🌻','1 🌻','2 🌻']

❗️Имейте в виду, что при создании объектов и массивов с помощью .fill() вы работаете с ссылочными типами❗️

Это значит, что JavaScript будет рассматривать все созданные элементы как один и тот же объект (что может привести к неожиданным ошибкам, если вы захотите взаимодействовать с созданными объектами).

// ❌ Будьте осторожны при использовании .fill() с объектами и массивами:

Array(3).fill({ value: 2 })  // =>  [{ value: 2 },{ value: 2 },{ value: 2 }]

Этот код работает, но гораздо безопаснее использовать паттерн .fill().map(). Вот так:

// 👍🏽 Гораздо лучше!

Array(3).fill().map(item => ({ value: 2 }))

Вы можете сделать это следующим образом:

function fillArray(value, len) {
  if (len == 0) return [];
  var a = [value];
  while (a.length * 2 <= len) a = a.concat(a);
  if (a.length < len) a = a.concat(a.slice(0, len - a.length));
  return a;
}

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

Примечание: Вы также можете значительно улучшить свою функцию, используя push вместо concat, так как concat создает новый массив на каждой итерации. Вот так (приведено лишь как пример, как можно работать с массивами):

function fillArray(value, len) {
  var arr = [];
  for (var i = 0; i < len; i++) {
    arr.push(value);
  }
  return arr;
}

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

Array(3).fill(['a','b','c']).flat() 

Этот код вернет:

Array(9) [ "a", "b", "c", "a", "b", "c", "a", "b", "c" ]

Здесь мы создаем массив длиной 3, заполняем его массивом ['a','b','c'], а затем используем метод .flat(), чтобы "развернуть" вложенные массивы в один. Таким образом, мы получаем требуемый массив, состоящий из повторяющихся элементов.

В JavaScript для создания массива с одинаковыми значениями можно использовать метод Array.from(). Например, следующий код:

Array.from({length: 5}, () => 1)

создаст массив [1, 1, 1, 1, 1]. Здесь мы создаем массив длиной 5, и для каждого элемента массива возвращаем значение 1.

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

Array.from({length: 5}, (e, i) => i)

Этот код создаст массив [0, 1, 2, 3, 4]. Здесь i — это индекс текущего элемента, который автоматически генерируется в функции, передаваемой в Array.from().