当前位置 : 首页 » 互动问答 » 正文

Remove duplicates from an array of objects in JavaScript

分类 : 互动问答 | 发布时间 : 2010-02-08 08:40:33 | 评论 : 30 | 浏览 : 244753 | 喜欢 : 242

I have an object that contains an array of objects.

things = new Object();

things.thing = new Array();

things.thing.push({place:"here",name:"stuff"});
things.thing.push({place:"there",name:"morestuff"});
things.thing.push({place:"there",name:"morestuff"});

I'm wondering what is the best method to remove duplicate objects from an array. So for example, things.thing would become...

{place:"here",name:"stuff"},
{place:"there",name:"morestuff"}

回答(30)

  • 1楼
  • How about with some es6 magic?

    things.thing = things.thing.filter((thing, index, self) =>
      index === self.findIndex((t) => (
        t.place === thing.place && t.name === thing.name
      ))
    )
    

    Reference URL

    A more generic solution would be:

    const uniqueArray = things.thing.filter((thing,index) => {
      return index === things.thing.findIndex(obj => {
        return JSON.stringify(obj) === JSON.stringify(thing);
      });
    });
    

    Stackblitz Example

  • 2楼
  • Let's see ... a primitive one would be:

    var obj = {};
    
    for ( var i=0, len=things.thing.length; i < len; i++ )
        obj[things.thing[i]['place']] = things.thing[i];
    
    things.thing = new Array();
    for ( var key in obj )
        things.thing.push(obj[key]);
    

    Ok, I think that should do the trick. Check it out, Travis.

    EDIT
    Edited the code to correctly reference the place (former id) property .

  • 3楼
  • If you can use Javascript libraries such as underscore or lodash, I recommend having a look at _.uniq function in their libraries. From lodash:

    _.uniq(array, [isSorted=false], [callback=_.identity], [thisArg])
    

    Basically, you pass in the array that in here is an object literal and you pass in the attribute that you want to remove duplicates with in the original data array, like this:

    var data = [{'name': 'Amir', 'surname': 'Rahnama'}, {'name': 'Amir', 'surname': 'Stevens'}];
    var non_duplidated_data = _.uniq(data, 'name'); 
    

    UPDATE: Lodash now has introduced a .uniqBy as well.

  • 4楼
  • I had this exact same requirement, to remove duplicate objects in a array, based on duplicates on a single field. I found the code here: Javascript: Remove Duplicates from Array of Objects

    So in my example, I'm removing any object from the array that has a duplicate licenseNum string value.

    var arrayWithDuplicates = [
        {"type":"LICENSE", "licenseNum": "12345", state:"NV"},
        {"type":"LICENSE", "licenseNum": "A7846", state:"CA"},
        {"type":"LICENSE", "licenseNum": "12345", state:"OR"},
        {"type":"LICENSE", "licenseNum": "10849", state:"CA"},
        {"type":"LICENSE", "licenseNum": "B7037", state:"WA"},
        {"type":"LICENSE", "licenseNum": "12345", state:"NM"}
    ];
    
    function removeDuplicates(originalArray, prop) {
         var newArray = [];
         var lookupObject  = {};
    
         for(var i in originalArray) {
            lookupObject[originalArray[i][prop]] = originalArray[i];
         }
    
         for(i in lookupObject) {
             newArray.push(lookupObject[i]);
         }
          return newArray;
     }
    
    var uniqueArray = removeDuplicates(arrayWithDuplicates, "licenseNum");
    console.log("uniqueArray is: " + JSON.stringify(uniqueArray));
    

    The results:

    uniqueArray is:

    [{"type":"LICENSE","licenseNum":"10849","state":"CA"},
    {"type":"LICENSE","licenseNum":"12345","state":"NM"},
    {"type":"LICENSE","licenseNum":"A7846","state":"CA"},
    {"type":"LICENSE","licenseNum":"B7037","state":"WA"}]
    
  • 5楼
  • If you can wait to eliminate the duplicates until after all the additions, the typical approach is to first sort the array and then eliminate duplicates. The sorting avoids the N * N approach of scanning the array for each element as you walk through them.

    The "eliminate duplicates" function is usually called unique or uniq. Some existing implementations may combine the two steps, e.g., prototype's uniq

    This post has few ideas to try (and some to avoid :-) ) if your library doesn't already have one! Personally I find this one the most straight forward:

        function unique(a){
            a.sort();
            for(var i = 1; i < a.length; ){
                if(a[i-1] == a[i]){
                    a.splice(i, 1);
                } else {
                    i++;
                }
            }
            return a;
        }  
    
        // Provide your own comparison
        function unique(a, compareFunc){
            a.sort( compareFunc );
            for(var i = 1; i < a.length; ){
                if( compareFunc(a[i-1], a[i]) === 0){
                    a.splice(i, 1);
                } else {
                    i++;
                }
            }
            return a;
        }
    
  • 6楼
  • One liner using Set

    var things = new Object();
    
    things.thing = new Array();
    
    things.thing.push({place:"here",name:"stuff"});
    things.thing.push({place:"there",name:"morestuff"});
    things.thing.push({place:"there",name:"morestuff"});
    
    // assign things.thing to myData for brevity
    var myData = things.thing;
    
    things.thing = Array.from(new Set(myData.map(JSON.stringify))).map(JSON.parse);
    
    console.log(things.thing)

    Explanation:

    1. new Set(myData.map(JSON.stringify)) creates a Set object using the stringified myData elements.
    2. Set object will ensure that every element is unique.
    3. Then I create an array based on the elements of the created set using Array.from.
    4. Finally, I use JSON.parse to convert stringified element back to an object.
  • 7楼
  • Here's another option to do it using Array iterating methods if you need comparison only by one field of an object:

        function uniq(a, param){
            return a.filter(function(item, pos, array){
                return array.map(function(mapItem){ return mapItem[param]; }).indexOf(item[param]) === pos;
            })
        }
    
        uniq(things.thing, 'place');
    
  • 8楼
  • UPDATED

    I've now read the question properly. This is a generic way of doing this: you pass in a function that tests whether two elements of an array are considered equal. In this case, it compares the values of the name and place properties of the two objects being compared.

    function arrayContains(arr, val, equals) {
        var i = arr.length;
        while (i--) {
            if ( equals(arr[i], val) ) {
                return true;
            }
        }
        return false;
    }
    
    function removeDuplicates(arr, equals) {
        var originalArr = arr.slice(0);
        var i, len, j, val;
        arr.length = 0;
    
        for (i = 0, len = originalArr.length; i < len; ++i) {
            val = originalArr[i];
            if (!arrayContains(arr, val, equals)) {
                arr.push(val);
            }
        }
    }
    
    function thingsEqual(thing1, thing2) {
        return thing1.place === thing2.place
            && thing1.name === thing2.name;
    }
    
    removeDuplicates(things.thing, thingsEqual);
    
  • 9楼
  • one liner is here

    let arr = [
      {id:1,name:"sravan ganji"},
      {id:2,name:"anu"},
      {id:4,name:"mammu"},
      {id:3,name:"sanju"},
      {id:3,name:"ram"},
    ];
    
    console.log(Object.values(arr.reduce((acc,cur)=>Object.assign(acc,{[cur.id]:cur}),{})))

  • 10楼
  • To add one more to the list. Using ES6 and Array.reduce with Array.find.
    In this example filtering objects based on a guid property.

    let filtered = array.reduce((accumulator, current) => {
      if (! accumulator.find(({guid}) => guid === current.guid)) {
        accumulator.push(current);
      }
      return accumulator;
    }, []);
    

    Extending this one to allow selection of a property and compress it into a one liner:

    const uniqify = (array, key) => array.reduce((prev, curr) => prev.find(a => a[key] === curr[key]) ? prev : prev.push(curr) && prev, []);
    

    To use it pass an array of objects and the name of the key you wish to de-dupe on as a string value:

    const result = uniqify(myArrayOfObjects, 'guid')
    
  • 11楼
  • You could also use a Map:

    const dedupThings = Array.from(things.thing.reduce((m, t) => m.set(t.place, t), new Map()).values());
    

    Full sample:

    const things = new Object();
    
    things.thing = new Array();
    
    things.thing.push({place:"here",name:"stuff"});
    things.thing.push({place:"there",name:"morestuff"});
    things.thing.push({place:"there",name:"morestuff"});
    
    const dedupThings = Array.from(things.thing.reduce((m, t) => m.set(t.place, t), new Map()).values());
    
    console.log(JSON.stringify(dedupThings, null, 4));
    

    Result:

    [
        {
            "place": "here",
            "name": "stuff"
        },
        {
            "place": "there",
            "name": "morestuff"
        }
    ]
    
  • 12楼
  • Dang, kids, let's crush this thing down, why don't we?

    let uniqIds = {}, source = [{id:'a'},{id:'b'},{id:'c'},{id:'b'},{id:'a'},{id:'d'}];
    let filtered = source.filter(obj => !uniqIds[obj.id] && (uniqIds[obj.id] = true));
    console.log(filtered);
    // EXPECTED: [{id:'a'},{id:'b'},{id:'c'},{id:'d'}];

  • 13楼
  • The simplest way is use filter:

    var uniq = {}
    var arr  = [{"id":"1"},{"id":"1"},{"id":"2"}]
    var arrFiltered = arr.filter(obj => !uniq[obj.id] && (uniq[obj.id] = true));
    console.log('arrFiltered', arrFiltered)

  • 14楼
  • Another option would be to create a custom indexOf function, which compares the values of your chosen property for each object and wrap this in a reduce function.

    var uniq = redundant_array.reduce(function(a,b){
          function indexOfProperty (a, b){
              for (var i=0;i<a.length;i++){
                  if(a[i].property == b.property){
                       return i;
                   }
              }
             return -1;
          }
    
          if (indexOfProperty(a,b) < 0 ) a.push(b);
            return a;
        },[]);
    
  • 15楼
  • Considering lodash.uniqWith

    var objects = [{ 'x': 1, 'y': 2 }, { 'x': 2, 'y': 1 }, { 'x': 1, 'y': 2 }];
    
    _.uniqWith(objects, _.isEqual);
    // => [{ 'x': 1, 'y': 2 }, { 'x': 2, 'y': 1 }]
    
  • 16楼
  • let data = [
      {
        'name': 'Amir',
        'surname': 'Rahnama'
      }, 
      {
        'name': 'Amir',
        'surname': 'Stevens'
      }
    ];
    let non_duplicated_data = _.uniqBy(data, 'name');
    
  • 17楼
  • Here is a solution for es6 where you only want to keep the last item. This solution is functional and Airbnb style compliant.

    const things = {
      thing: [
        { place: 'here', name: 'stuff' },
        { place: 'there', name: 'morestuff1' },
        { place: 'there', name: 'morestuff2' }, 
      ],
    };
    
    const removeDuplicates = (array, key) => {
      return array.reduce((arr, item) => {
        const removed = arr.filter(i => i[key] !== item[key]);
        return [...removed, item];
      }, []);
    };
    
    console.log(removeDuplicates(things.thing, 'place'));
    // > [{ place: 'here', name: 'stuff' }, { place: 'there', name: 'morestuff2' }]
    
  • 18楼
  • removeDuplicates() takes in an array of objects and returns a new array without any duplicate objects (based on the id property).

    const allTests = [
      {name: 'Test1', id: '1'}, 
      {name: 'Test3', id: '3'},
      {name: 'Test2', id: '2'},
      {name: 'Test2', id: '2'},
      {name: 'Test3', id: '3'}
    ];
    
    function removeDuplicates(array) {
      let uniq = {};
      return array.filter(obj => !uniq[obj.id] && (uniq[obj.id] = true))
    }
    
    removeDuplicates(allTests);
    

    Expected outcome:

    [
      {name: 'Test1', id: '1'}, 
      {name: 'Test3', id: '3'},
      {name: 'Test2', id: '2'}
    ];
    

    First, we set value of variable uniq to an empty object.

    Next, we filter through the array of objects. Filter creates a new array with all elements that pass the test implemented by the provided function.

    return array.filter(obj => !uniq[obj.id] && (uniq[obj.id] = true));
    

    Above, we use the short-circuiting functionality of &&. If the left side of the && evaluates to true, then it returns the value on the right of the &&. If the left side is false, it returns what is on the left side of the &&.

    For each object(obj) we check uniq for a property named the value of obj.id (In this case, on the first iteration it would check for the property '1'.) We want the opposite of what it returns (either true or false) which is why we use the ! in !uniq[obj.id]. If uniq has the id property already, it returns true which evaluates to false (!) telling the filter function NOT to add that obj. However, if it does not find the obj.id property, it returns false which then evaluates to true (!) and returns everything to the right of the &&, or (uniq[obj.id] = true). This is a truthy value, telling the filter method to add that obj to the returned array, and it also adds the property {1: true} to uniq. This ensure that any other obj instance with that same id will not be added again.

  • 19楼
  • If you don't mind your unique array being sorted afterwards, this would be an efficient solution:

    things.thing
      .sort(((a, b) => a.place < b.place)
      .filter((current, index, array) =>
        index === 0 || current.place !== array[index - 1].place)
    

    This way, you only have to compare the current element with the previous element in the array. Sorting once before filtering (O(n*log(n))) is cheaper than searching for a duplicate in the entire array for every array element (O(n²)).

  • 20楼
  • Have you heard of Lodash library? I recommend you this utility, when you don't really want to apply your logic to the code, and use already present code which is optimised and reliable.

    Consider making an array like this

    things.thing.push({place:"utopia",name:"unicorn"});
    things.thing.push({place:"jade_palace",name:"po"});
    things.thing.push({place:"jade_palace",name:"tigress"});
    things.thing.push({place:"utopia",name:"flying_reindeer"});
    things.thing.push({place:"panda_village",name:"po"});
    

    Note that if you want to keep one attribute unique, you may very well do that by using lodash library. Here, you may use _.uniqBy

    .uniqBy(array, [iteratee=.identity])

    This method is like _.uniq (which returns a duplicate-free version of an array, in which only the first occurrence of each element is kept) except that it accepts iteratee which is invoked for each element in array to generate the criterion by which uniqueness is computed.

    So, for example, if you want to return an array having unique attribute of 'place'

    _.uniqBy(things.thing, 'place')

    Similarly, if you want unique attribute as 'name'

    _.uniqBy(things.thing, 'name')

    Hope this helps.

    Cheers!

  • 21楼
  • If you don't want to specify a list of properties:

    function removeDuplicates(myArr) {
      var props = Object.keys(myArr[0])
      return myArr.filter((item, index, self) =>
        index === self.findIndex((t) => (
          props.every(prop => {
            return t[prop] === item[prop]
          })
        ))
      )
    }
    

    OBS! Not compatible with IE11.

  • 22楼
  • Continuing exploring ES6 ways of removing duplicates from array of objects: setting thisArg argument of Array.prototype.filter to new Set provides a decent alternative:

    const things = [
      {place:"here",name:"stuff"},
      {place:"there",name:"morestuff"},
      {place:"there",name:"morestuff"}
    ];
    
    const filtered = things.filter(function({place, name}) {
    
      const key =`${place}${name}`;
    
      return !this.has(key) && this.add(key);
    
    }, new Set);
    
    console.log(filtered);

    However, it will not work with arrow functions () =>, as this is bound to their lexical scope.

  • 23楼
  • Another way would be to use reduce function and have a new array to be the accumulator. If there is already a thing with the same name in the accumulator array then don't add it there.

    let list = things.thing;
    list = list.reduce((accumulator, thing) => {
        if (!accumulator.filter((duplicate) => thing.name === duplicate.name)[0]) {
            accumulator.push(thing);
        }
        return accumulator;
    }, []);
    thing.things = list;
    

    I'm adding this answer, because I couldn't find nice, readable es6 solution (I use babel to handle arrow functions) that's compatible with Internet Explorer 11. The problem is IE11 doesn't have Map.values() or Set.values() without polyfill. For the same reason I used filter()[0] to get first element instead of find().

  • 24楼
  •  var testArray= ['a','b','c','d','e','b','c','d'];
    
     function removeDuplicatesFromArray(arr){
    
     var obj={};
     var uniqueArr=[];
     for(var i=0;i<arr.length;i++){ 
        if(!obj.hasOwnProperty(arr[i])){
            obj[arr[i]] = arr[i];
            uniqueArr.push(arr[i]);
        }
     }
    
    return uniqueArr;
    
    }
    var newArr = removeDuplicatesFromArray(testArray);
    console.log(newArr);
    
    Output:- [ 'a', 'b', 'c', 'd', 'e' ]
    
  • 25楼
  • Source

    JSFiddle

    This will remove the duplicate object without passing any key.

    uniqueArray = a => [...new Set(a.map(o => JSON.stringify(o)))].map(s => JSON.parse(s));
    
    var objects = [{ 'x': 1, 'y': 2 }, { 'x': 2, 'y': 1 }, { 'x': 1, 'y': 2 }];
    
    var unique = uniqueArray(objects);
    console.log('Original Object',objects);
    console.log('Unique',unique);

    uniqueArray = a => [...new Set(a.map(o => JSON.stringify(o)))].map(s => JSON.parse(s));
    
        var objects = [{ 'x': 1, 'y': 2 }, { 'x': 2, 'y': 1 }, { 'x': 1, 'y': 2 }];
    
        var unique = uniqueArray(objects);
        console.log(objects);
        console.log(unique);
    
  • 26楼
  • Here is another technique to find number of duplicate and and remove it easily from you data object. "dupsCount" is number of duplicate files count. sort your data first then remove. it will gives you fastest duplication remove.

      dataArray.sort(function (a, b) {
                var textA = a.name.toUpperCase();
                var textB = b.name.toUpperCase();
                return (textA < textB) ? -1 : (textA > textB) ? 1 : 0;
            });
            for (var i = 0; i < dataArray.length - 1; ) {
                if (dataArray[i].name == dataArray[i + 1].name) {
                    dupsCount++;
                    dataArray.splice(i, 1);
                } else {
                    i++;
                }
            }
    
  • 27楼
  • Here is a solution using new filter function of JavaScript that is quite easy . Let's say you have an array like this.

    var duplicatesArray = ['AKASH','AKASH','NAVIN','HARISH','NAVIN','HARISH','AKASH','MANJULIKA','AKASH','TAPASWENI','MANJULIKA','HARISH','TAPASWENI','AKASH','MANISH','HARISH','TAPASWENI','MANJULIKA','MANISH'];
    

    The filter function will allow you to create a new array, using a callback function once for each element in the array. So you could set up the unique array like this.

    var uniqueArray = duplicatesArray.filter(function(elem, pos) {return duplicatesArray.indexOf(elem) == pos;});
    

    In this scenario your unique array will run through all of the values in the duplicate array. The elem variable represents the value of the element in the array (mike,james,james,alex), the position is it's 0-indexed position in the array (0,1,2,3...), and the duplicatesArray.indexOf(elem) value is just the index of the first occurrence of that element in the original array. So, because the element 'james' is duplicated, when we loop through all of the elements in the duplicatesArray and push them to the uniqueArray, the first time we hit james, our "pos" value is 1, and our indexOf(elem) is 1 as well, so James gets pushed to the uniqueArray. The second time we hit James, our "pos" value is 2, and our indexOf(elem) is still 1 (because it only finds the first instance of an array element), so the duplicate is not pushed. Therefore, our uniqueArray contains only unique values.

    Here is the Demo of above function.Click Here for the above function example

  • 28楼
  • If you need an unique array based on multiple properties in the object you can do this with map and combining the properties of the object.

        var hash = array.map(function(element){
            var string = ''
            for (var key in element){
                string += element[key]
            }
            return string
        })
        array = array.filter(function(element, index){
            var string = ''
            for (var key in element){
                string += element[key]
            }
            return hash.indexOf(string) == index
        })
    
  • 29楼
  • Generic for any array of objects:

    /**
    * Remove duplicated values without losing information
    */
    const removeValues = (items, key) => {
      let tmp = {};
    
      items.forEach(item => {
        tmp[item[key]] = (!tmp[item[key]]) ? item : Object.assign(tmp[item[key]], item);
      });
      items = [];
      Object.keys(tmp).forEach(key => items.push(tmp[key]));
    
      return items;
    }
    

    Hope it could help to anyone.

  • 30楼
  • This is simple way how to remove duplicity from array of objects.

    I work with data a lot and this is useful for me.

    const data = [{name: 'AAA'}, {name: 'AAA'}, {name: 'BBB'}, {name: 'AAA'}];
    function removeDuplicity(datas){
        return datas.filter((item, index,arr)=>{
        const c = arr.map(item=> item.name);
        return  index === c.indexOf(item.name)
      })
    }
    
    console.log(removeDuplicity(data))
    

    will print into console :

    [[object Object] {
    name: "AAA"
    }, [object Object] {
    name: "BBB"
    }]
    

相关阅读:

Remove duplicates from an array of objects in JavaScript

Remove duplicates from an array of objects in JavaScript

Remove duplicates from an array of objects in JavaScript

Remove duplicates from an array of objects in JavaScript

Can I call jquery click() to follow an <a> link if I haven't bound an event handler to it with bind or click already?

Check whether a string matches a regex in JS

jQuery event to trigger action when a div is made visible

Check if user is using IE with jQuery

Resize HTML5 canvas to fit window

How do I replace a character at a particular index in JavaScript?