JS实现数组扁平化的几种常见方式

文章目录

• 1. 利用es6新方法
• 2. 利用递归
• • 2.1 利用 some 递归
  • 2.2 利用 map 递归
  • 2.3 利用 reduce 递归
• 3. 利用 toString
• 4. 利用 join
• 5. 利用正则
• 总结

数组扁平化也叫数组降维是指将一个多维数组变为一维数组

1. 利用es6新方法

es6 提供的新方法 flat(depth)，参数depth为数组的纬度：

var arr = [[1, 2], 3, [4, 5, [6, 7, [8, 9, [10, 11]]]]];

a.flat(); // [1, 2, 3, 4, 5, Array(3)]
a.flat(4); // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11]

其实还有一种更简单的办法，无需知道数组的维度，直接将目标数组变成1维数组。 depth的值设置为Infinity：

var arr = [[1, 2], 3, [4, 5, [6, 7, [8, 9, [10, 11]]]]];

arr.flat(Infinity); // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11]

---

2. 利用递归

遍历数组每一项，若值为数组则递归遍历，否则 concat ：

2.1 利用 some 递归

// 方法一：
function flatten (arr) {
	const isDeep = arr.some(item => Array.isArray(item));

	if (!isDeep) {
		return arr
	}
	const res = [].concat(...arr);
	// 等价于
	//const res = Array.prototype.concat.apply([], arr);
	
	return flatten(res);
}

2.2 利用 map 递归

// 方法二：
function flatten(arr) {
    var res = [];
    arr.map(item => {
        if (Array.isArray(item)) {
            res = res.concat(flatten(item));
        } else {
            res.push(item);
        }
    });
    return res;
}

2.3 利用 reduce 递归

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

---

3. 利用 toString

调用数组的toString方法，将数组变为字符串然后再用split分割还原为数组

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

---

4. 利用 join

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

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

---

5. 利用正则

利用正则去掉中间所有的 [ ]，直接粗暴

function flatten(arr) {
	let str = JSON.stringify(arr);
	str = str.replace(/(\[|\])/g, '');
	str = '[' + str + ']';
	return JSON.parse(str); 
};

---

总结

虽然说写了好几种方法，但是核心也只有一个：

遍历数组 arr，若 arr[i] 为数组则递归遍历，直至 arr[i] 不为数组然后与之前的结果 concat