JS数组扁平化

一道笔试题，将一个嵌套数组扁平化处理。

 

▍题目

将[1,2,[3,[4,5]]]转化成[1,2,3,4,5]。

 

▍方法一：递归

var arr = [1, 2, [3, [4, 5]]];

function flatten(arr) {
	var res = [];
	for(var i = 0; i < arr.length; i++) {
		if(Array.isArray(arr[i])) {
			res = res.concat(flatten(arr[i]));
		} else {
			res.push(arr[i]);
		}
	}
	return res;
}

var result = flatten(arr);
console.log(result);

Array.isArray()：判断某个值是否为数组，返回布尔类型。

 

▍方法二：reduce

var arr = [1, 2, [3, [4, 5]]];

function flatten(arr) {
	return arr.reduce((result, item) => {
		return result.concat(Array.isArray(item) ? flatten(item) : item);
	}, []);
}

var result = flatten(arr);
console.log(result);

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

reduce包含两个参数：回调函数，传给total的初始值。

// 求数组的各项值相加的和： 
arr.reduce((total, item)=> {  // total为之前的计算结果，item为数组的各项值
    return total + item;
}, 0);

 

▍方法三：toString & split

var arr = [1, 2, [3, [4, 5]]];

function flatten(arr) {
    return arr.toString().split(',').map(function(item) {
        return Number(item);
    })
} 

var result = flatten(arr);
console.log(result);

因为split分割后形成的数组的每一项值为字符串，所以需要用一个map方法遍历数组将其每一项转换为数值型。

map()：对数组中每一项运行回调函数，返回该函数的结果组成的新数组。

 

▍方法四：join & split

var arr = [1, 2, [3, [4, 5]]];

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

var result = flatten(arr);
console.log(result);

join也可以将数组转换为字符串。

 

▍方法五：扩展运算符

var arr = [1, 2, [3, [4, 5]]];

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

var result = flatten(arr);
console.log(result);

some()：对数组中每一项运行回调函数，如果该函数对某一项返回true，则some返回true。

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

[].concat(...[1, 2, 3, [4, 5]]);  // [1, 2, 3, 4, 5]

 

▍效果