亚洲国产日韩欧美一区二区三区,精品亚洲国产成人av在线,国产99视频精品免视看7,99国产精品久久久久久久成人热,欧美日韩亚洲国产综合乱

javascript - 數(shù)組去重的問題
女神的閨蜜愛上我
女神的閨蜜愛上我 2017-06-28 09:24:12
0
9
750

假設(shè)現(xiàn)在有一個對象數(shù)組

arr=[
    {
    id:1,
    content:'a'
    },{
    id:2,
    content:'b'
    },{
    id:2,
    content:'c'
    },{
    id:3,
    content:'d'
    },{
    id:3,
    content:'e'
    },{
    id:3,
    content:'f'
    },{
    id:3,
    content:'g'
    },{
    id:4,
    content:'h'
    },
]

我想去掉相同的id 然后保留各個id的最后一項

arr=[
    {
    id:1,
    content:'a'
    },{
    id:2,
    content:'c'
    },{
    id:3,
    content:'g'
    },{
    id:4,
    content:'h'
    },
]

有什么好一點的方法嘛。。

女神的閨蜜愛上我
女神的閨蜜愛上我

全部回復(fù)(9)
漂亮男人

按慣例,ES6 代碼

const result = arr.reduce((r, t) => {
    // 在結(jié)果中查找 index,
    // 如果找到,更新該位置的對象引用
    // 找到則加一個
    var i = r.findIndex(m => m.id === t.id);
    if (i >= 0) {
        r[i] = t;
    } else {
        r.push(t);
    }
    return r;
}, []);

這里有一個問題,findIndex 至少有兩個瀏覽器不支持,所以,如果不支持的話,只好自己寫一個

Array.prototype.findIndex = Array.prototype.findIndex || function(predicate) {
    for (let i = 0; i < this.length; i++) {
        if (predicate(this[i])) {
            return i;
        }
    }
    return -1;
};

其它解法

經(jīng)典解決,用 Map

因為 id 不是字符串,所以使用 ES6 的 Map 類。當數(shù)據(jù)量大的時候,使用查找表,比在列表中線性查找,效率會有顯著的提升。

const result = arr
    .reduce((m, t) => {
        const { map, list } = m;
        var index = map.get(t.id);
        if (index >= 0) {
            list[index] = t;
        } else {
            map.set(t.id, list.length);
            list.push(t);
        }
        return m;
    }, {
        map: new Map(),
        list: []
    })
    .list;

其實也可以用對象來代替 map,至少在這個用例中不會有問題。因為沒用 es6 特性,索性完全使用 es5 語法。代碼結(jié)構(gòu)和邏輯與上面那段一樣

var result = arr
    .reduce(function(m, t) {
        var index = m.map[t.id];
        if (index >= 0) {
            m.list[index] = t;
        } else {
            m.map[t.id] = m.list.length;
            m.list.push(t);
        }
        return m;
    }, {
        map: {},
        list: []
    })
    .list;

怪異解法,利用整數(shù) id

因為是整數(shù) id,所以可以直接按這個 id 放在數(shù)組中。如果遇到相同 id,直接就替換了。如果 id 不連續(xù),最后需要把空元素過濾掉

var result = arr
    .reduce(function(r, t) {
        r[t.id] = t;
        return r;
    }, [])
    .filter(function(t) { return t; });

這種解法還有個問題,不能保持原數(shù)組的元素順序。然后肯定會有人想到,用 Map 的那個解法也可以把代碼精減成類似的代碼,而不需要搞那么復(fù)雜,當然它也同樣可能失去原有順序

const map = arr
    .reduce((m, t) => {
        m.set(t.id, t);
        return m;
    }, new Map());

const result = [...map.values()];

注:以上所有代碼均實際運行通過,運行環(huán)境 Node v8.1.2

某草草
var result = arr.filter(function(val, index) {
    /**
     * 使用arr.slice(index + 1)獲取從當前索引下一個元素到數(shù)組最后一個元素組成的數(shù)組
     * 使用findIndex在當前項的后面選項中查找是否有和當前項id值相同的選項
     */
    var index = arr.slice(index + 1).findIndex(function(item) {
         return item.id === val.id;
    });
    // 如果為-1,則說明后面沒有同名id了,所以這一項可以返回
    return index === -1;
});
console.log(result);

使用箭頭函數(shù)簡化如下:

var result = arr.filter((val, index) => arr.slice(index + 1).findIndex(item => item.id === val.id) === -1);
console.log(result);
僅有的幸福

這里面已經(jīng)有很多答案了,不過沒有提到Array的內(nèi)置函數(shù)reduceRight,實際上題主的需求,要求保留相同id的最后一位,用reduceRight實現(xiàn)起來很方便。

arr.reduceRight((r,v)=>{
    if(!r[0].has(v.id)) r[0].add(v.id) && r[1].unshift(v)
    return r
},[new Set,[]])[1]

reduceRight從你原數(shù)組尾部開始循環(huán)的,我這里的初始值是個數(shù)組,r[0]用來存放id的Set,r[1]存放結(jié)果數(shù)組,如果Set里沒有id,那么就添加這個id到Set,并且把這一項放在結(jié)果數(shù)組的頭部。

最終很容易的實現(xiàn)了題主的需求,而且順序也能保證。

曾經(jīng)蠟筆沒有小新
function uniq(arr) {
    var idArr = [],arr2 = []
    for (var i = 0, len = arr.length; i < len; i++) {
        if (arr[i].id in idArr) {
            arr2.pop()
            arr2.push(arr[i])
        } else {
            idArr.push(arr[i].id)
            arr2.push(arr[i])
        }
    }
    return arr2
}

親測有效

伊謝爾倫

雷雷

滿天的星座

讓 newArr = [],

雷雷
學(xué)習(xí)ing

雷雷

Peter_Zhu

參考一下

Array.from(arr.reduce((map, el) => map.set(el.id, el), new Map()).values())
為情所困

你可以參考我博客寫的,我博客上寫了8中方法。http://alfierichou.top/2017/0...

最新下載
更多>
網(wǎng)站特效
網(wǎng)站源碼
網(wǎng)站素材
前端模板