75507


ブログを作成していて、記事の背景に決まった色を順番で配置していきたいのです。  
map等で配列を回すと配列が空になるとループが止まってしまうのでループ数は記事の数に合わせて、その中で4つのカラーを順番に出力していきたいです。  
例：記事が20記事あって4つのカラーだと5記事以降色が出力されなくなるので、それをなんとか記事の数繰り返したいです。  
どうやって記事の数に合わせて配列を出力したら良いか教えて頂けないでしょうか？

これを無限に（記事の数）繰り返したい。

[code]

    ["orange", "pink", "blue", "red"]
    
[/code]

[![こんな感じにしたい](https://i.stack.imgur.com/gR9X2.png)](https://i.stack.imgur.com/gR9X2.png)

### 参照

<https://dribbble.com/shots/5489447-MNW-mobile>


CC BY-SA 4.0
2021-04-26T05:41:45.610
75506
2021-04-26T07:17:56.093
22565
question
javascript
JavaScriptで["orange", "pink", "blue"]のような決まった配列を無限に繰り返し出力したい。


`["orange", "pink", "blue",
"red"]`の配列を指定したサイズの配列へ繰り返し代入したい。例えば、長さが20の配列へ代入する場合は、下記のような出力が必要との理解です。

[code]

    ["orange","pink","blue","red","orange","pink","blue","red","orange","pink","blue","red","orange","pink","blue","red","orange","pink","blue","red"]
    
[/code]

この理解が正しいようですと、次のようなサンプルスクリプトは如何でしょうか。

### Sample script:

[code]

    const pattern = ["orange", "pink", "blue", "red"];
    const max = 20;
    
    const array = Array(max).fill("").map((_, i) => pattern[i % 4]);
    
    console.log(array.length);
    console.log(array);
[/code]

### Explanation:

  * このサンプルでは、`pattern[i % 4]`で配列`pattern`が繰り返し代入されます。
  * `i`は`Array(max).fill("")`のインデックスで、これを使って`i`が増加すると、`i % 4`の値が`0,1,2,3,0,1,2,3,,,`のように0～3の間で変化します。これを利用して、`pattern`の各値を代入しています。

### Reference:

  * [map()](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/map)


CC BY-SA 4.0
2021-04-26T05:57:23.157
75507
2021-04-26T06:07:14.387
2021-04-26T06:07:14.387
19460
19460
75506
answer


HTMLの構造がうまく合えば、`nth-child()`セレクタで可能です。

[code]

    article:nth-child(4n+1) {
      background: orange;
    }
    article:nth-child(4n+2) {
      background: pink;
    }
    article:nth-child(4n+3) {
      background: blue;
    }
    article:nth-child(4n) {
      background: red;
    }
[/code]

[code]

    <article>1</article>
    <article>2</article>
    <article>3</article>
    <article>4</article>
    <article>5</article>
    <article>6</article>
    <article>7</article>
    <article>8</article>
    <article>9</article>
[/code]


CC BY-SA 4.0
2021-04-26T07:17:56.093
75512
2021-04-26T07:17:56.093
3475
75506
answer