JS数组扁平化（数组降维、数组拍平）

数组扁平化：将一个多维数组转换为一个一维数组

Array.prototype.flat()

• 该方法返回一个新的数组，对原数据没有影响
• flat() 不传参数时，默认扁平化一层
• flat(参数) 传入一个整数时，这个整数代码想要扁平化的层数
• 传入 <=0 的整数将不进行扁平化，返回原数组
• 如果原数组有空位，Array.prototype.flat() 会跳过空位

const test = [1, [2, 3],
  [4, [5, [6]], 7]
]

console.log(test);
//(3) [1, Array(2), Array(3)]

// flat不传参数时，默认扁平化一层
const c1 = test.flat();
//并不会影响原数组，将返回一个扁平化后的新数组
console.log(c1);
//(6) [1, 2, 3, 4, Array(2), 7]

// flat传入一个整数参数，整数即扁平化的层数
const c2 = test.flat(2);
console.log(c2);
//(7) [1, 2, 3, 4, 5, Array(1), 7]

// Infinity 关键字作为参数时，无论多少层嵌套，都会转为一维数组
c3 = test.flat(Infinity);
console.log(c3);
// [1, 2, 3, 4, 5, 6, 7]

// 传入 <=0 的整数将返回原数组，不扁平化
test.flat(0)
test.flat(-1)

// 如果原数组有空位，flat()方法会跳过空位。
const c4 = [1, 2, 3, 4, 5, , ].flat();
console.log(c4);
//(5) [1, 2, 3, 4, 5]

自主实现flat完全扁平化

function flat(arr) {
  var res = [];
  // 遍历数组里的元素
  for (let cur of arr) {
    // 判断是否为数组
    if (Array.isArray(cur)) {
      // concat连接数组
      res = res.concat(flat(cur))
    } else {
      // 将cur添加到返回数组的末尾
      res.push(cur)
    }
  }
  return res;
}

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

lodash的baseFlatten

在lodash中和数组扁平化相关的方法有三个,实际实现上都是对baseFlatten()函数的包装。

• flatten()是对数组进行一层扁平化处理
• flattenDeep()是对数组完全扁平化处理
• flattenDepth()是对数组进行指定层级的扁平化处理

baseFlatten()

源码
核心代码：

function baseFlatten(arr, depth, result){
	result || (result=[]);

	if(arr === null) return result;

	for(const val of arr){
		if(depth>0 && Array.isArray(val)){
			if(depth>1){
				baseFlatten(val, depth-1, result);
			}else{
				result.push(...val);
			}
		}else{
			result[result.length] = val;
		}
	}
	return result;
}

(注：js …的使用)

flatten(一层扁平化)

function flatten(arr) {
  // 获取数组的length
  const length = arr == null ? 0 : arr.length
  // 当length大于0时，调用baseFlatten方法，扁平化层级为1
  return length ? baseFlatten(arr, 1) : []
}

flattenDeep(完全扁平化)

function flatten(arr) {
  // 获取数组的length
  const length = arr == null ? 0 : arr.length
  // 当length大于0时，调用baseFlatten方法，扁平化层级为INFINITY无限大
  return length ? baseFlatten(arr, INFINITY) : []
}

flattenDepth(指定层级的扁平化)

function flattenDepth(arr, dep) {
  // 获取数组的length
  const length = arr == null ? 0 : arr.length
  // length为0，直接返回空数组
  if (!length) {
    return []
  }
  // 判断dep，当dep为undefined时取1，否则通过一个加运算符操作转换为number类型
  dep = dep === undefined ? 1 : +dep
  // 调用baseFlatten方法，扁平化层级为depth
  return baseFlatten(array, depth)
}

使用reduce方法

实现flatteDeep()

function flattenDeep(arr) { 
    return Array.isArray(arr)? arr.reduce( (acc, cur) =>
     [...acc, ...flattenDeep(cur)] , []): [arr]
}

flatten() 和 flattenDepth()实现方法类似flatteDeep()

实现flat

function flat(arr, depth = 1) {
    return depth > 0 ? arr.reduce((acc, cur) => {
        if(Array.isArray(cur)) {
            return [...acc, ...flat(cur, depth-1)]
        }
        return [...acc, cur]
    } , []): arr
}