Javascript 在单个常量中使用Object.keys（）、map（）、…Array（）、reduce（）和concat（）

我正在学习Udemy上的React.js。我们编写了一个长的无状态组件，它在一个常量中使用了

Object.keys（）

，

map（）

，

…Array

，

reduce（）

和

concat（）

我知道我们在这个无状态组件中使用的每个方法。但当我在一个组件中使用它们时，我丢失了一条轨迹

比如为什么我们把

[]

放在

reduce（）

方法上作为第二个参数，或者

（uu，i）

在

map（）

方法上是什么

你能一步一步地解释这个代码吗

const burger = (props) => {

     let transformedIngredients = Object.keys( props.ingredients )
      .map( igKey => {

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

constburger=（道具）=>{
让transformedIngredients=Object.keys（props.components）
.map（igKey=>{
return[…数组（props.components[igKey]）].map（（q，i）=>{
返回；
});
}) 
.减少（（arr，el）=>{
返回终点（el）；
}, []);

检索成分名称数组

 .map( igKey => {

将该数组映射到每个元素包含的新数组

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

一个数组，其条目数与传递对象中与成分相关的值相同

 .map( (_, i) => {

然后映射该内部数组，忽略该值（对于空数组，该值是

未定义的

），只获取索引并将其映射到

      <BurgerIngredient key={igKey + i} type={igKey} />;

将其展平为一个数组。减少意味着我们从初始值（

[]

）开始，并将原始数组中的每个值（内部数组）添加到该数组中

---

我会这样写：

 const Burger = ({ ingredients }) => {
   const list = [];

   for(const [ingredient, amount] of Object.entries(ingredients)) {
     for(let count = 0; count < amount; count++) {
        list.push(<BurgerIngredient key={ingredient + count} type={ingredient} />);
     }
  }

  return <div className="burger">
    Ingredients:
    {list}
  </div>;
};

const汉堡=（{配料}）=>{
常量列表=[]；
对象条目（成分）的常量[成分，数量]{
for（让count=0；count

@giorgim cause

props.components[igKey]

可能是一个数字，例如3，然后

Array（3）

返回一个长度为3的空数组，

[…Array（3）]

返回一个有三个空槽的数组。

3.map

不起作用。但是当你像这样写的时候，你如何在没有道具的情况下访问成分？还要感谢你的解释性回答。如果你投票支持我的问题，我将不胜感激，因为我认为这是一个使用“难学方法”的好例子在一个示例中。我对其进行了分解。

{contracents}

取出了传递对象的contracents属性。我不知道。感谢您提供了不同的方法。

 .reduce((arr, el) => {
      return arr.concat(el);
 }, []);

 const Burger = ({ ingredients }) => {
   const list = [];

   for(const [ingredient, amount] of Object.entries(ingredients)) {
     for(let count = 0; count < amount; count++) {
        list.push(<BurgerIngredient key={ingredient + count} type={ingredient} />);
     }
  }

  return <div className="burger">
    Ingredients:
    {list}
  </div>;
};