Question

目前在React中，我使用array.map(function(text,index){})来遍历数组。但是，我如何使用map同时迭代两个数组？

修改

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

就像，在这里，我希望每次迭代都有图标。而且我打算将这些图标放在另一个阵列中。所以，这就是为什么迭代两个数组。

Answer 1

这两个数组的长度是否相同？如果你打算以某种方式将两者结合起来，你可以做类似下面的事情。

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

在你的情况下：

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

注意，如何分配Icon src。这个想法是访问具有相同索引的图标数组以获得相应的图标。

Answer 2

如果可能的话，我建议将文本与图像一起存储在一个对象数组中，例如：

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

通过这种方式，您可以遍历数组并同时选择两个成员，例如：

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

如果这不可能，那么只需映射一个数组并通过当前索引访问第二个数组的成员：

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

Answer 3

您无法使用内置Array.prototype方法执行此操作，但您可以使用以下内容：

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

（当然，arr1和arr2预计会有相同的长度）

Answer 4

通常，您要查找的是zip函数，例如lodash提供的函数。就像真正的拉链一样，它将两个相同长度的东西组合成一个：

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

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

注意，这比技术上需要的迭代更多。如果性能是一个问题，您可能需要一个有点聪明的解决方案（尽管不是真正的问题范围）。

使用map迭代两个数组

4 个答案: