Si un élément existe déjà dans un tableau, ne l'ajoutez pas à nouveau

Question

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 cela renvoie:

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

Comment puis-je mettre une condition à l'intérieur d' 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é.

Answer 1

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

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

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);

Answer 2

Si vous recherchez une solution JavaScript autre que ES 6 (pas de set), vous pouvez utiliser la méthode reduce du tableau :

 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); 

Answer 3

Personnellement, je ne vois pas pourquoi tout le monde s'emballe avec ES 6. Si c'était mon code, je préférerais supporter autant de navigateurs que possible.

 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); 

Answer 4

Vous pouvez également simplement combiner map avec filter

 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) 

Answer 5

Vous pouvez faire un Tableau.le prototype.carte() pour obtenir un tableau avec les objets, name de la propriété et de la Matrice.le prototype.filtre() en utilisant les paramètres elem, index et array, dans la fonction de prédicat, à éliminer la répétition des éléments:

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);