Эквивалент Underscore _.pluck в чистом JavaScript

Я пытаюсь воссоздать функцию Unckcore pluck, используя чистую JS. Тем не менее, я продолжаю получать массив неопределенных значений, а не фактические значения из свойств объектов в массиве.

Проверяя еще один поток, я обнаружил, что вы можете воспроизвести его в jQuery со следующим кодом …

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

… однако мне трудно воспроизвести это в чистом JS. Я попробовал следующее, но это просто возвращает массив неопределенных значений для меня.

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

Таким образом, целью будет следующее: кроме использования подчеркивания _.pluck просто используйте имя функции JS, например. Var pluck = function (arr, key) {…}

 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"] 

Может ли кто-нибудь направить меня в правильном направлении?

  • Underscore.js: сумма элементов в коллекции
  • _.isFunction (a) void typeof a === 'function'? Javascript
  • Backbone.js: переписывание на JSON
  • Рендеринг коллекции Backbone.js в виде списка
  • Использование шаблонов Jade в Backbone.js
  • Группировка по сумме и сумме с помощью Underscore / Lodash
  • Запустить шаблон в шаблоне (рекурсия) в движке шаблона underscore.js
  • Есть ли indexOf в javascript для поиска массива с пользовательской функцией сравнения
  • 6 Solutions collect form web for “Эквивалент Underscore _.pluck в чистом JavaScript”

    Вы можете сделать это с помощью родного JavaScript .map() :

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

    Edit – изменение встроенных объектов прототипа должно выполняться с осторожностью; Лучший способ добавить функцию (если вы в порядке с идеей сделать это в целом) будет с Object.defineProperty чтобы он мог быть сделан неперечислимым:

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

    Вы так близки. Вам нужно изменить:

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

    чтобы:

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

    Учти это:

     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 

    Надеюсь, ты получишь мою мысль.

    В ES5:

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

    В ES6:

     function pluck(array, key) { return array.map(o => o[key]); } 
     var array = { name: ["Pedro", "João", "Francisco", "Diogo"], ID: [1,2,3,4] }; console.log(pluck(array,'name')); function pluck(array, key) { return (array[key]); }; 

    JSFiddle

    Вы можете использовать эту функцию, щелкнуть в JSFiddle, чтобы увидеть пример! 🙂

    Вот рабочее решение

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

    Я не очень сильно изменил это. Причина, по которой ваш код .key неудачно, заключается в том, что вы использовали оператор dot .key для доступа к именованному свойству элементов массива вместо оператора скобки [key] . При использовании ссылки в качестве ключа вам необходимо использовать оператор скобки.

    Как насчет сокращения:

     $.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'] 
    JavaScript делает сайт умным, красочным и простым использованием.