今天在项目中,看到了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. Mysql的exist与in的区别

    如果查询的两个表大小相当,那么用in和exists差别不大. 如果两个表中一个较小,一个是大表,则子查询表大的用exists,子查询表小的用in:    例如:表A(小表),表B(大表)   1: s ...

  2. Linux 通道

    简单地说,一个通道接受一个工具软件的输出,然后把那个输出输入到其它工具软件.使用UNIX/Linux的词汇,这个通道接受了一个过程的标准输出,并把这个标准的输出作为另一个过程的标准输入.如果你没有重新 ...

  3. Dom4j工具j解析XML原理和示例代码

    import java.io.File; import java.util.ArrayList; import java.util.Iterator; import java.util.List; i ...

  4. layui时间控件选择时间范围

    layui.use([ 'laydate'], function(){ var $ = layui.$; var laydate = layui.laydate; var max = ${nowYea ...

  5. linux 基础 ls cd 目录含义

  6. 抓包工具chlers的使用

    1,下载chlers破解版:https://zhubangbang.com/charles-crack-version-free-download-and-install-tutorial.html ...

  7. 《Javascript 语言精粹》 中 用到的一些代码 (1)

    var isNumber = function isNumber(value){ return typeof value === 'number' && isFinite(value) ...

  8. 网络实验 02-交换机的Telnet远程登录设置

    交换机的Telnet远程登录设置 一.实验目标 掌握采用telnet方式配置交换机的方法 二.技术原理 1. 配置交换机的管理IP地址(计算机的IP地址与交换机管理IP地址在同一网段) 2. 为tel ...

  9. 安卓新发布机制----app bundle

    Android App Bundle是一种改进的应用程序打包方式,能大幅度减少应用体积 unity可以直接导出appbundle,只需要在导出的时候勾选 但是通常项目有sdk离不开java端,我这里是 ...

  10. Git_mergetool_tutorial(转载)

    原文链接:https://gist.github.com/karenyyng/f19ff75c60f18b4b8149#table-of-content Table Of Content Skip t ...