concat和apply实现多维数组扁平化、深入理解concat/apply

一、concat和apply实现多维数组扁平化

需求：定义一个Array原型方法，实现多维数组扁平化

例如：已有多级嵌套数组 : [‘a’, [1, [2, [3, 4]]], true] 将其扁平化处理 输出: [‘a’,1,2,3,4,true]

实现：

Array.prototype.flat = function() {
  // 方法一：递归 + concat 方法二：tostring() + split(',') 但是这种方法会把数组内数据都变为字符串类型，只适用于全部为字符串类型的数组
  const arr = this
  const ifFlat = arr.some(item => item instanceof Array) // 数组内是否有嵌套数组
  if(ifFlat) {
    const newArr = Array.prototype.concat.apply([], arr) // 相当于 [].concat(...arr)
    return flat(newArr)
  }
  return arr
}
console.log((['a', [1, [2, [3, 4]]], true]).flat()) // ['a',1,2,3,4,true]
1
2
3
4
5
6
7
8
9
10
11

一、深入理解javascript中concat、apply方法

• concat

使用concat方法时，会将新数组的成员，添加到原数组的尾部，然后返回一个新数组，原数组不变；如果传入的其他类型的值，它们会作为新的元素，添加到数组末尾。

// 参数为数组
console.log([].concat([1],[2],[3])); // [1, 2, 3]
console.log([].concat([1],[2,3])); // [1,2,3]
console.log([].concat([[1],[2],[3]])); // [[1], [2], [3]] 
1
2
3
4

// 参数为其他类型（非数组）
console.log([].concat(1,2,3)); //[1,2,3]; 
//等同于 
console.log([].concat(1,[2,3])); //[1,2,3]; 
1
2
3
4

• apply

apply方法的第一个参数也是this所要指向的那个对象，如果设为null或undefined或者this，则等同于指定全局对象。第二个参数则是一个数组，该数组的所有成员依次作为参数，在调用时传入原函数。

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