concat + apply到底是做什么来使数组变平？

Question

I've basically memorized this [].concat.apply([], a) to flatten an array that isn't deeply nested but I don't entirely understand how it works. For instance, where does apply comes into this?

Is it more efficient than arr.reduce((x,y) => [...x,...y]) ?

Answer 1

There are a couple of aspects to this:

concat flattens (to one level) arrays you pass into it, including only their elements in the resulting array:

 console.log([1, 2, 3].concat(4, 5, [6, 7, 8])); 

Notice how the array at the end was flattened.

The apply is Function.prototype.apply : You can use it to call a function specifying what this should be and providing the arguments for the function as an array. That last bit is critical: The array's elements are passed to concat as discrete arguments, and if any of those are arrays, concat extracts their content. So

let a = [[1, 2, 3], 4, 5, [6, 7, 8]];
a = [].concat.apply([], a);
//  ^^--- (1)       ^^--- (2)

...calls concat with this being array (2) above, passing in the arguments [1, 2, 3] , 4 , 5 , and [6, 7, 8] . (Array (1) is only used to get concat , then thrown away.)

[].concat.apply([], a) is a bit wasteful (it creates two throw-away arrays, both of the ones indicated above), though it's not likely to matter; really it should be `Array.prototype.concat.apply([], although that still creates and throws away one of them. (Obviously, you'd tuck that away in a reusable function so you don't have to type that out every time.)

But in modern JavaScript you may want to use flat instead, with a polyfill if necessary:

 console.log( [ [1, 2, 3], 4, 5, [6, 7, 8] ].flat() ); 

The above works on up-to-date versions of Chrome, Firefox, and Safari, but again you can use a polyfill to use it on other browsers.

Note that flat optionally does recursive flattening. By default it does just one level (like concat ), but if you specify a depth argument, you can go deeper (you can use Infinity to handle all levels).

Answer 2

The apply call is equivalent to using spread syntax:

[].concat.apply([], a)
[].concat(...a)

It simply concatenates an empty array with all the values of a , passing muliple arguments to concat . It constructs a new array in a single step, which is more efficient than your reduce solution that creates lots of intermediate results.