在单个 const 中使用 Object.keys()、map()、...Array()、reduce() 和 concat()

Question

我正在 Udemy 上学习 React.js。 我们编写了一个长的无状态组件，它在单个 const 中使用Object.keys() 、 map() 、 ...Array 、 reduce()和concat() 。

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

就像我们为什么将[]放在reduce()方法上作为第二个参数，或者(_, 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);
     }, []);

Answer 1

 Object.keys( props.ingredients )

检索一组成分名称。

 .map( igKey => {

将该数组映射到一个新数组，每个元素是否包含

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

一个数组，其条目数与传递的 object 中的成分相关的值一样多。

 .map( (_, i) => {

然后映射该内部数组，忽略该值（无论如何对于空数组都是undefined的）并且只获取索引并将其映射到

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

现在我们确实有一个 BurgerIngredients 的二维数组，并且

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

将其展平为一系列 BurgerIngredients。 归约意味着我们从初始值（ [] ）和.concat原始数组的每个值（内部数组）开始。

---

我会这样写：

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