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;
我按照教程成功地做到了,老实说,我并不完全理解这里发生了什么。特别是这部分:
return [...Array(props.ingredients[igKey])].map((_,i)=>{
return <BurgerIngredient key={igKey + i} type={igKey}/>
});
任何帮助将不胜感激!谢谢!
解决方案
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}/>
)
推荐阅读
- sql - 3张表一一匹配,得到最终列值
- python - NumPy 就地重塑数组
- flutter - 如何在flutter中从sqlite获取最后一个条目?
- laravel - 如何在 laravel 中的 DB select 和 DB raw 之后获取值
- android - 在 Repository 类中观察 Forever 是一个好习惯吗?db+network 分页列表
- javascript - 从 iframe 中触发子 iframe 的关闭事件,但不存储/传递 iframe 元素 ID?
- python - 使用来自 API 的值的异步更新接口
- eclipse - Eclipse 市场 - 无法安装 asciidoc 编辑器
- c++ - 如何在 C++ 中运行具有仅调用线程的函数的类的多个对象?
- visual-studio-code - 如何在更漂亮(或 es-lint)中添加自定义格式