Question

所以我正在关注一些反应教程，我很难在这里搞清楚数组方法。

所以这就是我们正在做的事情

我们有一个州（国家来自反应，但即使你不知道，你仍然可以遵循）我们传递给儿童组件

状态看起来像这样

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

现在，我还没有使用过Array方法，我无法理解它的作用

这里是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)将键保存在数组中。 ["salad", "bacon", "cheese", "meat"]。

现在在这个数组上调用map函数，它将迭代数组的值。

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

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

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

希望这有帮助。

P.S。 - 如果您正在修改该功能，请修改transformedIngrident的拼写。我的奇怪的小强迫症。

Answer 2

基本上你所拥有的是一个成分的对象，所以你不能映射它们所以Object.keys做的是它需要键并使它成为一个数组，然后你可以映射它...

Answer 3

... Array()是所谓的传播运营商。这用于数组和对象中以“传播”它们的部分。在这种情况下，它将遍历每个成员并创建一个数组Object，其中包含您放置的值props.ingredient[igKey]。

在这种情况下，

props和React的情况是已传递给组件的属性。所以在<Burger ingredient={this.state.ingredient}/>道具包含成分的情况下。

所以你最终得到的是一个Array对象数组，每个对象传入的this.state.ingredient中的相应值的长度，这样当igKey是cheese时，它创建了一个带有值的Array对象分配给奶酪（2）。

... JS中的数组（某物）

3 个答案: