How to understand [] .concat (.arr), separate .arr error report

background:
Multidimensional array expansion
question:

var arr = [1,2,[3,4,[5,6,[7,8],9],10]];
function fn(arr){
    return [].concat(arr.map(d=> Array.isArray(d)?fn(d):d))//(3)[1, 2, Array(4)]
//  return [].concat(...arr.map(a=> Array.isArray(a)? fn(a):a))//(10)[1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
}
What"s wrong with the first way of writing? Why the result is not ideal
how to break a sentence in the second way

Es6
Jun.10,2021

. followed by the array, that is, the result of arr.map


is the difference between the two. The use of.
the first one. Arr [0], arr [1] will not say, arr [2] is that the array will execute fn, again no matter what the result is, the return statement returns an array, so arr [2] must be an array in the result, and then recursion is the same.
second, the return result executed by arr [2] is an array, but because there is a function parameter expander in front of it, the expansion of the result array executed by arr [2] will be passed to concat for connection. The following recursive principle is


. extension operation 12 [3,4, Array (4), 10]
map
teach you a simple way to execute the break point step by step


  1. fn returns an array, so the result must be a multi-dimensional array
  2. concat can only accept arrays as parameters, "." After the operation, it is not an array.
[].concat([1,[3]].map(d=> Array.isArray(d)? [].concat([3].map(a=>a)):d))

//[3].map(d=>d)   [].concat([3]) == [3]
//[1,[3]].map(d=> d)

[].concat([1,[3]].map(d=> d))

[].concat([1,[3]])

[1,[3]]
Menu