web-dev-qa-db-fra.com

Equivalent de Underscore _.pluck en JavaScript pur

J'essaie de recréer la fonction de soulignement de soulignement à l'aide de JS pur. Cependant, je continue à recevoir un tableau d'indéfinis renvoyé, au lieu des valeurs réelles des propriétés des objets d'un tableau. 

Vérifier un autre fil ici J'ai découvert que vous pouviez le reproduire en jQuery avec le code suivant ...

$.pluck = function(arr, key) { 
    return $.map(arr, function(e) { return e[key]; }) 
}

... mais j'ai du mal à reproduire cela en pur JS. J'ai essayé ce qui suit, cependant, cela ne fait que renvoyer un tableau d'indéfinis pour moi. 

var pluck = function(arr,key){
  var newArr = [];
  for (var i = 0, x = arr.length; i < x; i++){
    if (arr[i].hasOwnProperty(key)){
      newArr.Push(arr[i].key)
    }
  }
  return newArr;
}

Ainsi, l'objectif serait le suivant, sauf qu'au lieu d'utiliser le trait de soulignement _.pluck, utilisez simplement un nom de fonction JS, par exemple. var pluck = fonction (arr, clé) {...}

var Tuts = [{name : 'NetTuts', niche : 'Web Development'}, {name : 'WPTuts', niche : 'WordPress'}, {name : 'PSDTuts', niche : 'PhotoShop'}, {name : 'AeTuts', niche : 'After Effects'}];
var niches = _.pluck(Tuts, 'niche');

console.log(niches);

// ["Web Development", "WordPress", "PhotoShop", "After Effects"]

Quelqu'un pourrait-il me guider dans la bonne direction?

javascriptarraysunderscore.js
18
wesleysmyth

Dans ES5:

function pluck(array, key) {
  return array.map(function(obj) {
    return obj[key];
  });
}

En ES6: 

function pluck(array, key) {
  return array.map(o => o[key]);
}
21
Gilles Castel

Vous pouvez le faire avec la .map() JavaScript native:

Array.prototype.pluck = function(key) {
  return this.map(function(object) { return object[key]; });
};

edit - la modification des objets prototypes intégrés doit être effectuée avec soin; Un meilleur moyen d'ajouter la fonction (si vous êtes d'accord avec l'idée de le faire en général) serait avec Object.defineProperty afin qu'il puisse être rendu non énumérable:

Object.defineProperty(Array.prototype, "pluck", {
    value: function(key) {
        return this.map(function(object) { return object[key]; });
    }
});
13
Pointy

Tu es si proche. Vous devez changer:

newArr.Push(arr[i].key);

à:

newArr.Push(arr[i][key]);

Considère ceci:

var obj = { myKey: 'my Value', theKey: 'another value' };
var theKey = 'myKey';

alert(obj.theKey); // another value
alert(obj[theKey]); // my Value
// You can also send in strings here:
alert(obj['theKey']); // another value

J'espère que vous obtenez mon point.

7
andlrc

Que diriez-vous d'une réduction:

$.pluck = function(arr, key) { 
    return arr.reduce(function(p, v) { 
      return p.concat(v[key]); 
    }, []); 
}

var people = [
  { name: 'James', age: 26 }, 
  { name: 'Fred', age: 56 }
];

$.pluck(people, 'age');
=> [26, 56]

$.pluck(people, 'name');
=> ['James', 'Fred']
0
Jivings

Voici une solution de travail

function pluck(array,key){
  var a = [],
     i1 = -1, i2 = array.length,
      o ;

    while(++i1 < i2)
    {
        o = array[i1] ; // you have to use the bracket operator here
        if(o.hasOwnProperty(key)) a[a.length] = o[key] ;
    }
  return a ;
}

Je n'ai pas vraiment beaucoup changé. La raison pour laquelle votre code a échoué est due au fait que vous avez utilisé l'opérateur de point .key pour accéder à la propriété nommée des éléments du tableau au lieu de l'opérateur de crochet [key]. Lorsque vous utilisez une référence comme clé, vous devez utiliser l'opérateur de support.

0
FK82