Использование Object.keys (), map (), ... Array (), redu () и concat () в одном const

Question

Я изучаю React.js на Удеми.Мы написали длинный компонент без сохранения состояния, в котором использовались 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] )]

массив, который имеет столько же записей, сколько и значение, относящееся к ингредиенту в переданном объекте.

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