javascript - ...JS 中的数组(某物)

Question

所以我正在遵循一些 react 教程，但我很难弄清楚这里的数组方法。

这就是我们正在做的事情

我们有一个状态(来自react的状态，但即使你不知道，你仍然可以遵循)，我们将其传递给子组件

状态看起来像这样

state = {
    ingredient: {
      salad: 1,
      bacon: 1,
      cheese: 2,
      meat: 2
    }
  }

我们就这样通过

  <Burger ingredient={this.state.ingredient}/>

现在在子组件中，我们做这样的事情

  let transformedIngrident = Object.keys(props.ingredient) 

 transformedIngrident = transformedIngrident.map(igKey => { 
    return [...Array(props.ingredient[igKey])] 
  })

现在，我以前没有使用过数组方法，我无法理解它的作用

这里是console.logging //[Array(1), Array(1), Array(2), Array(2)]

那么，有人可以解释一下这行return [...Array(props.ingredient[igKey])](就像.. .Array() 以及 props.ingredient[igKey] 的作用是什么？

Answer 1

用户似乎正在尝试创建多个数组，其长度是对象 ingredient 中键的值。

首先，... 是 spread operator它允许您扩展数组。

第一行 let TransformedIngrident = Object.keys(props.ingredient) 将键保存在数组中。 [“沙拉”、“培根”、“奶酪”、“肉”]。

现在，在此数组上调用 map 函数，该函数将迭代数组的值。

此处使用的 Array(val) 构造函数创建一个长度为 val 的数组，即如果您调用 Array(2)，则会创建一个新的数组将创建长度为 2 的数组。

对于 transformedIngrident 中的所有值，props.ingredient[igKey] 将分别提供值 1、1、2 和 2。这些将被视为新创建的数组的长度。

我能想到这个函数的作者使用它的唯一原因是创建一个所需长度的空数组。

希望这有帮助。

附注- 如果您要修改该函数，请修正 transformedIngrident 的拼写。我的有点奇怪的强制症。