javascript - 对象到数组的转换

Question

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

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}/>
    });

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

Answer 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}/>
 )