ES6 三层for循环的链式写法
假设有一个很复杂的数据,并且数据嵌套层数很多。如何避免用三层for循环呢?
有以下梨子,我们需要找到val值为12的,这个对象?
'use strict'
let groups = [{
content: [{
permissions: [{
val: 1
}, {
val: 2
}]
}, {
permissions: [{
val: 3
}, {
val: 4
}]
}]
}, {
content: [{
permissions: [{
val: 5
}, {
val: 6
}]
}, {
permissions: [{
val: 7
}, {
val: 8
}]
}]
}, {
content: [{
permissions: [{
val: 9
}, {
val: 10
}]
}, {
permissions: [{
val: 11
}, {
val: 12
}]
}]
}] console.log(groups);
let filterA = groups
.map(a => a.content)
.flat() //数组扁平化
.map(b => b.permissions)
.flat()
.filter(c => c.val === 12) console.log(filterA);
由于flat语法,需要在chrome69以上版本来进行调试哦
let filterA = groups
.map(a => a.content)
.flat() //数组扁平化
.map(b => b.permissions)
.flat()
.filter(c => c.val === 12)
代码的逻辑比较简单,符合函数式编程的思想。
map//返回一堆新数组,不改变源数组,我们就可以获取到下一层,但是数组的层数依旧还是3层,
所以需要flat,来消除一层数组,也就数组扁平化。
参考阮老师的解释
flat()默认只会“拉平”一层,如果想要“拉平”多层的嵌套数组,可以将flat()方法的参数写成一个整数,表示想要拉平的层数,默认为1。
[1, 2, [3, [4, 5]]].flat()
// [1, 2, 3, [4, 5]] flat()的参数为2,表示要“拉平”两层的嵌套数组
[1, 2, [3, [4, 5]]].flat(2)
// [1, 2, 3, 4, 5] 如果不管有多少层嵌套,都要转成一维数组,可以用Infinity关键字作为参数。
[1, [2, [3]]].flat(Infinity)
// [1, 2, 3]
ES6 三层for循环的链式写法的更多相关文章
- JQuery事件的链式写法
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...
- jquery事件链式写法
<!DOCTYPE html><html lang="en" xmlns="http://www.w3.org/1999/xhtml"> ...
- Delphi Sysem.JSON 链式写法(转全能中间件)
链式写法有很多优点:连贯.语意集中.简洁.一气呵成.可读性强.比如要把 3.1415926 中的 59 提取为一个整数:Pi.ToString().Substring(5,2).ToInteger() ...
- ajax操作的链式写法
ajax操作的传统写法: $.ajax({ url: url, success: function(){ doWhenSuccess(); }, error: function(){ doWhenEr ...
- Jquery | 基础 | 事件的链式写法
$(".title").click(function () { $(this).addClass("curcol").next(".content&q ...
- Java 链式写法
Java链式写法,子类继承父类的属性,也可以返回子类的对象,只是需要重写基类的Set方法 public class MyLS { public static void main(String[] ar ...
- Delphi Sysem.JSON 链式写法
链式写法有很多优点:连贯.语意集中.简洁.一气呵成.可读性强.比如要把 3.1415926 中的 59 提取为一个整数:Pi.ToString().Substring(5,2).ToInteger() ...
- Java链式写法
原创:转载需注明原创地址 https://www.cnblogs.com/fanerwei222/p/11613067.html Java 链式写法:详细看代码 package chain; /** ...
- javascript 链式写法
熟悉Jquery的同学都知道,它对dom的操作基本都链式调用的写法,这种给人感觉就是很简洁,易懂,而且最大的好处就是避免多次重复使用一个对象变量. 链式的实现方式:链式操作是在对象的方法中通过最后返回 ...
随机推荐
- Text Relatives II
[Text Relatives II] When your app determines that the user has requested the edit menu—which could b ...
- RocketMQ 服务器3模式
22 a b-s---------------------------sh mqbroker -c $ROCKETMQ_HOME/conf/2m-2s-async/broker-a.propertie ...
- windows下Apache的虚拟主机配置
1.Apache虚拟主机: 在Apache上有关于虚拟主机的具体说明,具体可以参考Apache手册,这里简单的说一下虚拟主机主要分为两种: 1.基于主机名的虚拟主机(一个IP地址,多个网站) 2.基于 ...
- int *a[] 与(int *)a【5】的区别
*a[5] 是指针数组 可以指向5个值 (*a)[5] 是一个指针,但这个指针只能指向包含5个元素的一维数组 a是一个数组,每个元素都是个指针. b是一个指针,指向一个数组 1.int *a[5] ...
- 个人作业代码GitHub提交步骤
代码提交地址: https://github.com/eudaem/homework1 步骤: 1)用个人账号登陆GitHub,并访问代码提交地址页面,点击页面右上角的“Fork”按钮,拷贝homew ...
- 软件项目第一个Sprint评分
第一组 跑男 跑男组他们设计的是极速蜗牛小游戏,他们的界面背景图片做的挺漂亮,现在为止也实现了大部分功能, 但是我没有太听懂他们的游戏规则. 因为蜗牛出发后,每次碰到屏幕边缘后都会有确定的反弹结果,也 ...
- CAS实战の自定义登录
由于每个版本的改动较大,所以先把版本号列出: 服务端版本:cas server 4.0.0 客户端版本:cas client 3.3.3 一.自定义登录页面 页面路径:/WebContent/WEB- ...
- jmeter测试mysql数据库之JDBC请求
所有jmeter基本组件功能本文不做介绍.jmeter要链接mysql数据库,首先得下载mysql jdbc驱动包(注:驱动包的版本一定要与你数据库的版本匹配,驱动版本低于mysql版本有可能会导致连 ...
- 10-08常用的TIME和DATE函数以及各个函数对应的头文件
系统时间和日期函数: #include <time.h> char *asctime(const struct tm *tm);//将tm中存放的信息转换为标准格式 ...
- 什么是ODBC和JDBC?
jdbc是使用通过JAVA的数据库驱动直接和数据库相连,而jdbc-odbc连接的是ODBC的数据源,真正与数据库建立连接的是ODBC! 建议使用JDBC直接连接,同时最好使用连接池! JDBC 是 ...