Блог

Главная - Вопросы по программированию - JavaScript цикл возврата к началу массива, когда индекс больше длины массива

JavaScript цикл возврата к началу массива, когда индекс больше длины массива

#javascript #arrays #loops #indexing

#JavaScript #Массивы #Циклы #Индексирование

Вопрос:

Я повсюду искал решение для этого, но, похоже, я нигде не могу найти ответ! Возможно, я просто неправильно формулирую свой вопрос, но как я могу вернуться к началу массива, если индекс больше длины массива? Пример смотрите в моем коде ниже:

 // Array of colours
let colours = ["#FFBE36", "#FF6447", "#77FF47", "#D547FF", "#FF9E47", "#47DBFF", "#FF4770"];

// For each pack, a background colour from the array above is assigned. 
// However, these are fetched from a database so could be more than the 
// length of the array
var packs = document.getElementsByClassName("pack-item");
for (var i = 0, len = packs.length; i < len; i  ) {
    // Here if i is larger than colours.length, loop back to start of 
    // colours array, e.g colours[8] = "#FFBE36"
    packs[i].style.backgroundColor = colours[i];
}

Надеюсь, это имеет смысл? Дайте мне знать, если вы хотите, чтобы я сформулировал это по-другому / объяснил более подробно!

Спасибо 🙂

Ответ №1:

Вы могли бы сделать это с помощью оператора modulo ( % ), как показано ниже. Это позволило бы счетчику сохранять правильную длину, а цвета оставались бы в порядке.

 // Array of colours
let colours = ["#FFBE36", "#FF6447", "#77FF47", "#D547FF", "#FF9E47", "#47DBFF", "#FF4770"];

// For each pack, a background colour from the array above is assigned. 
// However, these are fetched from a database so could be more than the 
// length of the array
var packs = document.getElementsByClassName("pack-item");
for (var i = 0, len = packs.length; i < len; i  ) {
    // Here if i is larger than colours.length, loop back to start of 
    // colours array 
    packs[i].style.backgroundColor = colours[i % colours.length];
}

Комментарии:

1. @Samathingamajig вероятно, это правильный ответ. Предполагая, что пользователь не хочет бесконечного цикла и просто хочет обработать случай, когда, скажем, имеется 21 пакет, и у них всего 7 цветов, эта логика будет присваивать цвет каждому пакету, зацикливая цвета, когда он достигает конца массива цветов.

2. Идеально! Спасибо!

Ответ №2:

Это проще сделать с while помощью цикла, чтобы у вас было colorPointer то, что вы увеличиваете, и если оно равно той colors.length-1 , которая является истинной длиной массива, поскольку она проиндексирована на ноль, она вернется к началу.

 // Array of colours
let colours = ["#FFBE36", "#FF6447", "#77FF47", "#D547FF", "#FF9E47", "#47DBFF", "#FF4770"];

// For each pack, a background colour from the array above is assigned. 
// However, these are fetched from a database so could be more than the 
// length of the array
let counter = 0;
let colorPointer = 0;
var packs = document.getElementsByClassName("pack-item");
while(counter < packs.length) {
  // Here if i is larger than colours.length, loop back to start of 
    // colours array 
    packs[counter].style.backgroundColor = colours[colorPointer];
    counter  ;
    colorPointer  ;
    if(colorPointer === colours.length-1){
      colorPointer = 0;
    }
}