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

1. Object.keys() メソッドを使用して JavaScript オブジェクトのキーを取得する
2. Object.entries(obj) メソッドを使用して JavaScript オブジェクトのキーを取得する
3. for ループを使用して javascript オブジェクトのキーを取得する

javascript オブジェクトは、キーと値のペアのコレクションです。javascript オブジェクトからその値を取得するためのキーが必要です。キーと値のペアは、クライアントサーバー通信と JavaScript プログラミングで広く使用されています。キーがあれば、JSON オブジェクトから値を取得することを認識しています。しかし、キーの名前がない場合はどうなりますか？Javsscript オブジェクトからその値を取得するにはどうすればよいですか？javascript オブジェクトからキーを取得するいくつかの方法を見てみましょう。

Object.keys() メソッドを使用して JavaScript オブジェクトのキーを取得する

Object.keys() 関数は、javascript オブジェクトのキーを含む配列を返します。javascript オブジェクトをパラメータとして Object.keys() 関数に渡します。出力配列には、元の javascript オブジェクトと同じ順序でキーが含まれています。配列を Object.keys() に渡すと、配列のインデックスが出力として返されます。また、パラメータオブジェクトにインデックスがある場合、Object.keys() はそれらのインデックスの配列を返します。Object.keys() 関数の使用法と動作を理解するには、次のコードを参照してください。

var fruitsArr1 = ['Apple', 'Orange', 'Mango', 'Banana'];
var fruitsObj2 = {0: 'Apple', 4: 'Orange', 2: 'Mango', 3: 'Banana'};
var fruitsObj3 = {'id': '1', 'name': 'mango', 'color': 'yellow'};
console.log(Object.keys(fruitsArr1));
console.log(Object.keys(fruitsObj2));
console.log(Object.keys(fruitsObj3));

出力：

["0", "1", "2", "3"]
["0", "2", "3", "4"]
["id", "name", "color"]

キーが数字の場合、Object.keys() 関数は数字キーの配列をソートされた順序で返します。fruitsObj2 には、0、4、2、3 の番号が付けられたキーがあります。ただし、Object.Keys() 関数を適用すると、キーは ["0", "2", "3", "4"] としてソートされた順序で返されます。Key-Value は、元の javascript オブジェクトの場合と同じ値マッピングを保持します。たとえば、fruitsObj2 は 4: "Orange"と 2: "Mango"を保持しますが、Object.keys(fruitsObj2) は順序を"2", "4"として返しました。キー2 と 4 の値が console.log の場合、正しい値が出力として取得されます。したがって、Object.keys が配列またはオブジェクトの数値キーをソートされた順序で返したとしても、関数は実際のキーと値のマッピングで何も変更していません。次のコードを参照してください。

console.log(fruitsObj2[2]);
console.log(fruitsObj2[4]);

出力：

Mango
Orange

Object.entries(obj) メソッドを使用して JavaScript オブジェクトのキーを取得する

Object.entries(obj) メソッドは多様であり、Object.keys() 関数よりも柔軟性があります。オブジェクト全体を小さな配列に分割します。各配列は、[key, value] の形式のキーと値のペアで構成されます。Object.keys() を使用すると、オブジェクトのキーのみを取得できますが、Object.entries(obj) を使用すると、keys とその values を含むオブジェクト内のすべてのエントリを取得できます。。Object.entries(obj) は一般的に使用されるメソッドではありません。ほとんどのシナリオでは、オブジェクトからキーを取得する必要があります。対応する値は、キーを使用して簡単に取得できます。

構文

Object.entries(object)

パラメーター

Object.keys() メソッドと同じように、Object.entries(obj) はパラメータとして javascript オブジェクトを受け入れます。

戻り値

Object.entries(obj) は、配列に破棄されたキーと値のペアを返します。戻り値の型は配列の配列であり、各サブ配列はキーと値の 2つの要素を保持します。[[key1, value1], [key2, value2], [key3, value3] ... ] のようなもの。この関数は、オブジェクト属性の順序を保持します。舞台裏での実装では、キーと値のペアは、オブジェクトのプロパティを反復処理することによって形成されます。Object.entries() 関数の動作をよりよく理解するには、次のコードを参照してください。JSON.stringify() を使用して、関数によって出力された値の人間が読める文字列バージョンを取得します。

var fruitsObj3 = {'id': '1', 'name': 'mango', 'color': 'yellow'};
console.log(JSON.stringify(Object.entries(fruitsObj3)));

出力：

"[["id","1"],["name","mango"],["color","yellow"]]"

Object.entries() を別の方法で使用できます。javascript オブジェクトを反復処理し、属性キーとその値をログに記録できます。このアプローチは、次のコードスニペットに示されているとおりです。

for (const [key, value] of Object.entries(fruitsObj3)) {
  console.log(`${key}: ${value}`);
}

出力：

id: 1
name: mango
color: yellow

Object.entries() 関数からキーだけを取得することに関心がある場合は、キーをログに記録して値の部分を破棄できます。

for ループを使用して javascript オブジェクトのキーを取得する

単純な for ループを使用してオブジェクトからキーを取得できますか？これは、for ループの一般的に知られている機能ではありません。for-in の組み合わせを使用して配列の場合と同じように、任意の javascript オブジェクトを反復処理できます。オブジェクトのキーを保持する i（イテレータ）とオブジェクトのキーに対応する値を保持する object[i] を使用して、各パラメータを反復処理します。概念をよりよく理解するために、次のコードを見てみましょう。

var obj = {'id': '1', 'name': 'mango', 'color': 'green'};
for (let i in obj) {
  console.log(i);       // key
  console.log(obj[i]);  // value against the key
}

出力：

id
1
name
mango
color
green

var a = {
  'id': '1',
  'name': 'mango',
  'color': {'name': 'yellow', 'appearance': 'bright'}
};
for (let i in a) {
  console.log(i);
  console.log(a[i]);
}

出力：

id
1
name
mango
color
{name: "yellow", appearance: "bright"}