Как это понять?

Question

[justifycontent]

const x = (str) => {
  let arr = str.split(' ');
  return arr.reduce((acc, rec, index) => {
    return (typeof acc[rec] !== 'undefined')
      ? { ...acc, [rec]: acc[rec] + 1 }
      : { ...acc, [rec]: 1 }
  }, {});
}

console.log(x('aa bb cc aa bb aa'));

Эта конструкция выводит количество вхождений каждого элемента, не могли бы вы помочь разобрать этот алгоритм?

Comments

[WbICHA]

помочь разобрать этот алгоритм

В данном алгоритме 1 цикл и 1 иф, так что можно по подробнее, что конкретно в столь неописуемо сложном алгоритме тебе непонятно?

Answer 1

[Александр Серый]

1)let arr = str.split(' ');
Возьмет строку, в данном случае 'aa bb cc aa bb aa', разобьет на части используя пробел как разделитель. В результате получим:
let arr = ['aa', 'bb', 'cc', ' aa', 'bb', 'aa']
2) Следующий кусок кода просто произведет подсчет одинаковых частей.

return arr.reduce((acc, rec, index) => {
    return (typeof acc[rec] !== 'undefined')
      ? { ...acc, [rec]: acc[rec] + 1 }
      : { ...acc, [rec]: 1 }
  }, {});

Рассмотрим его подробнее. Начнем с аргументов:
acc – последний результат вызова функции, он же «промежуточный результат».
rec – текущий элемент массива, элементы перебираются по очереди слева-направо.
index – номер текущего элемента.

Что собственно происходит:
-typeof acc[rec] !== 'undefined' проверит есть ли в объекте 'acc' ключ 'rec'.
- и если мы уже встречали такой( например когда "aa", но уже во второй раз ), тогда изменить значение этого ключа прибавив 1.{ ...acc, [rec]: acc[rec] + 1 }
- если же такого ключа еще не было, то создадим его со значением 1, ибо он в первый раз попался{ ...acc, [rec]: 1 }

Comments

[Максим]

очень хороший ответ без подъ__бок .....однозначно полезный ответ

[justifycontent]

Я именно эту часть не понимаю, зачем мы разворачиваем объект асс в объекте

{ ...acc, [rec]: acc[rec] + 1 }
: { ...acc, [rec]: 1 }

[Александр Серый]

Эти строки означают, что мы копируем полностью объект "acc" с помощью spread, но изменяем только лишь нужную нам "rec". При этом у нас всегда возвращается новый объект. Это так называемая иммутабельность. На сколько она нужна именно здесь, это уже другой вопрос. Вот вроде рабочий вариант, но уже "мутабельным" способом

const x = (str) => {
  let arr = str.split(' ');
  return arr.reduce((acc, rec, index) => {
    if (typeof acc[rec] !== 'undefined'){acc[rec] = acc[rec] + 1}
      else{
       acc[rec]= 1
      }
    return acc;
  }, {});
}

x('aa bb cc aa bb aa');

[justifycontent]

Александр Серый, Александр, спасибо вам большое за такие конструктивные и полезные ответы.

[Юрий Костин]

Александр очень хорошо всё расписал.

И да, в этом случае вовсе не нужно имитировать иммутабельность, так как чаще всего аккумулятором выступает - если речь о сложных типах - объект/массив, который мы создаём внутри функции. А значит мы не можем как-либо навредить внешнему коду.
Такой подход для reduce - отличное место для утечек памяти на ровном месте, если данных будет немного побольше.

Поэтому можно переписать функцию таким образом:

const countCharPairs = str => {
    const countByCharPair = {};

    const reduce = (acc, item) => {
        if (item in acc) {
            acc[item] = acc[item] + 1;
        } else {
            acc[item] = 1;
        }
        return acc;        
    }

    return str.split(' ').reduce(reduce, countByCharPair);
}

Здесь мы контролируемо мутируем объект чтобы избежать утечки памяти. Но ещё раз подчеркну, что этот объект создаётся внутри функции, а значит никаких сайд-эффектов при его мутации не случится.

PS: Отвечаю на ваш исходный вопрос - "Как это понять?". Если вы столкнулись с чем-то непонятным - разбивайте это непонятное на части. Так вы сможете отделить то, что вы знаете от того, что не знаете, и устранить белые пятна. В данном случае, я полагаю, это был rest/spread

[justifycontent]

Юрий Костин, Спасибо большое за ответ. Rest и spread я знал, с объектами запутался