Блог

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

Цикл по массиву несколько раз, пока не будет завершен второй массив

#javascript #arrays #loops #for-loop

#javascript #массивы #циклы #for-цикл

Вопрос:

Я создаю функцию для придания тексту цвета радуги.

У меня есть два массива. Один для цвета и один для строки.

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

 var colors = ['blue', 'red', 'green', 'black', 'orange', 'purple'];

function colorText(word) {
  var slicedText = word.split('');
  var rainbowText= '';
  
  if (typeof(word) !== 'string') {
    alert('Thats not a word!');
  } else {
    for (var i = 0; i < slicedText.length; i   ) {
      rainbowText  = '<span style="color:'   colors[i]   ';">'   slicedText[i]   '</span>';
  }
  
  document.getElementById('text-input').innerHTML = rainbowText;
  }
}

colorText('this is a really long text');  
 <div id="text-input">
  
</div>

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

1. Измените эту строку rainbowText = ‘ <span>’ slicedText[i] «</span>;

Ответ №1:

Вы индексируете за пределами массива цветов, когда значение slicedText.length больше colors.length . Если желаемое поведение должно начинаться с индекса 0 после достижения конца цветов, используйте оператор modulo .

colors[ i % colors.length ] 

 var colors = [ 'blue', 'red', 'green', 'black', 'orange', 'purple' ];

function colorText(word) {
  var slicedText = word.split( '' );
  var rainbowText = '';

  if (typeof( word ) !== 'string') {
    alert('Thats not a word!');
  } else {
    for (var i = 0; i < slicedText.length; i  ) {
      rainbowText  = '<span style="color:'   colors[ i % colors.length ]   ';">'   slicedText[ i ]   '</span>';
    }

    document.getElementById( 'text-input' ).innerHTML = rainbowText;
  }
}

colorText( 'this is a really long text' );  
 <div id="text-input">
  
</div>

Ответ №2:

Другой способ реализации той же работы без окрашивания пробелов.

 var str = "this is a really long text",
 colors = ['blue', 'red', 'green', 'black', 'orange', 'purple'],
 result = [...Array(str.length)].reduce((p,_,i) => p   (str[i] !== ' ' ? '<span style="color:' colors[i%colors.length] ';">'   str[i]   '</span>'
                                                                       : ' '),'');
document.getElementById("textdiv").innerHTML = resu<  
 <div id="textdiv"></div>