ES10 の Object.fromEntries() の詳細な分析

この記事では、ES10 の Object.fromEntries() について詳しく説明します。一定の参考値があるので、困っている友達が参考になれば幸いです。

Object.entries() がオブジェクトを、独自の列挙可能なプロパティのキーと値のペアの配列に変換することがわかっています。同様に、キーと値のペアの配列をオブジェクトに変換することもできます。

const keyValuePair = [
  ['cow', '?'],
  ['pig', '?'],
]

Object.fromEntries(keyValuePair);
// { cow: '?', pig: '?' }

Object.fromEntries

---

以下に示すように、オブジェクト構造はキーと値の組み合わせであることがわかります。
このロジックに基づくと、何かをオブジェクトに変換したい場合は、

key と value

を渡す必要があります。 これらの要件を満たすパラメーターには 2 つのタイプがあります:

ネストされたキーと値のペアを持つ配列
マップ オブジェクト
[推奨学習:

JavaScript 上級チュートリアル

]

Object.fromEntries を使用して、配列を次のように変換します。 Object

次は、キーと値のペアのネストされた配列です。

---

const object = {
  key: 'value',
};

Object.fromEntries

を使用して、配列をオブジェクト: <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>const nestedArray = [ [&amp;#39;key 1&amp;#39;, &amp;#39;value 1&amp;#39;], [&amp;#39;key 2&amp;#39;, &amp;#39;value 2&amp;#39;] ]</pre><div class="contentsignin">ログイン後にコピー</div></div>

Object.fromEntries を使用して Map をオブジェクトに変換します

ES6 は

---

map というファイルを提供します

の新しいオブジェクト。このオブジェクトによく似ています。
TC39: マップ オブジェクトはキーと値のペアのコレクションであり、キーと値の両方を任意の ECMAScript 言語値にすることができます。

Map

オブジェクトを作成しましょう:

Object.fromEntries(nestedArray);
// { key 1: "value 1", key 2: "value 2"}

Object.fromentries

を使用して map をオブジェクト # に変換しましょう##

// 使用构造函数
const map = new Map([
  ['key 1', 'value 1'],
  ['key 2', 'value 2']
])

// 或者我们可以使用实例方法“set”
const map = new Map()
map.set('key 1', 'value 1')
map.set('key 2', 'value 2')

// 结果
Map(2) {"key 1" => "value 1", "key 2" => "value 2"}

オブジェクトの型エラー:

Object.fromEntries

を使用して他の型をオブジェクトに変換しようとしています次の型を # に渡します##Object.fromEntries

ではエラー

---

caught TypeError

が発生します。

渡された値にキーと値のペアがあることを確認してください。

Object.fromEntries と Object.entries

Object.fromEntries

は

---

Object.entries

の逆です。 。 Object.entries() メソッドは、指定されたオブジェクト独自の列挙可能なプロパティのキーと値のペアの配列を返します。一方、Object.fromEntries() メソッドは、キーと値のリストを変換します。をペアにしてオブジェクトにします。

Object.fromEntries(map);
// { key 1: "value 1", key 2: "value 2"}

オブジェクトからオブジェクトへの変換

TC39 提案

を読むと、この新しいメソッドがここで紹介されています。理由。

---

Object.entries

が導入される前は、一部の非オブジェクト構造をオブジェクトに変換するのがさらに面倒でした。 通常、Object.entries
を使用することを選択するのは、

filter

などの多くの気の利いた配列メソッドにアクセスできるためです。しかし、変換を行った後、その配列で少し行き詰まってしまいます。 rreeeeわかりました!これらの便利な配列メソッドをすべて活用しながら、オブジェクトを返すことができます。最後に、オブジェクトからオブジェクトへの変換です。<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>const object = { key1: &amp;#39;value1&amp;#39;, key2: &amp;#39;value2&amp;#39; } const array = Object.entries(object) // [ [&quot;key1&quot;, &quot;value1&quot;], [&quot;key2&quot;, &quot;value2&quot;] ] Object.fromEntries(array) // { key1: &amp;#39;value1&amp;#39;, key2: &amp;#39;value2&amp;#39; }</pre><div class="contentsignin">ログイン後にコピー</div></div>

配列からオブジェクトへの代替品

Object.fromEntries

は ES10 プッシュです。これは非常に新しいものです。そしておそらくブラウザのサポートは十分フレンドリーです。それでは、キーと値の構造を持つ配列をオブジェクトに変換する方法を見てみましょう。

---

reduce メソッドを使用して配列をオブジェクトに変換する

配列をオブジェクトに変換する一般的な方法は、reduce# を使用することです。 ##。

const food = { meat: '?', broccoli: '?', carrot: '?' }

// ? 卡在这结果上...
const vegetarian = Object.entries(food).filter(
  ([key, value]) => key !== 'meat',
)
// [ ["broccoli", "?"], ["carrot", "?"] ]

ライブラリを使用して配列をオブジェクトに変換する

Lodash には、キーと値のペアをオブジェクトに変換するためのメソッドも用意されています。

#__.object

配列をオブジェクトに変換します。

[key, value]

ペアの単一リスト、またはキーのリストと値のリストを渡します。

const food = { meat: '?', broccoli: '?', carrot: '?' }

const vegetarian = Object.fromEntries(
  Object.entries(food).filter(([key, value]) => key !== 'meat'),
)

// { broccoli: '?', carrot: '?' }

#__.fromPairs

_.fromPairs

は

_.toPairs の逆で、そのメソッドは An を返します。キーと値のペアで構成されるオブジェクト。

const array = [
  ['key1', 'value1'],
  ['key2', 'value2']
]

const map = new Map([
  ['key1', 'value1'],
  ['key2', 'value2']
])

function toObject(pairs) {
  return Array.from(pairs).reduce(
    (acc, [key, value]) => Object.assign(acc, { [key]: value}),
    {}
  )
}


// 结果
// { key1: 'value1', key2: 'value2' }

ブラウザのサポート

---

##元のアドレス: https://medium.com/@samanthaming/javascript-object-fromentries-4395660334d1

著者: Shadeed

# #プログラミング関連の知識について詳しくは、プログラミング入門

をご覧ください。 ！

以上がES10 の Object.fromEntries() の詳細な分析の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。