Comment obtenir des valeurs distinctes d'un tableau d'objets en JavaScript?

En supposant que j'ai les éléments suivants:

var array = 
    [
        {"name":"Joe", "age":17}, 
        {"name":"Bob", "age":17}, 
        {"name":"Carl", "age": 35}
    ]

Quelle est la meilleure façon d'obtenir un tableau de tous les âges distincts, de sorte que j'obtienne un tableau de résultats de:

[17, 35]

Existe-t-il un moyen de structurer alternativement les données ou une meilleure méthode de telle sorte que je n'aurais pas à parcourir chaque tableau en vérifiant la valeur de "age" et en vérifiant par rapport à un autre tableau son existence, et en l'ajoutant sinon?

S'il y avait un moyen, je pourrais simplement retirer les âges distincts sans répéter ...

La manière actuellement inefficace que je voudrais améliorer ... Si cela signifie qu'au lieu de "tableau" étant un tableau d'objets, mais une "carte" d'objets avec une clé unique (c'est-à-dire "1,2,3") qui serait d'accord aussi. Je cherche juste le moyen le plus efficace en termes de performances.

Voici comment je le fais actuellement, mais pour moi, l'itération semble juste minable pour l'efficacité même si cela fonctionne ...

var distinct = []
for (var i = 0; i < array.length; i++)
   if (array[i].age not in distinct)
      distinct.push(array[i].age)

Si c'était PHP, je construirais un tableau avec les clés et le prendrais array_keysà la fin, mais JS n'a pas un tel luxe. Essayez plutôt ceci:

var flags = [], output = [], l = array.length, i;
for( i=0; i<l; i++) {
    if( flags[array[i].age]) continue;
    flags[array[i].age] = true;
    output.push(array[i].age);
}

Si vous utilisez ES6 / ES2015 ou une version ultérieure, vous pouvez le faire de cette façon:

const unique = [...new Set(array.map(item => item.age))];

Voici un exemple sur la façon de procéder.

en utilisant ES6

let array = [
  { "name": "Joe", "age": 17 },
  { "name": "Bob", "age": 17 },
  { "name": "Carl", "age": 35 }
];
array.map(item => item.age)
  .filter((value, index, self) => self.indexOf(value) === index)

> [17, 35]

Vous pouvez utiliser une approche de dictionnaire comme celle-ci. Fondamentalement, vous attribuez la valeur que vous souhaitez être distincte comme clé dans le "dictionnaire" (ici, nous utilisons un tableau comme objet pour éviter le mode dictionnaire). Si la clé n'existait pas, vous ajoutez cette valeur comme distincte.

Voici une démo fonctionnelle:

var array = [{"name":"Joe", "age":17}, {"name":"Bob", "age":17}, {"name":"Carl", "age": 35}];
var unique = [];
var distinct = [];
for( let i = 0; i < array.length; i++ ){
  if( !unique[array[i].age]){
    distinct.push(array[i].age);
    unique[array[i].age] = 1;
  }
}
var d = document.getElementById("d");
d.innerHTML = "" + distinct;

<div id="d"></div>

Ce sera O (n) où n est le nombre d'objets dans le tableau et m est le nombre de valeurs uniques. Il n'y a pas de moyen plus rapide que O (n) car vous devez inspecter chaque valeur au moins une fois.

La version précédente de celui-ci utilisait un objet, et pour in. Celles-ci étaient de nature mineure et ont depuis été légèrement mises à jour ci-dessus. Cependant, la raison d'une apparente amélioration des performances entre les deux versions dans le jsperf d'origine était due à la petite taille de l'échantillon de données. Ainsi, la comparaison principale dans la version précédente portait sur la différence entre la carte interne et l'utilisation du filtre par rapport aux recherches en mode dictionnaire.

J'ai mis à jour le code ci-dessus, comme indiqué, cependant, j'ai également mis à jour le jsperf pour regarder à travers 1000 objets au lieu de 3. 3 négligé de nombreux pièges de performances impliqués ( jsperf obsolète ).

Performance

https://jsperf.com/filter-vs-dictionary-more-data Lorsque j'ai exécuté ce dictionnaire, il était 96% plus rapide.

Voici comment résoudre ce problème en utilisant le nouvel ensemble via ES6 pour Typescript à partir du 25 août 2017

Array.from(new Set(yourArray.map((item: any) => item.id)))

En utilisant les fonctionnalités ES6, vous pourriez faire quelque chose comme:

const uniqueAges = [...new Set( array.map(obj => obj.age)) ];

Je mapperais et supprimerais les doublons:

var ages = array.map(function(obj) { return obj.age; });
ages = ages.filter(function(v,i) { return ages.indexOf(v) == i; });

console.log(ages); //=> [17, 35]

Edit: Aight! Pas le moyen le plus efficace en termes de performances, mais l'OMI le plus simple et le plus lisible. Si vous vous souciez vraiment de la micro-optimisation ou si vous avez d'énormes quantités de données, une forboucle régulière sera plus "efficace".

var unique = array
    .map(p => p.age)
    .filter((age, index, arr) => arr.indexOf(age) == index)
    .sort(); // sorting is optional

// or in ES6

var unique = [...new Set(array.map(p => p.age))];

// or with lodash

var unique = _.uniq(_.map(array, 'age'));

Exemple ES6

const data = [
  { name: "Joe", age: 17}, 
  { name: "Bob", age: 17}, 
  { name: "Carl", age: 35}
];

const arr = data.map(p => p.age); // [17, 17, 35]
const s = new Set(arr); // {17, 35} a set removes duplications, but it's still a set
const unique = [...s]; // [17, 35] Use the spread operator to transform a set into an Array
// or use Array.from to transform a set into an array
const unique2 = Array.from(s); // [17, 35]

Pour ceux qui veulent retourner un objet avec toutes les propriétés uniques par clé

const array =
  [
    { "name": "Joe", "age": 17 },
    { "name": "Bob", "age": 17 },
    { "name": "Carl", "age": 35 }
  ]

const key = 'age';

const arrayUniqueByKey = [...new Map(array.map(item =>
  [item[key], item])).values()];

console.log(arrayUniqueByKey);

   /*OUTPUT
       [
        { "name": "Bob", "age": 17 },
        { "name": "Carl", "age": 35 }
       ]
   */

 // Note: this will pick the last duplicated item in the list.

Il existe déjà de nombreuses réponses valides, mais je voulais en ajouter une qui utilise uniquement la reduce()méthode car elle est propre et simple.

function uniqueBy(arr, prop){
  return arr.reduce((a, d) => {
    if (!a.includes(d[prop])) { a.push(d[prop]); }
    return a;
  }, []);
}

Utilisez-le comme ceci:

var array = [
  {"name": "Joe", "age": 17}, 
  {"name": "Bob", "age": 17}, 
  {"name": "Carl", "age": 35}
];

var ages = uniqueBy(array, "age");
console.log(ages); // [17, 35]

La forEachversion de la réponse de @ travis-j (utile sur les navigateurs modernes et le monde Node JS):

var unique = {};
var distinct = [];
array.forEach(function (x) {
  if (!unique[x.age]) {
    distinct.push(x.age);
    unique[x.age] = true;
  }
});

34% plus rapide sur Chrome v29.0.1547: http://jsperf.com/filter-versus-dictionary/3

Et une solution générique qui prend une fonction de mappeur (un peu plus lente que la carte directe, mais c'est prévu):

function uniqueBy(arr, fn) {
  var unique = {};
  var distinct = [];
  arr.forEach(function (x) {
    var key = fn(x);
    if (!unique[key]) {
      distinct.push(key);
      unique[key] = true;
    }
  });
  return distinct;
}

// usage
uniqueBy(array, function(x){return x.age;}); // outputs [17, 35]

J'ai commencé à coller Underscore dans tous les nouveaux projets par défaut, donc je n'ai jamais à penser à ces petits problèmes de transfert de données.

var array = [{"name":"Joe", "age":17}, {"name":"Bob", "age":17}, {"name":"Carl", "age": 35}];
console.log(_.chain(array).map(function(item) { return item.age }).uniq().value());

Produit [17, 35].

Voici une autre façon de résoudre ce problème:

var result = {};
for(var i in array) {
    result[array[i].age] = null;
}
result = Object.keys(result);

Je ne sais pas à quelle vitesse cette solution est comparée aux autres, mais j'aime le look plus propre. ;-)

EDIT: D'accord, ce qui précède semble être la solution la plus lente de toutes ici.

J'ai créé un cas de test de performance ici: http://jsperf.com/distinct-values-from-array

Au lieu de tester pour les âges (Integers), j'ai choisi de comparer les noms (Strings).

La méthode 1 (solution de TS) est très rapide. Chose intéressante, la méthode 7 surpasse toutes les autres solutions, ici je viens de me débarrasser de .indexOf () et j'en ai utilisé une implémentation "manuelle", en évitant les appels en boucle:

var result = [];
loop1: for (var i = 0; i < array.length; i++) {
    var name = array[i].name;
    for (var i2 = 0; i2 < result.length; i2++) {
        if (result[i2] == name) {
            continue loop1;
        }
    }
    result.push(name);
}

La différence de performances avec Safari et Firefox est incroyable, et il semble que Chrome fasse le meilleur travail d'optimisation.

Je ne sais pas exactement pourquoi les extraits ci-dessus sont si rapides par rapport aux autres, peut-être que quelqu'un de plus sage que moi a une réponse. ;-)

utilisant lodash

var array = [
    { "name": "Joe", "age": 17 },
    { "name": "Bob", "age": 17 },
    { "name": "Carl", "age": 35 }
];
_.chain(array).pluck('age').unique().value();
> [17, 35]

Utiliser Lodash

var array = [
    { "name": "Joe", "age": 17 },
    { "name": "Bob", "age": 17 },
    { "name": "Carl", "age": 35 }
];

_.chain(array).map('age').unique().value();

Renvoie [17,35]

function get_unique_values_from_array_object(array,property){
    var unique = {};
    var distinct = [];
    for( var i in array ){
       if( typeof(unique[array[i][property]]) == "undefined"){
          distinct.push(array[i]);
       }
       unique[array[i][property]] = 0;
    }
    return distinct;
}

underscore.js _.uniq(_.pluck(array,"age"))

Voici une solution polyvalente qui utilise réduire, permet le mappage et maintient l'ordre d'insertion.

éléments : un tableau

mapper : fonction unaire qui mappe l'élément aux critères, ou vide pour mapper l'élément lui-même.

function distinct(items, mapper) {
    if (!mapper) mapper = (item)=>item;
    return items.map(mapper).reduce((acc, item) => {
        if (acc.indexOf(item) === -1) acc.push(item);
        return acc;
    }, []);
}

Usage

const distinctLastNames = distinct(items, (item)=>item.lastName);
const distinctItems = distinct(items);

Vous pouvez l'ajouter à votre prototype Array et laisser de côté le paramètre items si c'est votre style ...

const distinctLastNames = items.distinct( (item)=>item.lastName) ) ;
const distinctItems = items.distinct() ;

Vous pouvez également utiliser un ensemble au lieu d'un tableau pour accélérer la correspondance.

function distinct(items, mapper) {
    if (!mapper) mapper = (item)=>item;
    return items.map(mapper).reduce((acc, item) => {
        acc.add(item);
        return acc;
    }, new Set());
}

Je viens de le trouver et je l'ai trouvé utile

_.map(_.indexBy(records, '_id'), function(obj){return obj})

Encore une fois en utilisant le soulignement , donc si vous avez un objet comme celui-ci

var records = [{_id:1,name:'one', _id:2,name:'two', _id:1,name:'one'}]

il vous donnera uniquement les objets uniques.

Ce qui se passe ici, c'est que indexByrenvoie une carte comme celle-ci

{ 1:{_id:1,name:'one'}, 2:{_id:2,name:'two'} }

et juste parce que c'est une carte, toutes les clés sont uniques.

Ensuite, je mappe simplement cette liste sur le tableau.

Si vous n'avez besoin que des valeurs distinctes

_.map(_.indexBy(records, '_id'), function(obj,key){return key})

Gardez à l'esprit que le keyest retourné sous forme de chaîne, donc si vous avez besoin d'entiers à la place, vous devriez faire

_.map(_.indexBy(records, '_id'), function(obj,key){return parseInt(key)})

je pense que vous recherchez la fonction groupBy (en utilisant Lodash)

_personsList = [{"name":"Joe", "age":17}, 
                {"name":"Bob", "age":17}, 
                {"name":"Carl", "age": 35}];
_uniqAgeList = _.groupBy(_personsList,"age");
_uniqAges = Object.keys(_uniqAgeList);

produit un résultat:

17,35

Démo jsFiddle: http://jsfiddle.net/4J2SX/201/

Si, comme moi, vous préférez une version plus "fonctionnelle" sans compromettre la vitesse, cet exemple utilise une recherche rapide de dictionnaire enveloppée à l'intérieur pour réduire la fermeture.

var array = 
[
    {"name":"Joe", "age":17}, 
    {"name":"Bob", "age":17}, 
    {"name":"Carl", "age": 35}
]
var uniqueAges = array.reduce((p,c,i,a) => {
    if(!p[0][c.age]) {
        p[1].push(p[0][c.age] = c.age);
    }
    if(i<a.length-1) {
        return p
    } else {
        return p[1]
    }
}, [{},[]])

Selon ce test, ma solution est deux fois plus rapide que la réponse proposée

[...new Set([
    { "name": "Joe", "age": 17 },
    { "name": "Bob", "age": 17 },
    { "name": "Carl", "age": 35 }
  ].map(({ age }) => age))]

Je sais que mon code est peu long et peu complexe, mais il est compréhensible, j'ai donc essayé de cette façon.

J'essaie de développer ici une fonction basée sur un prototype et le code change également.

Ici, Distinct est ma propre fonction prototype.

<script>
  var array = [{
      "name": "Joe",
      "age": 17
    },
    {
      "name": "Bob",
      "age": 17
    },
    {
      "name": "Carl",
      "age": 35
    }
  ]

  Array.prototype.Distinct = () => {
    var output = [];
    for (let i = 0; i < array.length; i++) {
      let flag = true;
      for (let j = 0; j < output.length; j++) {
        if (array[i].age == output[j]) {
          flag = false;
          break;
        }
      }
      if (flag)
        output.push(array[i].age);
    }
    return output;
  }
  //Distinct is my own function
  console.log(array.Distinct());
</script>

Si vous avez Array.prototype.includes ou êtes prêt à le polyfill , cela fonctionne:

var ages = []; array.forEach(function(x) { if (!ages.includes(x.age)) ages.push(x.age); });

Mon code ci-dessous affichera le tableau unique des âges ainsi que le nouveau tableau n'ayant pas d'âge en double

var data = [
  {"name": "Joe", "age": 17}, 
  {"name": "Bob", "age": 17}, 
  {"name": "Carl", "age": 35}
];

var unique = [];
var tempArr = [];
data.forEach((value, index) => {
    if (unique.indexOf(value.age) === -1) {
        unique.push(value.age);
    } else {
        tempArr.push(index);    
    }
});
tempArr.reverse();
tempArr.forEach(ele => {
    data.splice(ele, 1);
});
console.log('Unique Ages', unique);
console.log('Unique Array', data);```

J'ai écrit le mien en TypeScript, pour un cas générique, comme celui de Kotlin Array.distinctBy {}...

function distinctBy<T, U extends string | number>(array: T[], mapFn: (el: T) => U) {
  const uniqueKeys = new Set(array.map(mapFn));
  return array.filter((el) => uniqueKeys.has(mapFn(el)));
}

Où Uest lavable, bien sûr. Pour les objets, vous pourriez avoir besoin de https://www.npmjs.com/package/es6-json-stable-stringify

Si vous avez besoin d'un objet unique

const _ = require('lodash');

var objects = [
  { 'x': 1, 'y': 2 },
  { 'y': 1, 'x': 2 },
  { 'x': 2, 'y': 1 },
  { 'x': 1, 'y': 2 }
];

_.uniqWith(objects, _.isEqual);

[Objet {x: 1, y: 2}, Objet {x: 2, y: 1}]

Répondre à cette vieille question est assez inutile, mais il existe une réponse simple qui parle de la nature de Javascript. Les objets en Javascript sont intrinsèquement des tables de hachage. Nous pouvons l'utiliser pour obtenir un hachage de clés uniques:

var o = {}; array.map(function(v){ o[v.age] = 1; });

Ensuite, nous pouvons réduire le hachage à un tableau de valeurs uniques:

var a2 = []; for (k in o){ a2.push(k); }

C'est tout ce dont vous avez besoin. Le tableau a2 contient uniquement les âges uniques.

Une doublure simple avec de grandes performances. 6% plus rapide que les solutions ES6 dans mes tests .

var ages = array.map(function(o){return o.age}).filter(function(v,i,a) {
    return a.indexOf(v)===i
});