Javascript 对象到数组的转换

我在类中有此状态对象：

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;

constburger=（道具）=>{
const transformedIngredients=Object.key（props.components）
.map（igKey=>{
return[…数组（props.components[igKey]）].map（（q，i）=>{
返回
});
});
console.log（transformedgredinents）
返回(
);
};
出口默认汉堡；

我成功地做到了这一点后，一个教程，说实话，我不完全明白这里发生了什么。特别是这一部分：

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

return[…数组（props.components[igKey]）].map（（（i）=>{
返回
});

---

任何帮助都将不胜感激！谢谢大家!

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

Array.from(
{length:props.info[igKey]}，
（u，i）=>
)

返回一个数字，例如培根为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"]

---

您以前见过这三个点吗：是的，排列运算符！：）我只是不清楚为什么这个表情会让你绊倒——但你得到的答案已经全部解决了。非常感谢。你用简单明了的语言来表达！谢谢：）@michael很乐意帮忙：）

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