Verwenden von Map zum Iterieren durch zwei Arrays

Question

Derzeit in React, verwende ich array.map(function(text,index){}), um durch ein Array zu durchlaufen. Aber, wie werde ich mit map zwei Arrays gleichzeitig durchlaufen?

EDIT

var sentenceList = sentences.map(function(text,index){ 
      return <ListGroupItem key={index}>{text}</ListGroupItem>; 
     }) 
return (
    <div> 
     <ListGroup> 
     {sentenceList} 
     </ListGrouup> 
    </div> 
); 

Wie, in diese möchte ich Symbole mit jeder Iteration vorangestellt werden. Und ich plane, diese Symbole in einem anderen Array zu haben. Deshalb iterieren Sie zwei Arrays.

Answer 1

überhaupt möglich ist, würde ich empfehlen, den Text neben den Bildern in einem Array von Objekten zu speichern, zB:

const objects = [{text: 'abc', image: '/img.png' }, /* others */]; 

auf diese Weise kann man einfach durch das Array iterieren und wählen Sie beiden Mitglieder zur gleichen Zeit zum Beispiel:

objects.map(item => (<Component icon={item.image} text={item.text} />)) 

Wenn dies nicht möglich ist, dann Karte nur ein Array über und das zweite Array-Mitglieder über den aktuellen Index zugreifen:

sentences.map((text, index) => { 
    const image = images[index]; 
    return (<Component icon={image} text={text} />); 
}); 

Answer 2

Sie können nicht tun dies mit einem in die Array.prototype Methoden, aber man kann so etwas wie folgt verwenden:

function map2(arr1, arr2, func) { 
    return arr1.map(
     (el, i) => { return func(el, arr2[i]); } 
    ); 
} 

(Natürlich arr1 und arr2 erwartet die gleiche Länge haben)

Answer 3

Sind beide Arrays gleich lang? Sie können etwas wie unten tun, wenn Sie beide kombinieren möchten.

array.map(function(text,index){ 
    return text + ' ' + array2[index] 
}) 

In Ihrem Fall:

var sentenceList = sentences.map(function(text,index){ 
      return <ListGroupItem key={index}>{text} <img src={icons[index]} /i> </ListGroupItem>; 
     }) 
return (
    <div> 
     <ListGroup> 
     {sentenceList} 
     </ListGrouup> 
    </div> 
); 

Hinweis, wie Icon src zugewiesen wird. Die Idee ist, dass die Zugriffssymbole mit demselben Index gruppieren, um ein entsprechendes Symbol zu erhalten. Wenn

Answer 4

Im Allgemeinen, was Sie suchen, ist eine zip Funktion, wie die, die lodash bietet. Ähnlich wie bei einem echten Reißverschluss, verbindet es zwei Dinge, die gleiche Länge in einem:

const zipped = _.zip(sentences, icons); 

return (
    <div> 
    <ListGroup> 
     {zipped.map(([sentence, icon], index) => (
     <ListGroupItem key={index}><Icon icon={icon} /> {text}</ListGroupItem>; 
    ))} 
    </ListGroup> 
</div> 
); 

Hinweis, dies als mehr Iterationen tut sind technisch erforderlich. Wenn Leistung ein Problem ist, möchten Sie vielleicht eine Lösung, die ein bisschen schlau ist (nicht wirklich im Umfang für Ihre Frage obwohl).