今天在项目中,看到了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. ORA-00600: internal error code, arguments: [kqludp2], [0x08D226918], [0], [], [], [], [], [], [], [], [], []

    问题描述: 1)report builder + xml publisher 做的报表,报表提交后报黄色警告,输出文件是XML格式,日志提示如下: +--------- 1) POST-PROCESS ...

  2. LC 652. Find Duplicate Subtrees

    Given a binary tree, return all duplicate subtrees. For each kind of duplicate subtrees, you only ne ...

  3. GitHub:Youtube

    ylbtech-GitHub:Youtube 1.返回顶部   2.返回顶部   3.返回顶部   4.返回顶部   5.返回顶部 1. https://github.com/youtube 2.   ...

  4. 美团DSP

    https://blog.csdn.net/LW_GHY/article/details/71455535 ADX出价调整, 预估ctr抽样后调整还原 2. 动态调整报价在DSP的报价环节,点击率预估 ...

  5. javascript之DOM(Document Object Model) 文档对象模型

    <html> <head> <meta http-equiv="Content-Type" content="text/html; char ...

  6. 六十八:flask上下文之app上下文和request上下文

    app上下文: 先看现象 current_app源码 手动入栈 app_context()源码 with语句入栈 request上下文 不在app上下文中 即使手动入栈也会报错,不在请求上下文中 ur ...

  7. linux 基础 配置静态IP

    1.查看本机windows默认网关.DNS 2.配置linux 3.查询网络配置 4.xshell 登录 一 查看本机windows默认网关.DNS 二 配置linux(注意:默认网关.dns,必须跟 ...

  8. Spring JdbcTemplate实例

    1.常用方法 * update():执行DML语句.增.删.改语句* queryForMap():查询结果将结果集封装为map集合,将列名作为key,将值作为value 将这条记录封装为一个map集合 ...

  9. BaseDao+万能方法 , HibernateDaoSupport

    package dao; import java.sql.Connection; import java.sql.DriverManager; import java.sql.PreparedStat ...

  10. IE条件注释语句

    项目 范例 说明 ! [if !IE] The NOT operator. This is placed immediately in front of the _feature_, _operato ...