我们可以在js中同时映射两个数组吗?

时间:2018-12-13 10:18:04

标签: javascript arrays reactjs loops

我正在做一个React项目! 我想知道我们怎么能达到这个结果?

  • 我想遍历数组中的某些名称。
  • 我想遍历另一个数组中图像的一些链接。

我们如何实现这一目标?还是我们可以同时在两个数组上通过映射进行迭代?

我想要什么?我想用文字(头部)和图像渲染卡片。 我在两个单独的数组中包含了链接和文本。

例如:const projectText = ['x','y','z'];,              const imgUrl = ['x'....];

这里的代码:

{/*NOTE: Don't forget to optimise code as DRY before final build */}
                  <div ClassName="container">
            {projectText.map((project, index) => (
                    <div key={index} className="project">
                    <h3>{project}</h3>
                    <img key={index} src={`../img/${project}.png`} alt={project}/>
                    <a role="button" className="btn" href={`https://${project}`} target="_blank" rel="noopener noreferrer">Github</a>
                    </div>
                  </div>
                ))}
                {/* experiment train */}

3 个答案:

答案 0 :(得分:3)

假设projectText和imageUrl按顺序包含元素,并且元素数量相同,则您可以使用imageUrl的索引直接访问projectText数组中的url

   <div ClassName="container">
        {projectText.map((project, index) => (
                <div key={index} className="project">
                <h3>{project}</h3>
                <img key={index} src={`../img/${imageUrl[index]}.png`} alt={project}/>
                <a role="button" className="btn" href={`https://${project}`} target="_blank" rel="noopener noreferrer">Github</a>
                </div>
              </div>
            ))}
            {/* experiment train */}

答案 1 :(得分:0)

假设数组的长度相同,则有以下选择:

  1. 映射到一个数组,并使用index属性访问两个数组。
  2. 创建另一个数组,该数组具有与其他数组组合的信息。

1。

let names = [];
let images = [];

for (let i = 0; i < names.length; i++) {
    console.log(names[i], images[i]);
}

2。

let names = [];
let images = [];
let combined = [];

for (let i = 0; i < names.length; i++) {
    combined.push({
        name: names[i],
        image: images[i]
    });
}

,现在使用combined数组。

答案 2 :(得分:0)

一种更好的方法是维护如下填充的对象数组

const data = [
{projectText: 'a',imageUrl: 'http://linka.com'},
{projectText: 'b',imageUrl: 'http://linkb.com'}
]

遍历此数组将使您可以访问所需的两个字段。此外,如果需要,您可以添加额外的项目而无需麻烦。