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]