Javascript 嵌套函数使用 Reduce、Map 和 Concat 与数组的组合

Question

Can someone please explain to me how this code:

const powerset = arr => arr.reduce((a, v) => a.concat(a.map(r => [v].concat(r))), [[]]);
console.log(powerset(["dog", "pig"]));

returns this array output in the console?

0: []
1: ["dog"]
2: ["pig"]
3: (2) ["pig", "dog"]
length: 4

The point was to take the elements from an array and return all of the possible combinations of those elements. I understand the reduce function, concatenating and mapping, but I'm having a hard time comprehending how these nested functions are being applied and in what order to get this output. Anyone able to walk me through what is happening on each run-through of the function(s)?

Answer 1

First off, take the constant and turn it into a function:

function powerset(arr){
  return arr.reduce((a, v) => a.concat(a.map(r => [v].concat(r))), [[]])
}

We know that reduce will loop through the elements and put them into a , the accumulator. Meanwhile, it will also do 'something' with v , the value. So, let's dig deeper:

a.concat(a.map(r => [v].concat(r)))

Here, it takes the accumulator and adds an array to it. But what is the array? This is:

a.map(r => [v].concat(r))

Now we can see that it takes each element of a and essentially pushes v , the value, into it.

Working backwards, now we can see that a starts off as [[]] , then gets merged with the array that is outputted from a.map(r => [v].concat(r)) . That simply happens to be the first element of arr . So, it turns to [[], [first_element]] .

Repeating this, we can see that each time, it takes an element, adds it to each subarray in the accumulator, takes all of those arrays, and adds it back to the accumulator. So now, you have all sets both with the example element el , AND without the example element el . Repeating, you have all possible combinations.

Answer 2

It might help to view the code as separate functions:

function powerset(arr) {
  const initial = [[]];
  return arr.reduce(reduceFn, initial);

  function reduceFn(accumulatedValue, item) {
    // item will be "dog" or "pig"
    // accumulatedValue will start as [[]] and be equal to the result of the previous call of reduceFn by .reduce()
    const concatenatedAccumulation = accumulatedValue.map(function mapFn(e) {
      return [item].concat(e) // i.e. [item, ...e]
    });
    return accumulatedValue.concat(concatenatedAccumulation);
  }
}

The execution of arr.reduce looks like this (read as call(): result ):

1. reduceFn(accumulatedValue = [[]], item = 'dog'): [[], ['dog']]
   • accumulatedValue.map: mapFn(e = []): [['dog']]
     • return [item].concat: ['dog'].concat([]): ['dog']
   • return accumulatedValue.concat: return [[]].concat([['pig']])
2. reduceFn(accumulatedValue = [[], ['dog']], item = 'pig'): [[], ['dog'], ['pig'], ['pig', 'dog']]
   • accumulatedValue.map: mapFn(e = [[], ['dog']]): [['pig'], ['pig', 'dog']]
     • return [item].concat: ['pig'].concat([]): ['pig']
     • return [item].concat: ['pig'].concat(['dog']): ['pig', 'dog']
   • return accumulatedValue.concat: return [[], ['dog']].concat([['pig'], ['pig', 'dog']])

Answer 3

Answered, Here was the original code: along with my new understanding of what's going on:

const powerset = arr => arr.reduce((a, v) => a.concat(a.map(r => [v].concat(r))), [[]]);
console.log(powerset(["dog", "pig"]));

1.) The reduce function is taking in the accumulator a , which starts with our initializer [[]] , and the first value v from the array powerset , which is dog .

2.) When we map through a , our first value of r is the empty array with subarray, [[]] . When you do [dog].concat([[]]) , you end up with just [dog] .

3.) Then, you have a.concat(dog) , so you end up with [[], [dog]] . Your new accumulator or a value is now [[], [dog]] .

4.) Next loop of the reduce function, accumulator a is [[], [dog]] , and v is the second item in our powerset array, pig .

5.) Again, map through a . First loop will be pig.concat([]) . You will just get [pig] .

6.) Next loop will be pig.concat([dog]) , so you get [pig, dog] .

7.) Now, perform the a.concat again. Because our new a was [[], [dog]] , we are now adding our two new results to get [[], [dog], [pig], [pig, dog]] .

That is how we end up with all of the different combinations of "pig, dog".