Можем ли мы отобразить более двух массивов одновременно в js?

Question

Я работаю над проектом 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 */}

Answer 1

Предполагая, что длина массивов одинакова, у вас есть следующие опции:

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.

Answer 2

Лучшим подходом будет сохранение массива объектов, заполненного как показано ниже

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

Итерация по этому массиву даст вам доступ к обоим полям, которые вам необходимы.Кроме того, вы можете добавить дополнительные предметы, если вам нужно без hassel.

Answer 3

Предполагая, что projectText и imageUrl содержат элементы по порядку и имеют одинаковое количество элементов, вы можете просто получить доступ к URL из массива imageUrl, используя индекс из 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 */}