js陣列操作——物件陣列根據某個相同的欄位分組

fx67ll發表於2022-11-23
JS陣列物件

先說點廢話

最近在實際業務中，需要編寫一個方法根據陣列中每一個物件的一個相同欄位，來將該欄位值相等的物件重新編入一個陣列，返回一個巢狀的陣列物件，特地來做個總結。
當然需要注意的是，在開發過程這種陣列的處理函式，應當被編寫到專案的公共工具函式庫中全域性呼叫

目標物件陣列

let dataArr = [{
        id: 1,
        anyId: 1023,
        anyVal: 'fx67ll',
        value: 'value-1'
    },
    {
        id: 2,
        anyId: 1024,
        anyVal: 'fx67ll',
        value: 'value-2'
    },
    {
        id: 3,
        anyId: 10086,
        anyVal: 'll',
        value: 'value-3'
    },
    {
        id: 1,
        anyId: 10086,
        anyVal: 'fx67',
        value: 'value-4'
    },
    {
        id: 2,
        anyId: 1024,
        anyVal: 'll',
        value: 'value-5'
    },
];

準換後的物件陣列

[{
    "key": 1,
    "data": [{
        "id": 1,
        "anyId": 1023,
        "anyVal": "fx67ll",
        "value": "value-1"
    }, {
        "id": 1,
        "anyId": 10086,
        "anyVal": "fx67",
        "value": "value-4"
    }]
}, {
    "key": 2,
    "data": [{
        "id": 2,
        "anyId": 1024,
        "anyVal": "fx67ll",
        "value": "value-2"
    }, {
        "id": 2,
        "anyId": 1024,
        "anyVal": "ll",
        "value": "value-5"
    }]
}, {
    "key": 3,
    "data": [{
        "id": 3,
        "anyId": 10086,
        "anyVal": "ll",
        "value": "value-3"
    }]
}]

編寫函式的思路

  1. 首先肯定是一個迴圈，因為需要迴圈來比對陣列中每個物件相同的欄位的值
  2. 其次，根據比對的欄位值判斷是否存在重複，如果重複存在新的陣列中，不重複則新增到之前定義過的陣列中，完成分組
  3. 最後，返回處理完成的物件陣列

方法一

// arr 目標物件陣列
// filed 分組欄位
function classifyArrayGroupBySameFieldAlpha(arr, filed) {
    let temObj = {}
    for (let i = 0; i < arr.length; i++) {
        let item = arr[i]
        if (!temObj[item[filed]]) {
            temObj[item[filed]] = [item]
        } else {
            temObj[item[filed]].push(item)
        }
    }
    let resArr = []
    Object.keys(temObj).forEach(key => {
        resArr.push({
            key: key,
            data: temObj[key],
        })
    })
    return resArr
}

方法二

// arr 目標物件陣列
// filed 分組欄位
function classifyArrayGroupBySameFieldVBeta(arr, filed) {
    let temObj = {};
    let resArr = [];
    for (let i = 0; i < arr.length; i++) {
        if (!temObj[arr[i][filed]]) {
            resArr.push({
                key: arr[i][filed],
                data: [arr[i]]
            });
            temObj[arr[i][filed]] = arr[i]
        } else {
            for (let j = 0; j < resArr.length; j++) {
                if (arr[i][filed] === resArr[j].key) {
                    resArr[j].data.push(arr[i]);
                    break
                }
            }
        }
    }
    return resArr
}

擴充————ES6的新方法Object.keys

  1. Object.keys()方法用於返回一個由一個給定物件的自身可列舉屬性組成的陣列，陣列中屬性名的排列順序和正常迴圈遍歷該物件時返回的順序一致

  2. 需要注意的傳不同型別的變數，返回的陣列值也不同

    • 如果傳入物件，則返回屬性名陣列
    • 如果傳入字串，則返回索引
    • 如果陣列，則返回索引
    • 如果建構函式，則返回空陣列或者屬性名

我是 fx67ll.com，如果您發現本文有什麼錯誤，歡迎在評論區討論指正，感謝您的閱讀！
如果您喜歡這篇文章，歡迎訪問我的 本文github倉庫地址，為我點一顆Star，Thanks~ :)
轉發請註明參考文章地址，非常感謝！！！

相關文章