Supprimer les doublons forme d'un tableau

J'ai un tableau d'objets qui ressemble à ceci:

var array = [
    {id:123, value:"value1", name:"Name1"},
    {id:124, value:"value2", name:"Name1"},
    {id:125, value:"value3", name:"Name2"},
    {id:126, value:"value4", name:"Name2"}
    ...
];

Comme vous pouvez le voir, certains noms sont répétés. Je veux obtenir un nouveau tableau avec les noms, mais si certains nom répète que je ne veux pas ajouter de nouveau. Je veux ce tableau:

var newArray = ["Name1", "Name2"];

Je suis en train de le faire avec map:

var newArray = array.map((a) => {
    return a.name;
});

Mais le problème est que ce retourne:

newArray = ["Name1", "Name1", "Name2", "Name2"];

Comment puis-je mettre une condition à l'intérieur de map, de sorte qu'il ne retournera pas un élément qui existe déjà? Je veux le faire avec map ou certains autres ECMAScript 5 ou ECMAScript 6 fonctionnalité.

Puis supprimer les doublons à partir du tableau.
Comment faire un Set? developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/...
double possible de Supprimer les Doublons Tableau JavaScript
Pourquoi la ligne contenant l'id:125 termine pas par une virgule?
Veuillez noter que toutes les réponses à l'aide .indexOf() sera mauvaise performance si le tableau est grand, en raison de leur quadratique le temps de la complexité. Je vous conseille d'utiliser ES6 Set ou à l'aide d'un ES5 objet comme un dictionnaire.

InformationsquelleAutor snoopy25 | 2016-12-28

arrays javascript

198

Avec ES6, vous pouvez utiliser Set pour des valeurs uniques, après la cartographie de seulement les noms des objets.

Cette proposition utilise un la propagation de la syntaxe de ... pour recueillir les éléments dans un tableau.

JS:
```
const array = [{ id: 123, value: "value1", name:"Name1" }, { id: 124, value: "value2", name: "Name1" }, { id: 125, value: "value3", name: "Name2" }, { id: 126, value: "value4", name: "Name2" }],
      names = [...new Set(array.map(a => a.name))];

console.log(names);
```
- Pour mon info.. ce n' ... faire?
- c'est un propagation de la syntaxe ... pour la construction d'un tableau avec un objet itérable.
- Je ne suis pas upvoting pour le "Jeu" lui-même, mais plutôt pour l'utilisation habile de la propagation de l'opérateur. C'est toujours agréable d'apprendre quelque chose de nouveau ou de voir quelque chose de nouveau appliquée à un exemple pratique, donc, ce post mérite un upvote.
- Pourquoi jeter la Set après que vous l'avez fait? Je dirais que names doit être laissé comme un Set—après tout, c' est un ensemble. Et console.log, à tout le moins, n'a aucun problème avec l'impression de que un ensemble. Certaines bibliothèques ont besoin d'un tableau (n'ayant pas été mis à jour à ES6, ou de permettre à des doublons), mais en le laissant comme un Set jusqu'à ce qu'il est nécessaire d'utiliser un tableau enregistre développeur espace libre: le moteur d'exécution est de garder la trace du fait que names est censé avoir des valeurs uniques, de sorte que le développeur n'a pas à s'en rappeler. Aussi, “l'intelligence” mérite bien son nom fonction d'utilité.
- à droite, il est préférable de garder une structure de données jusqu'à ce que les données sont utilisées, mais la question nécessite un tableau comme résultat et c'est pourquoi la propagation de la syntaxe.
- Les réponses sont autorisés à, et devrait, lorsque cela est approprié, point de meilleures pratiques que ceux demandés. Je ne dis pas que vous devriez supprimer la méthode de réalisation d'un tableau à partir de la Set, c'est juste que vous devez également mentionner qu'il peut y avoir de meilleures approches. Et je ne pense suggérant une toArrayFromSet fonction d'utilité pour la set => [...set] serait une bonne idée, parce que la syntaxe est va être difficile de savoir à d'autres développeurs (au moins pour l'instant, avec ES6 être si nouveau).
- Je suis d'accord que le fait d'abuser de la propagation de la syntaxe est une mauvaise pratique ici, mais il n'y a aucun point dans la construction d'un toArrayFromSet fonction - il existe déjà en tant que Array.from
- Ah, parfait: j'avais vérifié Set pour cela, vous avez oublié de vérifier Array.
- s'il vous plaît ajouter certaines sources au sujet de la mauvaise pratique de l'utilisation de la propagation de la syntaxe avec les jeux.
- C'est juste mon avis personnel, mais un plutôt commune. À l'aide de Array.from exprime l'intention de conversion beaucoup mieux (et c'est aussi plus facile à comprendre/de recherche pour les débutants), la propagation de la syntaxe devrait être utilisé que lorsque le spread élément est l'un des nombreux. Peut-être que l'appelant une "mauvaise pratique" est un peu trop dure, désolé, j'espère juste que pour l'empêcher de devenir un idiome commun.
- est ES6 il donc de nouveau? Il a été finalisé en juin 2015. Il est temps de commencer à comprendre et à utiliser les nouvelles fonctionnalités
- est la clé de phrase-là. Prise en charge du navigateur pour qu'il est encore incomplet (et plus le navigateur est encore souvent besoin de soutien), ce qui signifie que de nombreux, de nombreux développeurs paient zéro attention à elle. Je suis d'accord c'est une erreur, mais c'est aussi un fait.
- Je veux joyeux vous cause que vous avez les réponses à toutes mes questions
- je suis heureux, que je pouvais l'aider. donc pas plus les questions sont ouvertes.
- href="https://stackoverflow.com/questions/50838686/group-objects-in-array-based-on-value-of-key-in-object" title="groupe d'objets dans le tableau en fonction de la valeur de la clé dans l'objet">stackoverflow.com/questions/50838686/... - Vous êtes probablement la meilleure personne pour vous aider avec cette réponse - vous un JS machine! hahaha!!! vous avez là, devant moi!
InformationsquelleAutor Nina Scholz
62

Si vous êtes à la recherche d'une solution d'activer JavaScript qui n'est pas ES 6 (pas de Jeu), vous pouvez utiliser le Du tableau réduction méthode:

JS:
```
var array=[
  {id:123, value:"value1", name:"Name1"},
  {id:124, value:"value2", name:"Name1"},
  {id:125, value:"value3", name:"Name2"},
  {id:126, value:"value4", name:"Name2"}
];
var names = array.reduce(function (a, b) {
  if (a.indexOf(b.name) == -1) {
    a.push(b.name)
  }
  return a;
}, []);

console.log(names);
```
- Cette réponse a également l'avantage qu'il ne nécessite pas d'intermédiaire des ensembles ou ensembles, en particulier ceux contenant uniquement les noms eux-mêmes. (Il va directement depuis le tableau des objets de tableau d'objets.) +1
- n'est-ce pas le deuxième paramètre le même objet que le retour de l'un?
- Oui mais il ne marche pas aller directement de l'un à l'autre comme de tri ou de filtre, sa reconstruite à partir d'un tableau vide.
- le filtre n'agit pas sur le tableau original, il permet de créer un nouveau tableau. réduire n'est pas le cas : il ne sort que vous avez passé en.
- et je suppose que l'interne de tri et de filtre construire le tableau à un seul élément à la fois trop tout ce que je veux dire c'est qu'il commence par un "intermédiaire" tableau dans le tableau désiré, en effet de la même manière que vous le feriez avec une boucle, alors que, de tri et de filtre il suffit de prendre une fonction et le retour d'un nouveau tableau.
- Version plus petite 🙂 var names = array.reduce(function(a, b) { a.indexOf(b.name) === -1 && a.push(b.name) return a; }, []);
- S'il vous plaît ne pas payer trop d'attention à la taille du code source, c'est un piège classique pour beaucoup de self made programmeurs, plus important encore, votre programme doit être efficace et lisible.
InformationsquelleAutor Dekel
16

Personnellement, je ne vois pas pourquoi tout le monde est d'obtenir toutes les fantaisie avec ES 6. Si c'était mon code je préfère le support des navigateurs autant que possible.

JS:
```
var array=[
{id:123, value:"value1", name:"Name1"},
{id:124, value:"value2", name:"Name1"},
{id:125, value:"value3", name:"Name2"},
{id:126, value:"value4", name:"Name2"}
];

   //Create array of unique names
var a = (function(a){
  for (var i = array.length; i--;)
    if (a.indexOf(array[i].name) < 0) a.push(array[i].name);
  return a;
})([]);

console.log(a);
```
- Il ne le sera pas plus performant d'utiliser un objet comme un dictionnaire au lieu de indexOf-ment tout le temps? E. g. ne added[name] = true et if(added[name]) au lieu de if(a.indexOf(name)).
- dépend du nombre d'éléments, vraiment
- "personnellement, je ne vois pas pourquoi tout le monde est d'obtenir toutes les fantaisie avec es6" pourquoi êtes-vous courtiser une goto fail, des fuites de votre index de la variable dans le cadre englobant, etc. etc. ES6 a été codifiée dans la norme pour de bonnes raisons, et pour la plupart trivial à polyfill/transformer pour les anciens navigateurs.
- Si les fuites et ce qui est vraiment un problème c'est encore plus facile de le mettre ina fermeture mais à ce stade, vous pourriez aussi bien utiliser un polyfill.. son 2016 la plupart des gens écrire du code javascript ne sont probablement pas écrit niveau de l'entreprise logiciels
- "je ne vois pas pourquoi tout le monde est d'obtenir toutes les fantaisie avec es6": parce qu'il y a transpilers que convertir le code à l'ancienne syntaxe. plus lisible pour le programmeur, mais également pris en charge!
- Plus lisible? Son un son d'une vraie boucle pousse des éléments sur un tableau. Ne pas obtenir beaucoup plus lisible que ça......
- Ive a ajouté un commentaire pour quelqu'un qui a de la difficulté à comprendre les boucles et les tableaux.. et j'ai adressé le commentaire ci-dessus, comme 12 heures avant de vous même voté il..
- Je pense que la lisibilité en termes syntaxiques est plus ou moins un lavage, et le "fonctionnel" version n'est pas plus courte dans cette instance. La raison pour laquelle les gens n'utilisent pas for boucles plus et préfère des Ensembles de Matrices a plus à faire avec exactitude. Pas de fencepost erreurs, d'exécution des garanties de déduplication, etc. etc. Ce n'est même pas y compris le potentiel goto fail encore présents dans votre version à l'heure où j'écris cet.
- Il n'y a pas de goto en javascript, donc honnêtement, je ne sais pas ce que vous êtes parle. Hésitez pas à m'éclairer, mais franchement ça va être dur de le prendre à la valeur nominale de quelqu'un qui dit: "les gens à ne pas utiliser pour des boucles plus." Vous semblent manquer le point de rétro compatibilité, qui est la raison pour laquelle j'ai posté ce.
- Tout à fait honnête, il se sent juste comme vous essayez trop dur de trouver quelque chose à se plaindre.
- Vous a invité les gens à se plaindre de votre code en raison de votre (inutiles) de commentaire sur les autres réponses. La rétrocompatibilité est un total de red herring, d'autres intervenants et moi-même avons souligné que les plusieurs code transformateurs existent. Et bien sûr, il n'y a pas goto en JavaScript, je fais référence à la célèbre Pomme SSL bug qui a été introduit à l'aide d'un conditionnel sans les accolades (suivie par quelqu'un d'autre à ajouter une autre ligne à la clause). nakedsecurity.sophos.com/2014/02/24/...
- "Je fais référence à la célèbre Pomme SSL bug" -- Ce n'est pas si connu que vous pouvez simplement aller et s'y référer au hasard des commentaires hors contexte et d'attendre les gens à le reconnaître.
InformationsquelleAutor I wrestled a bear once.

Vous pouvez aussi tout simplement combiner map avec filter

JS:

var array = [
  {id:123, value:"value1", name:"Name1"},
  {id:124, value:"value2", name:"Name1"},
  {id:125, value:"value3", name:"Name2"},
  {id:126, value:"value4", name:"Name2"}
];

var unique = array
  .map( item => item.name )
  .filter( ( item, idx, arr ) => arr.indexOf( item ) == idx ) 

console.log(unique)

InformationsquelleAutor DavidDomain

Vous pouvez faire Tableau.le prototype.map() pour obtenir un tableau avec les objets name bien et que Tableau.le prototype.filtre() à l'aide des paramètres elem, index et array, dans la fonction de prédicat, à éliminer la répétition des éléments:

JS:

var array = [{id:123, value:"value1", name:"Name1"}, {id:124, value:"value2", name:"Name1"}, {id:125, value:"value3", name:"Name2"}, {id:126, value:"value4", name:"Name2"}],
    names = array
      .map(e => e.name)
      .filter((e, i, a) => a.indexOf(e) === i);

console.log(names);

InformationsquelleAutor Yosvel Quintero

7

Beaucoup de bonnes réponses ici. Je tiens à contribuer, avec un peu de diversité avec l'espoir de vous donner un autre point de vue.

Les tableaux sont de type d'objet en JavaScript, donc il peut être utilisé comme une table de hachage en même temps. En utilisant cette fonctionnalité nous permet de simplifier considérablement la tâche à accomplir en une seule réduire opération avec O(n) le temps de la complexité.

Si vous n'êtes pas heureux avec votre groupe détient des propriétés autres que la matrice de touches, vous pourriez envisager de garder un hachage de l'objet en tant que bien.

JS:
```
var array = [{id:123, value:"value1", name:"Name1"},
             {id:124, value:"value2", name:"Name1"},
             {id:125, value:"value3", name:"Name2"},
             {id:126, value:"value4", name:"Name2"}
            ],
result = array.reduce((p,c) => p[c.name] ? p : (p[c.name] = true, p.push(c.name), p), []);
console.log(result);
```
- Cette ES5 solution a de bonnes performances, mais en utilisant le tableau à deux fins est source de confusion, et dangereux si l'un des noms est juste un nombre. Je ne recommande pas de faire la p[c.name] choses sur un objet distinct o et ensuite de s'en débarrasser par la suite.
InformationsquelleAutor Redu

Je suis d'accord que si vous avez seulement besoin de l' name valeurs, un Set est le chemin à parcourir.

Cependant, si vous voulez obtenir un tableau d'objets uniques basées sur la name bien, je te suggère d'utiliser un Map. Un moyen rapide de créer une Carte, est via un tableau de [key, value] tableaux:

JS:

const array = [{ id: 123, value: "value1", name:"Name1" }, { id: 124, value: "value2", name: "Name1" }, { id: 125, value: "value3", name: "Name2" }, { id: 126, value: "value4", name: "Name2" }],
      unique = new Map(array.map(obj => [obj.name, obj]));

//To get the unique objects
const uniques = Array.from(unique.values());

//Get the names like you already did:
console.log("Names:", uniques.map(obj => obj.name));

//If you ever need the complete array of unique objects, you got a ref:
console.log(JSON.stringify(uniques));

CSS:

.as-console-wrapper { min-height: 100%; }

Un avantage supplémentaire de Map est que vous obtenez à la fois la filter fonctionnalité qui coupe la non-uniques, sans perdre la connexion avec la source des objets. Bien sûr, il est uniquement nécessaire si vous avez besoin de faire référence à l'ensemble unique d'objets plusieurs fois.

InformationsquelleAutor user3297291

3

Si vous êtes limité à ES5, je voudrais utiliser Lodash de _.uniq
```
var newArray = _.uniq(array.map(function(a) {
  return a.name;
}));
```
InformationsquelleAutor AndrewHenderson

Avec ES6 cela devrait faire le travail.

JS:

var array=[
    {id:123, value:"value1", name:"Name1"},
    {id:124, value:"value2", name:"Name1"},
    {id:125, value:"value3", name:"Name2"},
    {id:126, value:"value4", name:"Name2"}
];

var set = new Set();

array.forEach((a)=>{
    set.add(a.name);
}); 

console.log(Array.from(set));

map est censé être utilisé avec les fonctions pures, de ne pas avoir des effets secondaires. Ce serait un travail pour forEach ou reduce.

InformationsquelleAutor kkreft

À L'Aide De UnderscoreJS,

JS:

array = [{id:123, value:"value1", name:"Name1"}, {id:124, value:"value2", name:"Name1"}, {id:125, value:"value3", name:"Name2"}, {id:126, value:"value4", name:"Name2"}];
get_names =  _.pluck(_.uniq(array, 'name'), 'name')
console.log(get_names)

HTML:

<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

InformationsquelleAutor Mohideen bin Mohammed

0

Dans l'ES5, utiliser un objet comme un dictionnaire pour O(n) de la performance.

Cela ne fonctionne que si toutes les clés sont des Chaînes de caractères.
```
var array = [
    {id: 123, value: "value1", name: "Name1"},
    {id: 124, value: "value2", name: "Name1"},
    {id: 125, value: "value3", name: "Name2"},
    {id: 126, value: "value4", name: "Name2"}
];

var allNames = array.map(item => item.name);

var map = {};
allNames.forEach(name => {
  map[name] = true;
});
var uniqueNames = Object.keys(map);

console.log(uniqueNames);
```
Vous pourriez faire la même chose dans une expression si vous le souhaitez:
```
var uniqueNames = Object.keys(allNames.reduce((m, n) => (m[n] = true, m), {}));
```
mais je trouve l'impératif à la forme plus facile à lire.
- J'ai utilisé ES6 flèche fonctions pour plus de clarté. Si vous êtes vraiment ciblage ES5 sans transpiler, alors vous aurez besoin d'utiliser la forme complète à la place: function (item) { return item.name; }
- Comme une alternative à Object.keys(), cette réponse utilise filter() pour ne garder que les noms qui n'ont pas encore été enregistrées dans la carte, ce qui est assez élégant.
InformationsquelleAutor joeytwiddle

Essayez ceci:

nArr = [];
array.forEach((a) => {
    if (nArr.indexOf(a.name) < 0) { 
        nArr.push(a.name); 
    }
});

InformationsquelleAutor Rafael Gomes Francisco

Utilisation array#forEach() et array#indexOf() méthodes de ce genre si vous voulez un maximum de compatibilité encore, concis syntaxe:

JS:

const array = [{ id: 123, value: "value1", name:"Name1" }, { id: 124, value: "value2", name: "Name1" }, { id: 125, value: "value3", name: "Name2" }, { id: 126, value: "value4", name: "Name2" }]

//initialize an empty array named names
let names = [];

//iterate through every element of `array` & check if it's 'name' key's value already in names array if not ADD it 
array.forEach(function(element) { if (names.indexOf(element.name) === -1) names.push(element.name) });
//or use tilde like this:
//array.forEach(function(element) { if (~names.indexOf(element.name)) names.push(element.name) });

console.log(names);

Toutefois, si la compatibilité est pas un problème utilisation ECMAScript 6's Set objet, array#map et Array.à partir de() méthodes comme ceci:

JS:

const array = [{ id: 123, value: "value1", name:"Name1" }, { id: 124, value: "value2", name: "Name1" }, { id: 125, value: "value3", name: "Name2" }, { id: 126, value: "value4", name: "Name2" }];

//iterate through every element from array using map and store it in Set(a Set won't have duplicates) then convert the Set back to Array(using Array.from)
let names = Array.from(new Set(array.map(element => element.name)));

console.log(names);

InformationsquelleAutor BlackBeard

C'est la façon dont je l'ai fait, en utilisant un tableau vide.

JS:

var array = [
   {id:123, value:"value1", name:"Name1"},
   {id:124, value:"value2", name:"Name1"},
   {id:125, value:"value3", name:"Name2"},
   {id:126, value:"value4", name:"Name2"}	    
];

var array2 = []		
		
for (i=0; i<array.length;i++){						
   if (array2.indexOf(array[i].name) == -1){				
     array2.push(array[i].name);
    }
}			

console.log(array2)

InformationsquelleAutor Abhishek Gurjar

-1

Pour ceux qui cherchent un 1 liner

const names = array.reduce((acc, {name}) => acc.includes(name) ? acc : [name, ...acc], []);

ou sans l'aide de méthodes sur le tableau du prototype

const { reduce, includes } = Array;
const names = reduce(array, (acc, {name}) => includes(acc, name) ? acc : [name, ...acc], []);

pourrait être utile pour l'écriture de certaines fonctions pures pour faire face à cette

const get_uniq_values = (key, arr) => reduce(arr, (a, o) => includes(a, o[key]) ? a : [o[key], ...a], []);

InformationsquelleAutor Tyrell

-1

var __array=[{id:123, value:"value1", name:"Name1"},{id:124, value:"value2", name:"Name1"},{id:125, value:"value3", name:"Name2"},{id:126, value:"value4", name:"Name2"}];

function __checkArray(__obj){
    var flag = true;
    for(let i=0; i < __array.length; i++){
        if(__obj.id == __array.id){
            flag = false;
            break;
        }
    }

    return flag;
}

var __valToPush = {id: 127, value: "value5", name: "Name3"};
if(__checkArray(__valToPush)){
    __array.push(__valToPush)
}

avez-vous une raison particulière d'utiliser autant de traits de soulignement?

InformationsquelleAutor AKHIL

Vous devez vous connecter pour publier un commentaire.