JavaScript で知らない Object.entries の使い方

序文

通常、Object クラスでは Object.keys、Object.values、Object.assign などの静的メソッドをよく使用しますが、Object.entries メソッドを使用することはほとんどありません。この記事では、Object.entries メソッドに関する 2 つのヒントを説明します。

効果

Object.entries() メソッドは、指定されたオブジェクトの列挙可能なプロパティのキーと値のペアの配列を、for…in ループによって返されるのと同じ順序で返します (違いは、for-in ループはプロトタイプ チェーン内のプロパティも列挙することです)。

例

const obj = { foo: 'bar', baz: 42 };
console.log(Object.entries(obj)); // [ ['foo', 'bar'], ['baz', 42] ]

// 配列のようなオブジェクト
定数obj = { 0: 'a', 1: 'b', 2: 'c' };
console.log(Object.entries(obj)); // [ ['0', 'a'], ['1', 'b'], ['2', 'c'] ]

// ランダムなキー順序を持つ配列のようなオブジェクト
定数 anObj = { 100: 'a', 2: 'b', 7: 'c' };
console.log(Object.entries(anObj)); // [ ['2', 'b'], ['7', 'c'], ['100', 'a'] ]

// getFoo は列挙できないプロパティです
const myObj = Object.create({}, { getFoo: { value() { return this.foo; } } });
myObj.foo = 'bar';
console.log(Object.entries(myObj)); // [ ['foo', 'bar'] ]

// 非オブジェクト引数はオブジェクトに強制変換されます
console.log(Object.entries('foo')); // [ ['0', 'f'], ['1', 'o'], ['2', 'o'] ]

// キーと値をうまく反復処理する
定数obj = { a: 5, b: 7, c: 9 };
Object.entries(obj) の (const [キー、値]) {
  console.log(`${key} ${value}`); // "a 5", "b 7", "c 9"
}

// または、配列の追加機能を使用する
Object.entries(obj).forEach(([キー, 値]) => {
console.log(`${key} ${value}`); // "a 5", "b 7", "c 9"

1. 共通オブジェクトを反復処理するには for...of を使用します

フロントエンドの初心者の多くは、次のようなコードを書いたことがあるかもしれません。

obj = {
  a: 1、
  2 倍
}

for (let objの値) {
  // ...
}

しかし、実行すると、エラーが報告されることがわかります。

キャッチされない TypeError: obj は反復可能ではありません

したがって、通常のオブジェクトのトラバースは、トラバースの均一化になります。ただし、 for...in はオブジェクト自身のプロパティを走査するだけでなく、オブジェクトのプロトタイプも走査するため、使用時にフィルターを追加する必要もあります。次に例を示します。

for (let key in obj) {
  Object.prototype.hasOwnProperty.call(obj, key) の場合 {
    // ...
  }
}

これはあまりエレガントではないことがわかります。通常のオブジェクトを for...of を使用して走査できない理由は、通常のオブジェクトがイテレータ インターフェースを実装していないためです (JS イテレータについては特別な記事を書く予定です)。 JS 配列はイテレータ インターフェイスを実装しているため、Object.entries を通じて取得されたキーと値の配列は for...of を使用して走査できます。

Object.entries(obj) の (let [キー, 値]) {
  // ...
}

Object.entries は、プロトタイプのプロパティを除く、オブジェクト自身の列挙可能なプロパティのキーと値のペアの配列を返します。

2. 通常のオブジェクトとMapオブジェクト間の変換

プロジェクトでは、通常のオブジェクトを Map オブジェクトに変換し、トラバーサルで引き続き使用していることがわかりました。

obj = {
  a: 1、
  2 倍
}

map = new Map();

for (let key in obj) {
  Object.prototype.hasOwnProperty.call(obj, key) の場合 {
    map.set(キー、obj[key]);
  }
}

実際、Map コンストラクターは初期化のためにキーと値のペアの配列を受け入れることができるため、Object.entries を使用して通常のオブジェクトを Map オブジェクトに変換できます。

map = new Map(Object.entries(obj)); を作成します。

では、Map オブジェクトを通常のオブジェクトに戻すにはどうすればよいでしょうか?まだトラバーサルを使用していますか?いいえ、Object.fromEntries 静的メソッドを使用して変換できます。

obj = Object.fromEntries(map); とします。

この時点では、通常のオブジェクト、キーと値のペアの配列、および Map オブジェクト間の変換関係をまだ理解していない方も多いかもしれません。図でまとめます。

Object.entriesとObject.fromEntriesは2つの反対の操作です

要約する

皆さんが知らないJavaScriptのObject.entriesの使い方についての記事はこれで終わりです。より関連性の高いjsのObject.entriesの使い方については、123WORDPRESS.COMの過去の記事を検索するか、以下の関連記事を引き続きご覧ください。今後とも123WORDPRESS.COMをよろしくお願いいたします。

参照する

• Object.entries() - MDN ドキュメント
• Map() コンストラクター - MDN ドキュメント