web-dev-qa-db-ja.com

純粋なJavaScriptのUnderscore _.pluckに相当

純粋なJSを使用して、Underscore pluck関数を再作成しようとしています。ただし、配列内のオブジェクトのプロパティからの実際の値ではなく、未定義の配列が返され続けます。

別のスレッドの確認 here 次のコードを使用して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"]

誰かが私を正しい方向に導くことができますか？

javascriptarraysunderscore.js
22
wesleysmyth

ES5の場合：

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

ES6の場合：

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

ネイティブ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]; });
    }
});
14
Pointy

あなたはとても近いです。変更する必要があります：

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

あなたが私のポイントを得ることを願っています。

7
andlrc

リデュースはどうですか：

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

作業ソリューション

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]を使用して配列要素の名前付きプロパティにアクセスしたためです。参照をキーとして使用する場合は、ブラケット演算子を使用する必要があります。

0
FK82