今天在项目中,看到了flat的一个语法,是我之前没有用过的,所以有必要记录下来,作为新的知识点,巩固我自己的知识点;

附赠转载连接:https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/flat;出自此链接

这是我今天百度看到的一个比较全的解释;

flat 的语法:

var newArray = arr.flat(depth);//depth是参数;指定要提取嵌套数组的结构深度,默认值为 1;是一个可选的参数;flat的返回值是一个包含将数组与子数组中所有元素的新数组。

例子:
 var arr1 = [1, 2, [3, 4]];
arr1.flat();
// [1, 2, 3, 4]
var arr2 = [1, 2, [3, 4, [5, 6]]];
arr2.flat();
// [1, 2, 3, 4, [5, 6]] var arr3 = [1, 2, [3, 4, [5, 6]]];
arr3.flat(2);
// [1, 2, 3, 4, 5, 6] //使用 Infinity 作为深度,展开任意深度的嵌套数组
arr3.flat(Infinity);
// [1, 2, 3, 4, 5, 6]

flat除了有扁平化嵌套数组之外还可以扁平化空项;  var arr4 = [1, 2, , 4, 5]; arr4.flat(); // [1, 2, 4, 5]

使用 reduce 与 concat的一个代替方案

 var arr1 = [1, 2, [3, 4]];
arr1.flat(); // 反嵌套一层数组
arr1.reduce((acc, val) => acc.concat(val), []);// [1, 2, 3, 4] // 或使用 ...
const flatSingle = arr => [].concat(...arr); // 使用 reduce、concat 和递归无限反嵌套多层嵌套的数组
var arr1 = [1,2,3,[1,2,3,4, [2,3,4]]]; function flattenDeep(arr1) {
return arr1.reduce((acc, val) => Array.isArray(val) ? acc.concat(flattenDeep(val)) : acc.concat(val), []);
}
flattenDeep(arr1);
// [1, 2, 3, 1, 2, 3, 4, 2, 3, 4] // 不使用递归,使用 stack 无限反嵌套多层嵌套数组
var arr1 = [1,2,3,[1,2,3,4, [2,3,4]]];
function flatten(input) {
const stack = [...input];
const res = [];
while (stack.length) {
// 使用 pop 从 stack 中取出并移除值
const next = stack.pop();
if (Array.isArray(next)) {
// 使用 push 送回内层数组中的元素,不会改动原始输入 original input
stack.push(...next);
} else {
res.push(next);
}
}
// 使用 reverse 恢复原数组的顺序
return res.reverse();
}
flatten(arr1);// [1, 2, 3, 1, 2, 3, 4, 2, 3, 4]

flat 的用法的更多相关文章

  1. numpy常用用法总结

    numpy 简介 numpy的存在使得python拥有强大的矩阵计算能力,不亚于matlab. 官方文档(https://docs.scipy.org/doc/numpy-dev/user/quick ...

  2. matlab中patch函数的用法

    http://blog.sina.com.cn/s/blog_707b64550100z1nz.html matlab中patch函数的用法——emily (2011-11-18 17:20:33) ...

  3. iOS 开发-- enum与typeof enum用法

    一, 两者的用法 枚举类型定义用关键字enum标识,形式为: enum标识符 { 枚举数据表 }; enum用来定义一系列宏定义常量区别用,相当于一系列的#define ** **,当然它后面的标识符 ...

  4. flat ui switch 改变状态而不响应事件

    Flat UI是一套精美的扁平风格 UI 工具包,基于 Twitter Bootstrap实现.这套界面工具包含许多基本的和复杂的 UI 部件,例如按钮,输入框,组合按钮,复选框,单选按钮,标签,菜单 ...

  5. set--常见成员函数及基本用法

    c++ stl集合set介绍 c++ stl集合(Set)是一种包含已排序对象的关联容器. set/multiset会根据待定的排序准则,自动将元素排序.两者不同在于前者不允许元素重复,而后者允许. ...

  6. Mybatis基本用法--下

    Mybatis基本用法--下 第七部分 mybatis-spring-boot-starter 官网:http://www.mybatis.org/spring-boot-starter/mybati ...

  7. JavaScript数组方法--flat、forEach、map

    今天到flat了,一个第一次知道该方法还是看到一个面试题,别人给了个答案,用到了flat才知道的方法. 前面也写过关于这道面试题的文章,<一道关于数组的前端面试题>. 这里再来说说吧! f ...

  8. Django model select的各种用法详解

    <Django model update的各种用法介绍>文章介绍了Django model的各种update操作,这篇文章就是她的姊妹篇,详细介绍Django model select的用 ...

  9. Array 新增加的一些API用法

    es6中新增加了数组的一些用法,基本上是看例子就可以大致明白具体意思. Array.from Array.from方法用于将两类对象转为真正的数组:类似数组的对象和可遍历的对象(包括 ES6 新增的数 ...

随机推荐

  1. linux中的i2c控制器驱动应该做些什么?

    答:完成读写功能即可,不要涉及任何针对从设备的特殊操作,这样就可以避免与从设备的代码产生冗余,linux中的i2c控制器驱动就做的特别棒,做好最简单的读写,然后其它的从设备驱动就是直接调用这些最简单的 ...

  2. 【React自制全家桶】三、React使用ref操作DOM与setState遇到的问题

    在React中同时使用ref操作DOM与setState常常会遇到 比如操作的DOM是setState更新之前的DOM内容,与想要的操作不一致.导致这样的原因是setState函数是异步函数. 就是当 ...

  3. 开源的图片查看库之PhotoView

    PhotoView是一个开源的图片查看库,可以实现图片的浏览,手势放大缩小等操作,以及支持在ViewPager中翻页浏览图片等功能.PhotoView使用简单,还可以对缩放模式进行设置, 其开源地址为 ...

  4. MYSQL 中 MyISAM与InnoDB两者之间区别与选择,详细总结,性能对比

    1.MyISAM:默认表类型,它是基于传统的ISAM类型,ISAM是Indexed Sequential Access Method (有索引的顺序访问方法) 的缩写,它是存储记录和文件的标准方法.不 ...

  5. windows安装python flask虚拟环境

    安装pipenv的虚拟环境主要是为了防止不同python版本之间冲突的问题,虚拟环境安装的包包不会对外部真实环境产生任何作用,只会作用于虚拟环境.这样,一个flask框架应用对应一个pipenv虚拟环 ...

  6. Centos7.4 yum 安装MariaDB

    #系统及版本选择:https://downloads.mariadb.org/mariadb/repositories/#mirror=tunavim /etc/yum.repos.d/MariaDB ...

  7. Web jsp开发学习——终极解决jsp中request和response中文乱码的问题(加个过滤器)

    中文乱码真的很烦人的.而且每次都要写,可麻烦了,而且有时候写了还不一定管用,所以我们可以试试过滤器 1.每个jsp头上当然要写上utf8啦 <%@ page language="jav ...

  8. [转]【JVM】调优笔记2-----JVM在JDK1.8以后的新特性以及VisualVM的安装使用

    [From]https://www.cnblogs.com/sxdcgaq8080/p/7156227.html               隔壁的,加个引用做书签! [JVM]调优笔记2-----J ...

  9. Day05:集合操作——线性表(二) / 查找表 / 文件操作——File(一)

    文件操作:https://www.cnblogs.com/wsnb8/p/11403626.html

  10. 4-2 编辑器之神--vim

    vim vi:Visual editor文本编辑器 文本:ascii,Unicode vim:VIsual editor iMproved 官网:www.vim.org 帮助网站:Vimhelp.or ...