如何从多个数组创建一个新数组

Question

我正在尝试将 3 个数组组合起来创建一个新数组。 所以最终的结果是

<li>array1[0]array2[0]array3[0]</li>

我尝试了 for 循环，但最终得到 27 个答案，而我拥有的数据应该只有 2 个。

  // const ingredientsList = () => {
  //   for (let i = 0; i < recipe.ingredients.length; i++) {
  //     for (let j = 0; j < recipe.size.length; j++) {
  //       for (let k = 0; k < recipe.amount.length; k++) {
  //         console.log(recipe.amount[k], recipe.size[j], recipe.ingredients[i]);
  //         <li>
  //           {recipe.amount[k]}
  //           {recipe.size[j]}
  //           {recipe.ingredients[i]}
  //         </li>;
  //       }
  //     }
  //   }
  // };

我将不胜感激任何人的帮助。 我目前在 reactjs 工作。 每个数组的长度相同。 我有 3 个数组：成分列表、数量和大小。 所以我想把它们结合起来，让它们读起来很流畅，比如“1杯面粉”

Answer 1

您循环遍历三个数组的方式将如此（以伪代码）：

• 循环遍历第一个数组和每个元素：
• 循环遍历第二个数组和每个元素：
• 循环遍历第三个数组，并为每个元素在每个数组的索引 n 处创建每个元素的列表项。

由于我不确定您到底想要什么，因此我必须假设它们是相同长度的数组，因此您可以执行以下操作：

for(let i = 0; i < recipe.amount.length; i++) {
   console.log(`${recipe.amount[i]} ${recipe.size[i]} ${recipe.ingeredients[i]}`)
}

这应该让您记录适当的结果，然后只需创建 html 列表元素。

Answer 2

如果我根据问题中的代码正确理解，您将拥有三个数组（成分、大小、数量）。

如果每个数组的长度相同并且每个索引的数据对应于其他索引的数据，您可以使用其中一个的长度编写一个循环并将相同的索引传递到每个数组中，例如...

for (let i = 0; i < recipe.ingredients.length; i++) {
    console.log(
        recipe.ingredients[i],
        recipe.size[i],
        recipe.amount[i],
    );
}

但是，当您在 React 中工作时，如果您自己可以控制数据，那么将每个指令存储在recipe数组中的对象中可能更有意义，然后映射该数组并创建列表项，例如.. .

组件中的某处可能类似于...

this.recipe = [
  {
    ingredient: 'something',
    amount: 'some amount',
    size: 'some size',
  },
  {
    ingredient: 'something',
    amount: 'some amount',
    size: 'some size',
  },{
    ingredient: 'something',
    amount: 'some amount',
    size: 'some size',
  }
]

并在模板中...

{
  recipe.map((instruction) => (
    <li>
      { instruction.amount }
      { instruction.size }
      { instruction.ingredient }
    </li>
  ));
}

Answer 3

const emp1 = [“塞西莉”，“孤独”]； const emp2 = ["埃米尔"、"托比亚斯"、"莱纳斯"];

const allEmp = emp1.concat(emp2);

您可以尝试使用 concat 关键字来合并数组。 如果有两个以上的数组，您可以使用

emp3 = [“约翰”，“花边”]

const allEmp = emp1.concat(emp2, emp3);