javascript - 在单个常量中使用 Object.keys()、map()、...Array()、reduce() 和 concat()

Question

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

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

比如为什么我们将 [] 作为第二个参数放在 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] )]

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

 .map( (_, i) => {

然后映射该内部数组，忽略该值(对于一个空数组，它是 undefined 无论如何)并且只获取索引并将其映射到

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

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

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

将其扁平化为一组 BurgerIngredients。 Reducing 意味着我们从初始值 ([]) 开始，.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>;
};