js 數(shù)組去重小技巧

Intro

今天遇到一個問題，需要對數(shù)據(jù)進行去重，想看一下有沒有什么比較方便的方法，果然有些收獲。

Question

問題描述：

我有一個這樣的數(shù)據(jù)：

[
    {
        "ProjectId": "94147992363ef910",
        "ProjectName": "新梅太古城中糧天悅瀾庭",
        "ProjectAddress": "曲阜路966弄"
    },
    {
        "ProjectId": "c5b6ce1988dd2af7",
        "ProjectName": "新梅共和城",
        "ProjectAddress": "廣中西路99弄"
    },
    {
        "ProjectId": "c5b6ce1988dd2af7",
        "ProjectName": "新梅共和城",
        "ProjectAddress": "廣中西路99弄"
    }
]

要實現(xiàn)根據(jù) ProjectId 去重，應(yīng)該得到下面的結(jié)果：

[
    {
        "ProjectId": "94147992363ef910",
        "ProjectName": "新梅太古城中糧天悅瀾庭",
        "ProjectAddress": "曲阜路966弄"
    },
    {
        "ProjectId": "c5b6ce1988dd2af7",
        "ProjectName": "新梅共和城",
        "ProjectAddress": "廣中西路99弄"
    }
]

先從一個簡單的問題入手，將一個數(shù)組去重 [1, 2, 3, 3, 4]

Solution1

通常，我們一般都是這樣去做的，將要用于去重的數(shù)據(jù)放在一個 集合 中，將去重的數(shù)據(jù)放到一個集合中（最終我們要的數(shù)據(jù)）

示例代碼：

//
var arr = [1, 2, 3, 3, 4];
var result = new Array();
var filterArr = new Array();

    for (var i = 0; i < info.length; i++) {
        for (var k = 0; k < filterArr.length; k++) {
            if (filterArr[i] == arr[i]) {
                continue;
            }
        }
        // 或者使用 indexOf 判斷
        //if (filterArr[i].indexOf(arr[i]) > -1) {
        //    continue;
        //}
        filterArr.push(arr[i]);
        result.push(arr[i]);
    }

// filter
arr = arr.filter(function (value, index, array) { 
    return array.indexOf (value) == index;
});
// es6
arr = arr.filter( (value, index, array) =>  array.indexOf (value) == index);
//
var info = [
    {
        "ProjectId": "94147992363ef910",
        "ProjectName": "新梅太古城中糧天悅瀾庭",
        "ProjectAddress": "曲阜路966弄"
    },
    {
        "ProjectId": "c5b6ce1988dd2af7",
        "ProjectName": "新梅共和城",
        "ProjectAddress": "廣中西路99弄"
    }
];

function filter() {
    var filterArr = [];
    var result = [];
    for (var i = 0; i < info.length; i++) {
        for (var k = 0; k < filterArr.length; k++) {
            if (filterArr[i] == info[i].ProjectId) {
                continue;
            }
        }
        filterArr.push(info[i].ProjectId);
        result.push(info[i]);
    }
    return result;
}

Solution2

ES6 里提供了 Set 的新語法，Set里不會有重復(fù)的元素，簡單數(shù)組去重用它來實現(xiàn)最簡單不過了，舉個栗子：

var arr = [1, 2, 3, 3, 4];
console.log(arr); // [1, 2, 3, 3, 4]

arr = Array.from(new Set(arr));
console.log(arr);// [1, 2, 3, 4]

//
info = info.filter((s => a => !s.has(a.ProjectId) && s.add(a.ProjectId))(new Set));

End

是不是 es6 更方便、更簡潔，還沒用es6的童鞋強烈建議使用，
上的一坨代碼用 es6 只需要一行，只需要一行，只需要一行

info = info.filter((s => a => !s.has(a.ProjectId) && s.add(a.ProjectId))(new Set));

希望你能有所收獲