js实现数组扁平化的方式

什么是数组扁平化？

把多层嵌套的数组中的内容取出，变成一维的数组。

实现数组扁平化的方式

1、递归实现

遍历数组，如果某一项是基本数据类型，直接push到新数组，如果某一项是数组，则直接将这一项concat到新的数组上，当然如果是多维数组，还得用上递归的方法，继续往下层寻找。

isArray() 方法用于判断一个对象是否为数组。

concat() 方法用于连接两个或多个数组。

代码如下:

 function flattern(arr) {
        let result = [];
        for(let i = 0; i < arr.length; i++) {
            if(Array.isArray(arr[i])) {
                result = result.concat(flattern(arr[i]))
            } else {
                result.push(arr[i])
            }
        }
        return result;
}
let arr = [1,2,3,4,[5,6,[7,8]]]
console.log(flattern(arr)); // [1,2,3,4,5,6,7,8]

2、利用reduce函数迭代

reduce() 方法接收一个函数作为累加器，数组中的每个值（从左到右）开始缩减，最终计算为一个值。

代码如下：

let arr = [1,2,3,4,[5,6,[7,8]]]
function flatten1(arr) {
   return arr.reduce((res, next) => {
      return res.concat(Array.isArray(next) ? flatten1(next) : next)
   }, [])
}
console.log(flatten1(arr));  // [1,2,3,4,5,6,7,8]

3、利用扩展运算符实现

扩展运算符是ES6中新定义的，它能将二维数组变成一维。

some() 方法用于检测数组中的元素是否满足指定条件（函数提供）。

some() 方法会依次执行数组的每个元素：如果有一个元素满足条件，则表达式返回true , 剩余的元素不会再执行检测。如果没有满足条件的元素，则返回false。

every() 方法用于检测数组所有元素是否都符合指定条件（通过函数提供）。

every() 方法使用指定函数检测数组中的所有元素：如果数组中检测到有一个元素不满足，则整个表达式返回 false ，且剩余的元素不会再进行检测。如果所有元素都满足条件，则返回 true。

代码如下：

var arr = [1, [2, [4, [5, [6]]]]]
var arr1 = [
	{
		name:'张三'
	},
	[
		{
			name:'李四'
		},
		{
			name:'王五'
		}
	]
]
function flatten2_1(arr) {
	while (arr.some(item => Array.isArray(item))) {
		arr = [].concat(...arr)
	}
	return arr
}
console.log(flatten2_1(arr)); // [1,2,3,4,5,6]
console.log(flatten2_1(arr1));

function flatten2_2(arr) {
	while (!arr.every(item => !Array.isArray(item))) {
		arr = [].concat(...arr)
	}
	return arr
}
console.log(flatten2_2(arr)); // [1,2,3,4,5,6]
console.log(flatten2_2(arr1));

4、split和toString共同处理 或者 split和join共同处理

数组会默认带的 toString 和 join 方法，可以把数组转换成字符串，然后再用split方法把字符串重新转换为数组，但是这种转换方式会有个问题，元素类型会被转换成字符串类型。

toString() 方法可把数组转换为字符串，并返回结果。

join() 方法用于把数组中的所有元素转换为一个字符串。

代码如下：

var arr = [1, [2, [4, [5, [6]]]]]
var arr1 = [
	{
		name:'张三'
	},
	[
		{
			name:'李四'
		},
		{
			name:'王五'
		}
	]
]
function flatten3_1(arr) {
	return arr.toString().split(',')
}
console.log(flatten3_1(arr))	// ['1','2','3','4','5','6']
console.log(flatten3_1(arr1))  // ['[object Object]', '[object Object]', '[object Object]']

function flatten3_2(arr) {
	return arr.join(',').split(',');
}
console.log(flatten3_2(arr))	// ['1','2','3','4','5','6']
console.log(flatten3_2(arr1))  // ['[object Object]', '[object Object]', '[object Object]']

5、ES6的flat函数实现

flat是ES6中新定义的方法。flat() 方法会按照一个可指定的深度递归遍历数组，并将所有元素与遍历到的子数组中的元素合并为一个新数组返回。

数组的嵌套层数不确定的时候，最好直接使用 Infinity。

代码如下：

var arr = [1, [2, [4, [5, [6]]]]]
function flatten4(arr) {
	return arr.flat(Infinity)
}
console.log(flatten4(arr))	// [1,2,3,4,5,6]

6、JSON和正则表达式共同实现

将数组用JSON.stringify的方法先转换为字符串，然后通过正则表达式过滤掉字符串中的数组的方括号，最后再利用JSON.parse把它转换成数组。

代码如下：

var arr = [1, [2, [4, [5, [6]]]]]
function flatten5(arr) {
	let str = JSON.stringify(arr)
	str = str.replace(/(\[|\])/g, '')
	str = '[' + str + ']'
	return JSON.parse(str)
}
console.log(flatten5(arr)); // [1,2,3,4,5,6]