js数组扁平化

Jacascript技巧一——扁平化数组 有时候我们需要处理一些特别的数组，如

var arr = [1,2,[3,4,[5,6]] 上面的数组有多层嵌套，我们需要将他化为一维的数组

知道了需求之后我们开始写方法，处理这种数组有多种方法

方法一

flat() var newArr = arr.flat(Infinity) console.log(newArr) //[1,2,3,4,5,6] flat(deep)函数可以将指定深度的数组重新排列并返回一个新的数组，接收一个参数，即展开的深度，默认为1

这里传一个参数为Infinify，直接展开成一维的数组

方法二 reduce()

var newArr = arr.reduce((total, current) => total.concat(current), []) console.log(newArr) //[1,2,3,4,[5,6]] 第二种方法是使用reduce()函数，它接收两个参数，一个是回调函数，一个是传给回调函数的初始值，而回调函数中又有四个参数，第一个参数是初始值，或者是计算结果返回的累加值，第二个参数就是当前元素

利用reduce我们可以轻松对一个数组的值进行累加或别的处理。

我们传给一个空数组作为初始值，让它每次和当前元素进行一个拼接，但是这种做法的缺点就是，只能解开一层的嵌套，如果要化为一维数组，可以进行下面改进

reduce()递归 function flattenDeep(target) { return target.reduce((total, current) => Array.isArray(current) ? total.concat(flattenDeep(current)) : total.concat(current), []) } console.log(flattenDeep(arr)) //[1,2,3,4,5,6]

方法三 使用stack

function flatten(target) { const stack = […target] const res = [] while (stack.length) { const next = stack.pop() Array.isArray(next) ? stack.push(…next) : res.push(next) } return res.reverse(); } var newArr = flatten(arr) console.log(newArr) //[1,2,undefined,3,4,5,6] 从结果我们可以看到，和之前的有点不同，这时候我们再看下原数组

var arr = [1,2,[3,4,[5,6]] 原数组是有一个空元素的，而在方法一和二中，空元素都被忽略了，flat()会自动清除数组中的空元素，reduce()的回调函数中遇到空元素也会忽略掉

方法四 toString & split

调用数组的toString方法，将数组变为字符串然后再用split分割还原为数组 function flatten(arr) { return arr.toString().split(’,’).map(function(item) { return Number(item); }) }

方法五 join & split

和上面的toString一样，join也可以将数组转换为字符串

function flatten(arr) { return arr.join(’,’).split(’,’).map(function(item) { return parseInt(item); }) }

方法六 扩展运算符

es6的扩展运算符能将二维数组变为一维

[].concat(…[1, 2, 3, [4, 5]]); // [1, 2, 3, 4, 5] 根据这个结果我们可以做一个遍历，若arr中含有数组则使用一次扩展运算符，直至没有为止。

function flatten(arr) { while(arr.some(item=>Array.isArray(item))) { arr = [].concat(…arr); } return arr; }