前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >前端面试 【JavaScript】— JS中将数组扁平化有哪些方法?

前端面试 【JavaScript】— JS中将数组扁平化有哪些方法?

作者头像
越陌度阡
发布2021-11-24 11:46:01
7410
发布2021-11-24 11:46:01
举报

对于前端项目开发过程中,偶尔会出现层叠数据结构的数组,我们需要将多层级数组转化为一级数组(即提取嵌套数组元素最终合并为一个数组),使其内容合并且展开。那么该如何去实现呢?

需求:多维数组=>一维数组

1. 调用ES6中的flat方法

代码语言:javascript
复制
let list= [1, [2, [3, [4, 5]]],6];

let newList = list.flat(Infinity);
console.log(newList);
// [1,2,3,4,5,6]

2. replace + split

代码语言:javascript
复制
let list= [1, [2, [3, [4, 5]]],6];

let str = JSON.stringify(list);
let newList = str.replace(/(\[|\])/g, '').split(',');
console.log(newList);
// ["1", "2", "3", "4", "5", "6"]

3. replace + JSON.parse

代码语言:javascript
复制
let list= [1, [2, [3, [4, 5]]],6];

let str = JSON.stringify(list);
str = str.replace(/(\[|\])/g, '');
str = '['+str+']';
let newList=JSON.parse(str);
console.log(newList);
// [1, 2, 3, 4, 5, 6]

4. 普通递归

代码语言:javascript
复制
let list= [1, [2, [3, [4, 5]]],6];

let result= [];
let fn=function(list) {
    for(let i=0; i<list.length; i++) {
        let item=list[i];
        if (Array.isArray(list[i])){
            fn(item);    
        } else {
            result.push(item);    
        }  
    }
};
fn(list);
console.log(result);
// [1, 2, 3, 4, 5, 6]

5. 利用reduce函数迭代

代码语言:javascript
复制
let list= [1, [2, [3, [4, 5]]],6];

function flat(list) {
    return list.reduce((pre, cur) => {
        return pre.concat(Array.isArray(cur)?flat(cur):cur);    
    }, []);
};
let newList = flat(list);
console.log(newList);
//  [1, 2, 3, 4, 5, 6]

6. 扩展运算符

代码语言:javascript
复制
let list= [1, [2, [3, [4, 5]]],6];
while (list.some(Array.isArray)) {
    // 将多维数组逐渐展开拼接
    list=[].concat(...list);
};
console.log(list);
// [1, 2, 3, 4, 5, 6]
本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2021-11-20 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 1. 调用ES6中的flat方法
  • 2. replace + split
  • 3. replace + JSON.parse
  • 4. 普通递归
  • 5. 利用reduce函数迭代
  • 6. 扩展运算符
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档