如何使用map（），reduce（）和filter（）簡化javascript嵌套數組？

Question

首先，我是Javascript，ES6等的新手，我來自Java背景。 我有一個復雜的javascript數組結構（下面給出的例子），我試圖將這個數組轉換成一個映射（類似於Java的方式，鍵值對類的東西），key是權限名稱（例如KEY-1，KEY） -2，KEY-3，KEY-4，KEY-5關於下面的javascript數組示例）而value是實際權限的逗號分隔值。 我可以通過循環b通過嵌套數組來實現它，但循環是我試圖避免在這里，並希望使用map（）/ reduce（）/ filter（）

以下是地圖應如何包含數據的示例。 由於KEY-2存在於兩個數組中，因此它們將被重寫為一個（完全沒問題）

KEY-1 = ["Roles.Create","Roles.Edit"]
KEY-2 = ["API-Admin.Create","API-Admin.Edit","API-Admin.Read"]
KEY-3 = ["Roles.Create","Roles.Edit"]
KEY-4 = ["Users.Read"]      
KEY-5 = ["Roles.Create","Roles.Edit"]

Javascript數組

const teamArr = [
  {
    "name":"Team1",
    "accountId":"Billing",
    "teamId":"12345",
    "permissions": {
        "KEY-1": [
            "Roles.Create",
            "Roles.Edit"
        ],
        "KEY-2": [
            "API-Admin.Create",
            "API-Admin.Edit",
            "API-Admin.Read"
        ],
        "KEY-3": [
          "Roles.Create",
          "Roles.Edit"
        ]
     }
   },
   {
     "name":"Team2",
     "accountId":"Sales",
     "teamId":"6789",
     "permissions": {
         "KEY-4": [
             "Users.Read"
         ],
         "KEY-2": [
            "API-Admin.Create",
            "API-Admin.Edit",
            "API-Admin.Read"
        ],
         "KEY-5": [
           "Roles.Create",
           "Roles.Edit"
         ]
      }
   }
]

KEY-1，KEY-2，KEY-3，KEY-4，KEY-5等都是動態生成的，所以我不能將這些鍵名硬編碼到我的代碼中（如KEY-1，KEY-2等）

我關注這篇文章https://www.freecodecamp.org/news/15-useful-javascript-examples-of-map-reduce-and-filter-74cbbb5e0a1f/以下是我試過的但是我想，我正在努力在復雜的javascript數組上正確使用sort（）/ reduce（）。 我更喜歡簡單的Javascript / ES6解決方案（沒有JQuery請）。

const sorted = test.sort((a, b) => a.permissions - b.permissions);
// Using reduce:
dict = sorted.reduce(
    (dict, el, index) => (dict[el.permissions] = sorted.length - index, dict),
    {}
);

console.log(dict)

這里的任何幫助將非常感激。 謝謝

Answer 1

你可以使用flatMap和reduce的組合來做到這一點（盡管所有瀏覽器都不支持flatMap ）：

 const teamArr = [{ "name": "Team1", "accountId": "Billing", "teamId": "12345", "permissions": { "KEY-1": [ "Roles.Create", "Roles.Edit" ], "KEY-2": [ "API-Admin.Create", "API-Admin.Edit", "API-Admin.Read" ], "KEY-3": [ "Roles.Create", "Roles.Edit" ] } }, { "name": "Team2", "accountId": "Sales", "teamId": "6789", "permissions": { "KEY-4": [ "Users.Read" ], "KEY-2": [ "API-Admin.Create", "API-Admin.Edit", "API-Admin.Read" ], "KEY-5": [ "Roles.Create", "Roles.Edit" ] } } ] const result = teamArr .flatMap(t => Object.entries(t.permissions)) .reduce((acc, [key, permissions]) => { acc[key] = acc[key] || []; acc[key].push(...permissions.filter(p => !acc[key].includes(p))); return acc; }, {}); console.log(result); 

如果密鑰的權限數組可能非常大，您還可以考慮在累加器中使用每個密鑰旁邊的Set 。

Answer 2

由於您不需要擔心其他鍵/值，因此首先需要創建一個包含所有permissions對象的數組。 然后從該數組中提取屬性，使用Sets保持數組唯一：

 const teamArr = [{"name":"Team1","accountId":"Billing","teamId":"12345","permissions":{"KEY-1":["Roles.Create","Roles.Edit"],"KEY-2":["API-Admin.Create","API-Admin.Edit","API-Admin.Read"],"KEY-3":["Roles.Create","Roles.Edit"]}},{"name":"Team2","accountId":"Sales","teamId":"6789","permissions":{"KEY-4":["Users.Read"],"KEY-2":["API-Admin.Create","API-Admin.Edit","API-Admin.Read"],"KEY-5":["Roles.Create","Roles.Edit"]}}]; const res = teamArr.flatMap(({ permissions }) => Object.entries(permissions)).reduce((a, [k, v]) => ((a[k] = [...new Set(((a[k] = a[k] || []).push(...v), a[k]))], a)), {}); console.log(res); 

 .as-console-wrapper { max-height: 100% !important; top: auto; } 

更詳細的版本：

 const teamArr = [{"name":"Team1","accountId":"Billing","teamId":"12345","permissions":{"KEY-1":["Roles.Create","Roles.Edit"],"KEY-2":["API-Admin.Create","API-Admin.Edit","API-Admin.Read"],"KEY-3":["Roles.Create","Roles.Edit"]}},{"name":"Team2","accountId":"Sales","teamId":"6789","permissions":{"KEY-4":["Users.Read"],"KEY-2":["API-Admin.Create","API-Admin.Edit","API-Admin.Read"],"KEY-5":["Roles.Create","Roles.Edit"]}}]; const permissions = teamArr.map(({ permissions }) => permissions); const res = permissions.flatMap(Object.entries).reduce((a, [k, v]) => { a[k] = a[k] || []; a[k].push(...v); a[k] = [...new Set(a[k])]; return a; }, {}); console.log(res); 

 .as-console-wrapper { max-height: 100% !important; top: auto; } 

Answer 3

const teamArr = [
  {
    "name":"Team1",
    "accountId":"Billing",
    "teamId":"12345",
    "permissions": {
        "KEY-1": [
            "Roles.Create",
            "Roles.Edit"
        ],
        "KEY-2": [
            "API-Admin.Create",
            "API-Admin.Edit",
            "API-Admin.Read"
        ],
        "KEY-3": [
          "Roles.Create",
          "Roles.Edit"
        ]
     }
   },
   {
     "name":"Team2",
     "accountId":"Sales",
     "teamId":"6789",
     "permissions": {
         "KEY-4": [
             "Users.Read"
         ],
         "KEY-2": [
            "API-Admin.Create",
            "API-Admin.Edit",
            "API-Admin.Read"
        ],
         "KEY-5": [
           "Roles.Create",
           "Roles.Edit"
         ]
      }
   }
];



function extractPermissions(obj) {
    const perms = {};
    obj.forEach(entry => {
        if (!entry['permissions']) {
            return;
        }
        Object.keys(entry.permissions).forEach(key => {
            if (!perms[key]) {
                perms[key] = [];
            }
            entry.permissions[key].forEach(value => {
                if (!perms[key].some(val => val === value)) {
                    perms[key].push(value);
                }
            });
        });
    });
    return perms;
}
console.log(JSON.stringify(extractPermissions(teamArr), null, 2));