介绍两种方法,一是ES6的flat,简单粗暴。二是递归,也不麻烦。

flat

  ES6自带了flat方法,用于使一个嵌套的数组扁平化,默认展开一个嵌套层。flat方法接收一个数字类型参数,参数值即嵌套层的深度,默认为1。(注意是“嵌套层”不是“层”,如传入0则不展开任何嵌套)

    需要注意的是:第一,flat方法一旦使用,必将移除掉数组的empty空项;第二,flat方法返回一个新数组,并不会改变原数组。

    由于我们不好确定最大嵌套层的深度,因此有个很暴力的方法,直接传入Infinity,可以展开任意深度的嵌套数组。

let flattenDeep = (arr) =>{
return arr.flat(Infinity);
}

 

reduce和concat递归

  这种方法也不麻烦,以一个空数组为基础值,遇到非数组的子元素,则加入到基础值数组中;如遇到数组子元素,说明有嵌套层,则递归使用flattenDeep方法,等待其返回一维扁平数组,然后再追加到基础值数组中。最后,把这个基础值数组return出去。

let flattenDeep = (arr) =>{
return arr.reduce((acc, cur) =>
Array.isArray(cur) ? acc.concat(flattenDeep(cur)) : acc.concat(cur), []);
}

  

 

  

  

【JS简洁之道小技巧】第一期 扁平化数组的更多相关文章

  1. 【js】中的小技巧

    本文主要介绍一些JS中用到的小技巧 1. 类型强制转换   1.1 string强制转换为数字 可以用*1来转化为数字(实际上是调用.valueOf方法) 然后使用Number.isNaN来判断是否为 ...

  2. JS、JQ相关小技巧积攒

    JS.JQ相关小技巧积攒,以备不时之需. 1.js 获取时间差:时间戳相减.new Date().getTime()  获得毫秒数,除以(1000*60*60*24) 获得天数. 2.重定向操作:页面 ...

  3. JS前端下载文本文件小技巧:1、download属性;2、借助Blob转换成二进制下载

    一.HTML download 与文件下载 如果希望在前端侧直接触发某些资源的下载,最方便快捷的方法就是使用HTML5原生的download属性,例如: <a href="large. ...

  4. js 中的一些小技巧

    js 数字操作: 1.1 取整: 取整有很多方法如: parseInt(a,10); Math.floor(a); a>>0; ~~a; a|0; 前面2种是经常用到的,后面3中算是比较偏 ...

  5. 让你的JS更优雅的小技巧

    首先,看一个非常不优雅的例子: 看到这段代码,虽然代码很短,但是一眼看上去就不想再看了,也就是没什么可读性.这段代码,没有封装,随意定义一个变量都是全局变量,这样在多人开发或者是大型开发中,极其容易造 ...

  6. js代码的一些小技巧

    1. 数组中通过赋值语句来改变值 var a = 1; var msg = ["value0","value1"]; for(var i = 0;i<10 ...

  7. 泛微关于js设计的一些小技巧

    1.关于泛微流程的js设计 泛微oa可以插入javascript可以diy自己想要的表单页面前端功能.如果有前端开发经验,或者熟练使用jQuery的话,这将变得非常容易!同时泛微OA内部有很多库,包括 ...

  8. 关于js事件执行顺序小技巧

    js事件执行顺序是js中一个老生常谈的一个话题, 聊这个话题之前我们先谈谈怎么给页面元素绑定我们需要的事件 1.给页面元素绑定事件 a)直接在元素上面加上需要绑定的事件,如 <button ty ...

  9. js脚本代码调试小技巧

    以前写js代码调试代码查看数据是否正确的时候不知道F12(开发者工具),都是alert(xxx)或者console.log(xxx), 现在知道还可以用document.write或者try...ca ...

随机推荐

  1. QT--TCP网络编程(客户端/服务器)

    QT -----TCP网络编程   1.主要流程 1.客户端 创建QTcpSocket对象 连接到服务器 --connectToHost() 发送数据 ---write() 读取数据 ---readA ...

  2. unittest---unittest封装方法

    前面我们写了一个关于查询歌曲的接口测试,但是代码重复性比较大,进行一次简单的优化 封装方法 在编写自动化脚本的时候,都要求代码简介,上一篇unittest---unittest断言中代码重复性比较多, ...

  3. 创建mysql索引的方式

    创建索引方式: 1.create index 索引名   on 表名 (字段) 2.alter table 表  add index 索引名  (字段) -- 普通索引 alter table 表名 ...

  4. gradle下mybatis自动生成框架的使用

    自动生成框架的意义 主要为了解决人为添加mapper,模型等工作,减少错误,提交效率! 添加引用build.gradle configurations { mybatisGenerator } myb ...

  5. CSS入门(边框、轮廓、元素的分类、盒子模型的三个构成部分)

    一.边框属性 作用:给元素加上一个边框 第一种: border-top border-bottom border-left boder-right 三个属性值: 粗细 线型 颜色 第二种: borde ...

  6. My97DatePicker-WdatePicker日历日期插件详细示例

    <!DOCTYPE html> <html> <head> <title>排行</title> <meta charset=" ...

  7. PHP 利用PHPExcel到处数据到Excel;还有导出数据乱码的解决方案。

    直接贴代码吧 PHP版本5.6.38 mysql版本5.0 //连接数据库 $mysql_server_name = "*.*.*.*"; $mysql_username=&quo ...

  8. Spring Boot Mybatis 最基本使用mysql存储过程

    首先声明:只是用最简单的方法大致了解如何用存储过程开发,如果需要查看存储过程创建语法的自行百度搜索 一.首先创建最基本的数据库 CREATE TABLE `t_user` ( `id` varchar ...

  9. python中 遇到的读取坑2.7和3.6版本的问题

    2.7读取,需要使用io.open 3.x使用open 使用io.open的时候路径需要使用\\ 目前io.open的文件名不能为中文

  10. 数据库事务系列-MySQL跨行事务模型

    说来和MySQL倒是有缘,毕业的第一份工作就被分配到了RDS团队,主要负责把MySQL弄到云上做成数据库服务.虽说整天和MySQL打交道,但说实话那段时间并没有很深入的理解MySQL内核,做的事情基本 ...