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]