js 实现数组扁平化

什么是数组扁平化？

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

首先让我们思考一个这样的题目；假如有一个数组 var arr = [1, [2, 3, [4]]] ，我们怎么能把arr变成[1, 2, 3, 4]呢？即让多维数组降维，转换为只有一层的数组；如果用过lodash的话，我们知道 flatten 和 flattenDeep 方法都可以实现.

flatten用法：

概念：可以理解为将嵌套数组的维数减少，flattened（平坦）. 如果 isDeep 值为 true 时，嵌套数组将递归为一维数组, 否则只减少嵌套数组一个级别的维数.
代码如下：

参数： array (Array): 需要flattened（减少维数）的嵌套数组
[isDeep] (boolean): 是否深递归
返回值： (Array): 返回处理后的数组
// using `isDeep`
_.flatten([1, [2, 3, [4]]], true);
// => [1, 2, 3, 4]

flattenDeep用法：

概念：递归地平坦一个嵌套的数组.相当于_.flatten(array, true)
**参数：array (Array): 需要
返回值：(Array): 返回处理后的数组.

flattenDeep: 递归地平坦一个嵌套的数组.相当于_.flatten(array, true).
_.flattenDeep([1, [2, 3, [4]]]);
// => [1, 2, 3, 4]

那么如果我们自己写该如何实现呢？下面列举几种实现方式：

1. 循环数组+递归

实现思路：循环数组，如果数据中还有数组的话，递归调用flatten扁平函数（利用for循环扁平），用concat连接，最终返回result;

 function flatten(arr){
var result = [];
for(var i = 0, len = arr.length; i < len; i++){
if(Array.isArray(arr[i])){
result = result.concat(flatten(arr[i]));
}else{
result.push(arr[i]);
}
}
return result;
}
flatten(arr)
// [1,2,3,4]

2. 利用apply

可以使用apply的原因如下：

var arr = [1, [2, 3, [4]]];
[].concat.apply([],arr);
// [1,2,3,[4]]

实现思路：利用arr.some判断当数组中还有数组的话，递归调用flatten扁平函数(利用apply扁平), 用concat连接，最终返回arr;

 function flatten(arr){
while(arr.some(item => Array.isArray(item))){
arr =
[].concat.apply([],arr);
}
return arr;
}
flatten(arr)
// [1,2,3,4]

3. reduce方法

reduce() 方法对累加器和数组中的每个元素（从左到右）应用一个函数，将其减少为单个值。
能使用reduce原因如下：

var flattened = arr.reduce(function(prev, cur){
return prev.concat(cur)
},[])
console.log(flattened);
//
[1,2,3,[4]]

实现思路：使用reduce, 当数组中还有数组的话，递归调用flatten扁平函数(利用reduce扁平), 用concat连接，最终返回arr.reduce的返回值;

function flatten(arr){
return arr.reduce(function(prev, cur){
return prev.concat(Array.isArray(cur) ? flatten(cur) : cur)
},[])
}
flatten(arr)
// [1,2,3,4]

4. es6 展开运算符

可以使用es6 展开运算符的原因如下：

var arr = [1, [2, 3, [4]]];
console.log(...arr);
// 1,[2,3,[4]]

实现思路：利用arr.some判断当数组中还有数组的话，递归调用flatten扁平函数(利用es6展开运算符扁平), 用concat连接，最终返回arr;

function flatten(arr){
while(arr.some(item => Array.isArray(item))){
arr = [].concat(...arr);
}
return arr;
}
flatten(arr)
// [1,2,3,4]

5. toString方法（数组元素为数字）

如果数组的元素是数字，那么我们可以考虑toString()方法，其他情况不适用。原因如下：

[1, [2, 3, [4]]].toString()
// "1,2,3,4"

实现思路：数组适用toString()方法后变成以逗号分割的字符串，然后map遍历数组把每一项再变回整数并返回map后的结果。

function flatten(arr){
return arr.toString().split(',').map(function(item){
return parseInt(item);
})
}
flatten(arr)
// [1,2,3,4]

6. yield*的用法，天才级别的扁平化方式

function* iterTree(tree){
if(Array.isArray(tree)){
for(let i = 0 ;i<tree.length;i++){
yield* iterTree(tree[i]);
}
}else{
yield tree;
}
}
　let arr1 = [1, 2, ['a', 'b', ['中', '文', [1, 2, 3, [11, 21, 31]]]], 3];
let list=[]
for (const x of iterTree(arr1)) {
list.push(x)
}
console.log(list);//[1, 2, "a", "b", "中", "文", 1, 2, 3, 11, 21, 31, 3]

最后

以上就是腼腆柚子为你收集整理的js 实现数组扁平化的全部内容，希望文章能够帮你解决js 实现数组扁平化所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。