Не могу понять данный нативный альтернативный код, выполняющий определенные задачи - PullRequest
Новая
       10

Не могу понять данный нативный альтернативный код, выполняющий определенные задачи

1 голос
/ 05 июня 2019

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

С помощью lodash я решил эту задачу, используя _.chunk, но в документации есть две его версии, одна с lodash, а другая с собственным JavaScript.

Мне интересна нативная версия, и я начал ее расшифровывать, но не могу понять. Я знаю, как работает reduce, но условная часть - это то, где я застрял. Я понимаю, что если условие истинно, оно вернет определенное значение, но оно мне все еще неясно, особенно возвращаемое значение в скобках, если кто-то сможет объяснить подробно, будет высоко ценится. 

// Lodash

_.chunk(['a', 'b', 'c', 'd'], 3); // This one is solve 
// => [['a', 'b', 'c'], ['d']]


// Native

const chunk = (input, size) => {
   return input.reduce((arr, item, idx) => {
      return idx % size === 0 // This entire part of conditional is not clear
        ? [...arr, [item]]
        : [...arr.slice(0, -1), [...arr.slice(-1)[0], item]];
   }, []);
};

chunk(['a', 'b', 'c', 'd'], 3);
// => [['a', 'b', 'c'], ['d']]

1 Ответ

1 голос
/ 05 июня 2019

Все, что делает код, это

  • Создание пустого массива.
  • Создает еще один вложенный пустой массив [] внутри этого массива.
  • Он добавляет каждый элемент в этот вложенный массив каждый раз.
  • Если индекс кратен 3, он добавляет еще один вложенный массив и продолжает добавлять элементы в него

Более простая версия для понимания. 

const chunk = (input, size) => {
   return input.reduce((arr, item, idx) => {
   
      if(idx % size === 0){
        //The previous nested arrays
        let previous = arr; 
        //Adds a new nested array with current element
        let newArr = [item]; 
        //concentrate both and return
        return arr.concat([newArr]); 
      } 
      else{
        //This is part of array which concatin all nested arrays expect the last one
        let allExepctLast = arr.slice(0, -1);
        //this is last nested array
        let last = arr.slice(-1)[0];
        //Add the current element to the end of last nested array.
        let addedValue = [...last,item]
        return [...allExepctLast ,addedValue]
      
      }
   }, []);
};
console.log(chunk(['a', 'b', 'c', 'd'], 3));

Объяснение с примером.

Рассмотрим вышеупомянутый массив ['a', 'b', 'c', 'd']

arr инициализируется как пустой массив [].

idx = 0 и item = 'a'

Когда idx равно 0, тогда условие idx % size === 0 равно true, поэтому возвращаемое значение будет равно. 

[...arr, [item]]

arr пуст, поэтому распространение его ничего не даст. [item] будет ['a']. Таким образом, все arr становится 

[['a']]

idx = 1 и item = 'b'

На этот раз условие idx % size равно false, поэтому возвращаемое значение будет 

[...arr.slice(0, -1), [...arr.slice(-1)[0], item]]

arr.slice(0,-1) будет пустым массивом, поэтому распространять его будет нечего.

arr.slice(-1)[0] получит последний вложенный массив ['a'] и добавит item в его конец. Так и стало ['a','b']. Таким образом, arr становится [['a','b']]

idx = 2 и item = 'c'

То же самое произойдет, что и для idx = 1 Окончательный массив станет.

[[ 'а', 'B', C]]

idx = 3 и item = 'd'

Теперь первое условие - true, поэтому [...arr, [item]] будет возвращено.

...arr сгенерирует первый вложенный массив ['a','b','c'], а [item] будет ['d'] Обе, заключенные в [], дадут 

[['a','b','c'], ['d']]
...