等價於純 JavaScript 中的下划線 _.pluck

Question

我正在嘗試使用純 JS 重新創建 Underscore pluck function。 但是，我一直在返回一個未定義的數組，而不是數組中對象屬性的實際值。

在這里檢查另一個線程，我發現您可以使用以下代碼在 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 function 名稱，例如。 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"]

有人可以引導我朝着正確的方向前進嗎？

Answer 1

在ES5中：

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

在ES6中：

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

Answer 2

你可以使用原生JavaScript .map()來做到這一點：

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

編輯 - 修改內置原型對象應該小心; 一個更好的方法來添加函數（如果您對一般這樣做的想法沒問題）將使用Object.defineProperty以便可以使其不可枚舉：

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

Answer 3

你是如此親密。 你需要改變：

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

希望你明白我的觀點。

Answer 4

這是一個執行_.pluck(Tuts, 'name');的例子

const Tuts = [{name : 'NetTuts', niche : 'Web Development'}, {name : 'WPTuts', niche : 'WordPress'}, {name : 'PSDTuts', niche : 'PhotoShop'}, {name : 'AeTuts', niche : 'After Effects'}];


const pluckedNames = Tuts.map(({ name }) => name);

如果在 object 中沒有name的情況下要刪除未定義的值，可以在之后使用.filter()

const pluckedNames = Tuts.map(({ name }) => name).filter(i => i);

Answer 5

非常簡單，無需使用方法：

 var pluck = function (arr, key) { var newArr = []; for (let i = 0; i < arr.length; i++) { newArr.push(arr[i][key]); } return newArr; };

Answer 6

這是一個有效的解決方案

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來訪問數組元素的命名屬性而不是括號運算符[key] 。 使用引用作為鍵時，需要使用括號運算符。

Answer 7

使用代理怎么樣？

f = new Proxy(x => x, {
    get: (_,prop) => x => x[prop]
})

這是一個執行 _.pluck(Tuts, 'name'); 的例子

const Tuts = [{name : 'NetTuts', niche : 'Web Development'}, {name : 'WPTuts', niche : 'WordPress'}, {name : 'PSDTuts', niche : 'PhotoShop'}, {name : 'AeTuts', niche : 'After Effects'}];
const pluckedNames = Tuts.map(f.name);

如果在object中沒有名字的情況下，想去除未定義的值，可以在之后使用a.filter()

const pluckedNames = Tuts.map(f.name).filter(f);

Answer 8

減少怎么樣：

$.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']

Answer 9

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查看一個例子!! :)