flat 的用法
今天在项目中,看到了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 的用法的更多相关文章
- numpy常用用法总结
numpy 简介 numpy的存在使得python拥有强大的矩阵计算能力,不亚于matlab. 官方文档(https://docs.scipy.org/doc/numpy-dev/user/quick ...
- matlab中patch函数的用法
http://blog.sina.com.cn/s/blog_707b64550100z1nz.html matlab中patch函数的用法——emily (2011-11-18 17:20:33) ...
- iOS 开发-- enum与typeof enum用法
一, 两者的用法 枚举类型定义用关键字enum标识,形式为: enum标识符 { 枚举数据表 }; enum用来定义一系列宏定义常量区别用,相当于一系列的#define ** **,当然它后面的标识符 ...
- flat ui switch 改变状态而不响应事件
Flat UI是一套精美的扁平风格 UI 工具包,基于 Twitter Bootstrap实现.这套界面工具包含许多基本的和复杂的 UI 部件,例如按钮,输入框,组合按钮,复选框,单选按钮,标签,菜单 ...
- set--常见成员函数及基本用法
c++ stl集合set介绍 c++ stl集合(Set)是一种包含已排序对象的关联容器. set/multiset会根据待定的排序准则,自动将元素排序.两者不同在于前者不允许元素重复,而后者允许. ...
- Mybatis基本用法--下
Mybatis基本用法--下 第七部分 mybatis-spring-boot-starter 官网:http://www.mybatis.org/spring-boot-starter/mybati ...
- JavaScript数组方法--flat、forEach、map
今天到flat了,一个第一次知道该方法还是看到一个面试题,别人给了个答案,用到了flat才知道的方法. 前面也写过关于这道面试题的文章,<一道关于数组的前端面试题>. 这里再来说说吧! f ...
- Django model select的各种用法详解
<Django model update的各种用法介绍>文章介绍了Django model的各种update操作,这篇文章就是她的姊妹篇,详细介绍Django model select的用 ...
- Array 新增加的一些API用法
es6中新增加了数组的一些用法,基本上是看例子就可以大致明白具体意思. Array.from Array.from方法用于将两类对象转为真正的数组:类似数组的对象和可遍历的对象(包括 ES6 新增的数 ...
随机推荐
- 使用redis时遇到的问题及解决方法
最近在向redis中写入数据的时候,报了下面的错误: failed opening the rdb file crontab (in server root dir /etc) for saving ...
- PHP 多条件查询(汽车表)
主页面: <h1>汽车查询页面</h1> <br /> <?php include("./DBDA.class.php"); $db = ...
- 阶段3 3.SpringMVC·_06.异常处理及拦截器_5 SpringMVC拦截器之编写controller
先新建包,com.itcast.controller,然后把异常拦截的项目的UserController复制过来. 复制过来稍作修改 创建pages文件件,然后新建success.jsp页面 部署当前 ...
- flask 学习 (五)
之前照着书去做的时候经常出现一些小问题,由于对于flask核心内容还不甚了解,我觉定先从更简单的做起,再根据别的需要对搭建的网站进行扩展. 上网找了一下,发现这位http://zhanghonglun ...
- linux之文件操作和权限
文件查看 cat显示文本 cat [option] ... [file] ... cat -E a.txt # 显示$符号 cat -n a.txt # 对显示的每一行加行号 cat -b a.txt ...
- CentOS的SVN服务器搭建与自动部署全过程
CentOS的SVN服务器搭建与自动部署全过程 http://www.jb51.net/article/106218.htm authz-db = authz 引起的 svn 认证失败 http:// ...
- Anaconda安装pygame
注:安装任何库前,都先更新下pip版本 python -m pip install --upgrade pip 安装pygame : pip install pygame
- ASP.NET(C#) 面试总结面试题大全
一.对于 Web 性能优化,您有哪些了解和经验吗?出现指数:五颗星主要考点:这道题是博主在博客园的新闻里面看到的,回想之前几年的面试经历,发现此题出现概率还是比较高的.因为它的考面灰常广,可以让面试官 ...
- Django视图之FBV与CBV
一. CBV与FBV CBV:Class Based View FBV:Function Based View 我们之前写过的都是基于函数的view,就叫FBV.还可以把view写成基于类的,那就是C ...
- 05-前端之jQuery
一. jQuery是什么? <1> jQuery由美国人John Resig创建,至今已吸引了来自世界各地的众多 javascript高手加入其team. <2> jQuery ...