今天在项目中,看到了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. laravel中跟据某个特定顺序去排序查出来的数据:FIND_IN_SET

    //返回有顺序的客户id $customer_ids = $customer->bespeakTime($uid); $res = Customer::with('customer_indust ...

  2. Java工具类-HttpUtil

    package com.sh.util; import java.io.IOException; import java.io.UnsupportedEncodingException; import ...

  3. 开始JavaScript的学习了

    为何学习? 1. 所有主流浏览器都支持JavaScript. 2. 目前,全世界大部分网页都使用JavaScript. 3. 它可以让网页呈现各种动态效果. 4. 做为一个Web开发师,如果你想提供漂 ...

  4. VSCODE开发VUE.JS前端插件

    VUE前端插件.转载自:https://www.cnblogs.com/karthuslorin/p/8577224.html vscode是微软开发的的一款代码编辑器,就如官网上说的一样,vscod ...

  5. spring boot系列(五)spring boot 配置spring data jpa (查询方法)

    接着上面spring boot系列(四)spring boot 配置spring data jpa 保存修改方法继续做查询的测试: 1 创建UserInfo实体类,代码和https://www.cnb ...

  6. [笔记] 使用frp从外网访问内网

    之前尝试过otunnel,也记录过使用方法,见[笔记] 使用otunnel从外网访问内网,但是用了几天发现还是不够稳定. 然后尝试frp,发现性能稳定,够用,将过程及配置分享在这里吧. 需求 内网机器 ...

  7. vs code 设置 保存自动格式化vue代码

    配置 ESLint (需安装 Prettier - Code formatter 插件) command + shift + p  打开用户设置 // vscode默认启用了根据文件类型自动设置tab ...

  8. golang struct结构体初始化的几种方式

    type User struct { Id int `json:"id" orm:"auto"` // 用户名 Username string `json:&q ...

  9. 转-Uptime与数据中心等级认证

    1 数据中心等级认证 随着数据中心的蓬勃发展,越来越多的标准被制定出具.其中,Uptime Tier认证在业内是认同度最高的标准.以前,Uptime在中国的宣传很少,很多人对Uptime及其认证体系不 ...

  10. Python程序猿面试杂谈

    不同的互联网公司面试环节不尽相同,总体而言,一般有技术面(1-3轮).leader面(组长/总监/CTO/CEO...).hr面,面试轮数视公司规模和公司实际具体情况而定.下文将就面试的不同环节阐述下 ...