多次循环数组，直到完成第二个数组答案

【问题标题】：Loop over an array multiple times until a second array is finished多次循环数组，直到完成第二个数组
【发布时间】：2016-10-11 23:14:06
【问题描述】：

我正在创建一个函数来使文本变成彩虹色。

我有两个数组。一个用于颜色，一个用于字符串。

我基本上想要做的是根据文本的数量循环多次需要的颜色。

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>

【问题讨论】：

更改这一行 rainbowText += '' + slicedText[i] + '' ;

标签： javascript arrays loops for-loop

【解决方案1】：

当slicedText.length 大于colors.length 时，您的索引超出了颜色数组的范围。如果所需的行为是在到达颜色末尾后从索引 0 开始，请使用模运算符。

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 = result;

&lt;div id="textdiv"&gt;&lt;/div&gt;

【讨论】：