単純なforループの他に、配列の内容を出力するためのクリーナーや巧妙な方法がありますか？

Question

以下の例では、arrayという名前の生き物の内容をDIVに出力します。単純なforループを使用して、各インデックスと値をtempCreaturesという名前の変数に追加しました。その後、DIVの中のtextContentをtempCreaturesに置き換えました。それはうまく動作しますが、これを行うより賢い方法があるのだろうかと思います。私はforEachと他のアイデアを試しましたが、うまくいきませんでした。 Javascriptは、このようなことを行うためのより良い/クリーナー/クーラー/より効率的な方法を備えていますか？

'use strict'; 
 

 
var creatures = ['zombie', 'skeleton', 'orc', 'goblin'] 
 

 
function readCreatures() { 
 

 
    let i, tempCreatures; 
 
    
 
    tempCreatures = ''; 
 
    
 
    for(i = 0; i < creatures.length; i++) { 
 
    tempCreatures += i +': ' +creatures[i] +', '; 
 
    } 
 
    
 
    document.querySelector('.output').textContent = tempCreatures; 
 
} 
 
    
 
readCreatures();

<div class="output"></div>

Answer 1

を返すためにjoin()あなたがやっていることに似てそれぞれの新しい値を設定する新しい配列に最後のカンマ（あなたの例ではそうではありません）ではforEachを使用できます。スライダ（）で最後のカンマを削除するか、上記のようにmap/joinを使用します。マップを使用するか、減らす

は

'use strict'; 
 
var creatures = ['zombie', 'skeleton', 'orc', 'goblin']; 
 
    
 
function readCreatures() { 
 
    let tempCreatures = ''; 
 

 
    creatures.forEach((c,i) => tempCreatures += i + ': ' + c + ', '); 
 
     
 
    document.querySelector('.output').textContent = tempCreatures; 
 
} 
 
     
 
readCreatures();

<div class="output"></div>

Answer 2

一般的にあなたがjoinを使用することができ、それが原因接頭辞i + ":"にこのような状況では動作しません。

あなたが好き（簡潔にするために矢印機能付き）reduceを使用することができますように（再び矢印機能を使用して）joinその後、

var tempCreatures = creatures.reduce((s, e, i) => s + i + ": " + e + ", ", ""); 

またはmap：

var tempCreatures = creatures.map((e, i) => i + ": " + e).join(", "); 

注：reduceアプローチは、forと同様に、tempCreaturesの末尾に末尾の", "を引き起こします。 mapとjoinのコンボのように、末尾に", "がありません。

続きを読むjoin,reduce、map、およびArrow Functionsを参照してください。

Answer 3

Mapデータあなたが気にしない場合は、新しい配列が文字列

'use strict'; 
 

 
var creatures = ['zombie', 'skeleton', 'orc', 'goblin'] 
 

 
function readCreatures() { 
 

 
    let text = creatures.map((v,i)=> i + ': ' + v).join(', ') 
 
    
 
    document.querySelector('.output').textContent = text; 
 
} 
 
    
 
readCreatures();

<div class="output"></div>

Answer 4

可能性が最高の選択です。しかしここではループより優れていない解決策がありますが、このように問題を考えるのは楽しいことです。再帰を使用します（ループはかなり冗長ですが、まだ楽しいでした）

var creatures = ['zombie', 'skeleton', 'orc', 'goblin'] 

const recursiveStringBuilder = (temp, arr, length) => { 
    temp = `${temp} ${length} : ${arr[length]}, `; 
    return arr.length -1 === length ? temp : recursiveStringBuilder(temp, arr, length + 1); 
} 

function readCreatures() { 
    const tempCreatures = recursiveStringBuilder('', creatures, 0); 
    document.querySelector('.output').textContent = tempCreatures; 
} 

readCreatures(); 

<div class="output"></div>