オブジェクトのキーの配列を取得する


371

JavaScriptオブジェクトのキーを、jQueryまたは純粋なJavaScriptのいずれかの配列として取得したいと考えています。

これより冗長な方法はありますか?

var foo = { 'alpha' : 'puffin', 'beta' : 'beagle' };
var keys = [];
for (var key in foo) {
    keys.push(key);
}

4
を追加する以外にif(foo.hasOwnProperty(key))、それは私がやろうとしていることです。または、を使用します$.map
ロケットハズマット

10
しかし、Pythonicワンライナーの場合は...
Richard

古い質問なので、完全に答える価値はありませんが、いじくりたい人のために... jsfiddle.net/LR5D9/3このソリューションは、for var in xループをめちゃくちゃにするプロトタイプ宣言の問題を扱います
同期されていない14

回答:


618

使用Object.keys

var foo = {
  'alpha': 'puffin',
  'beta': 'beagle'
};

var keys = Object.keys(foo);
console.log(keys) // ['alpha', 'beta'] 
// (or maybe some other order, keys are unordered).

これはES5の機能です。つまり、最新のすべてのブラウザで機能しますが、レガシーブラウザでは機能しません

ES5-shimには、盗むことができる実装がありObject.keysます


5
注:これは最新のブラウザでのみ機能します(つまり、IE <9ではありません)。
ロケットハズマット2012年

2
そして、モバイルブラウザはどうですか?
Marwen Trabelsi 2014

1
@SmartyTwiti:よくわかりません。私はそれがChromeやFirefoxのようにそうだと思います。
ロケットHazmat 14

MDNは、上記のポリフィルを参照していますが、ノートのIE7のバグと多分8は、その後、ここでははるかに短いポリフィルをオフ指し:tokenposts.blogspot.com.au/2012/04/...
Campbeln

では、ES5の前にこれをどのように行ったのでしょうか。
Andrew S

59

jQueryのを使用できます$.map

var foo = { 'alpha' : 'puffin', 'beta' : 'beagle' },
keys = $.map(foo, function(v, i){
  return i;
});

またはeach、あなたが彼らと何かをしているなら。$.each(foo, function(index, value){/* do something with index */});
Chris

33

もちろん、オブジェクトのキーを取得するためObject.keys()最良の方法です。ご使用の環境で使用できない場合は、例のようなコードを使用して簡単にシムできます(ただし、Object.keys()の動作とは異なり、ループがプロトタイプチェーンのすべてのプロパティを反復処理することを考慮する必要があります)。

しかし、あなたのサンプルコード...

var foo = { 'alpha' : 'puffin', 'beta' : 'beagle' };
var keys = [];
for (var key in foo) {
    keys.push(key);
}

jsFiddle

...変更できます。変数部分で直接代入できます。

var foo = { 'alpha' : 'puffin', 'beta' : 'beagle' };
var keys = [], i = 0;
for (keys[i++] in foo) {}

jsFiddle

もちろん、この動作はObject.keys()実際に行うこと(jsFiddle)とは異なります。MDNドキュメントでシムを使用するだけで済みます。


8
私はこれが好きvar keys = [], i = 0; for (keys[i++] in foo) {}+1
Jashwant

「for in」は順序を保証しないと聞きましたが、Object.keysがそうかどうか知っていますか?
クリススティーブンス

@ChrisStephensキーが順序付けられた配列になる場合でも、どちらの順序も保証されません。
アレックス

2
これらのソリューションはすべてhasOwnProperty()チェックが必要ですか?
同期されていない2014

1
@TIMINeutronそれがいけない理由はありません:)
alex

7

冗長度が低いことはわかりませんが、ワンライナーリクエストによって以下を1行に強制するように促されました。Pythonicがどの程度かはわかりませんが;)

var keys = (function(o){var ks=[]; for(var k in o) ks.push(k); return ks})(foo);

3
多分それはvar enumerableKeysOnThePrototypeChain;)
アレックス

1
オブジェクトがどこか他の場所からインポートされるのではなく、完全に私たちの管轄下で作成されている場合、hasOwnPropertyについて心配する必要がないことを知るのに十分賢いかもしれません
Dexygen

@alexの2番目の回答(for (keys[i++] in foo) {})ほどpythonicではありませんが、これはまだ実行しているためですArray.push()(関数全体の宣言は言うまでもありません)。Pythonicの実装は、ラムダ式を使用して、可能な限り暗黙の内包に依存し、それに失敗する必要があります。
カウベルト2017

4

ここで、n深度のネストされたオブジェクトのキーをフラット配列としてリストするものを探している場合:

const getObjectKeys = (obj, prefix = '') => {
  return Object.entries(obj).reduce((collector, [key, val]) => {
    const newKeys = [ ...collector, prefix ? `${prefix}.${key}` : key ]
    if (Object.prototype.toString.call(val) === '[object Object]') {
      const newPrefix = prefix ? `${prefix}.${key}` : key
      const otherKeys = getObjectKeys(val, newPrefix)
      return [ ...newKeys, ...otherKeys ]
    }
    return newKeys
  }, [])
}

console.log(getObjectKeys({a: 1, b: 2, c: { d: 3, e: { f: 4 }}}))


1

概要

オブジェクトのすべてのキーを取得するために使用できますObject.keys()Object.keys()オブジェクトを引数として取り、すべてのキーの配列を返します。

例:

const object = {
  a: 'string1',
  b: 42,
  c: 34
};

const keys = Object.keys(object)

console.log(keys);

console.log(keys.length) // we can easily access the total amount of properties the object has

上記の例では、キーの配列をキーのconstに格納します。次に、keys配列の長さをチェックすることで、オブジェクトのプロパティの量に簡単にアクセスできます。

値を取得する: Object.values()

の補完機能はObject.keys()ですObject.values()。この関数は、オブジェクトを引数として取り、値の配列を返します。例えば:

const object = {
  a: 'random',
  b: 22,
  c: true
};


console.log(Object.values(object));


1

Underscore.jsを使用する場合は、

var foo = { 'alpha' : 'puffin', 'beta' : 'beagle' };
var keys = [];
_.each( foo, function( val, key ) {
    keys.push(key);
});
console.log(keys);
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.