对象到数组的转换答案

【问题标题】：Object into Array conversion对象到数组的转换
【发布时间】：2018-12-13 21:58:54
【问题描述】：

我在一个类中有这个状态对象：

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

并希望将其转换为一个数组，该数组还可以获取值编号，如下所示：

const burger = (props) => {
const transformedIngredients = Object.keys(props.ingredients)
    .map(igKey => {
        return [...Array(props.ingredients[igKey])].map((_,i)=>{
           return <BurgerIngredient key={igKey + i} type={igKey}/>
        });
    });

    console.log(transformedIngredients)
    return(
        <div className={classes.Burger}> 
        <BurgerIngredient type="bread-top" />
        <BurgerIngredient type="cheese" />
        <BurgerIngredient type="meat" />
        <BurgerIngredient type="bread-bottom" />
    </div>
  );
};
export default burger;

我按照教程成功完成了它，老实说，我不完全理解这里发生了什么。尤其是这部分：

return [...Array(props.ingredients[igKey])].map((_,i)=>{
       return <BurgerIngredient key={igKey + i} type={igKey}/>
    });

任何帮助将不胜感激！谢谢！

【问题讨论】：

你见过之前的三个点吗：developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…
是的传播运算符！ :)
我只是不清楚这句话的哪一点让你绊倒了——但你得到的答案已经贯穿了这一切。

标签： javascript arrays reactjs object ecmascript-6

【解决方案1】：

igKey 是您的成分的关键之一，例如bacon。现在在成分中查找

 props.ingredients[igKey]

然后产生金额，在这种情况下为5。现在它用于构建具有该长度的数组：

 Array(5) // { length: 5 }

现在这个数组是一个稀疏数组，它里面什么都没有。为了能够使用map 对其进行迭代，它必须填充未定义的值，因此该稀疏数组被展开到一个新数组中，从而将其变成一个填充数组：

 [...Array(5)] // { length: 5, 0: undefined, 1: undefined, 2: ... }

现在包含 5 个条目的空数组将映射到包含 5 个汉堡成分的数组。

顺便说一下更优雅的 IMO：

 Array.from(
   { length: props.infredients[igKey] },
   (_, i) => <BurgerIngredient key={igKey + i} type={igKey}/>
 )

【讨论】：

非常感谢。你用简单而清晰的语言表达出来！谢谢:)
@michael 很高兴为您提供帮助 :)

【解决方案2】：

props.ingredients[igKey]

返回一个数字，例如 5 表示培根。

[...Array(props.ingredients[igKey])]

返回一个包含 n 个元素的数组。这些元素是未定义的，因为您还没有填充它们。

解决方案是：

[...Array(props.ingredients[igKey])].fill(igKey)

或者简单地说：

Array(state.ingredients[igKey]).fill(igKey)

结果：

["salad", "bacon", "bacon", "bacon", "bacon", "bacon", "cheese", "cheese", "meat", "meat"]

【讨论】：