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

Question

I am working on a React project! I want to know how can we achieve this result?

• I want to iterate over some names in an array.
• I want to iterate over some links for images in another array.

How can we achieve this? Or can we iterate by map on both arrays at the same time?

What do I want? I want to render a card with text (head) and an image. I included links and texts in two separate arrays.

For example: const projectText = ['x','y','z']; , const imgUrl = ['x'....]; , etc

Here's code:

{/*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 */}

Answer 1

Assuming, the projectText and imageUrl contain the elements in order and have the same number of elements, you can simply access the url from imageUrl array using the index from projectText

   <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 */}

Answer 2

Assuming the length of the arrays are same, you have following options:

1. Map on one array and use the index property to access both arrays.
2. Create another array having information combined from other arrays.

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]
    });
}

and now use the combined array.

Answer 3

A better approach will be to maintain an array of objects populated as below

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

Iterating over this array will get you access to both the fields you require. Moreover you can add extra items if you need without hassel.