速くES 10のObject.from Entiesの使い方を調べてください.

2931 ワード

Object.from Entries方法は、1つのキーを配列に対して一つのオブジェクトに変換することです.
同じ方法はES 10におけるstage 4の提案にもなっている.
Object.entries
froom Entriesを紹介する前に、entriesの使い方を振り返ってみます.この方法は、オブジェクト自体の列挙可能な属性からなる行列を返します.
const obj = { a: '1', b: 2 }
Object.entries(obj)
new MapコンストラクタによってオブジェクトをMapに変換することもできます.
new Map(Object.entries(obj))
// Map(2) {"a" => "1", "b" => 2}
Object.from Enties
froom Entriesメソッドはちょうど反対で、配列をオブジェクトに変換します.
Object.fromEntries([['a', '1'], ['b', 2]])
もちろん、1つのMapにも入ってきて、オブジェクトに変換することができます.
const map = new Map().set('a', 1).set('b', 2)

Object.fromEntries(map)
いくつかの注意事項
入力されたパラメータに重複して出現するkeyがある場合:
froom Entriesに伝えられたパラメータは、重複したkeyが現れたら、後で採用されます.
Object.fromEntries([['a', '1'], ['a', '2']])
entriesはsmbolをkeyとしてサポートしていませんが、from Entiesはできます.
Object.fromEntries([[s, 1]])
Object.entries({ s: 1 })
上記のコードの効果は、entreisが受信したオブジェクトの中にsmbolがkeyとしてあると直接文字列に変換されます.
keyは文字列またはsmbol以外の種類で強制的に文字列に変換されます.
彼は任意のクラスの配列を受け取ることができます.例えば、Mapなど、さらにはカスタムのディレクタのオブジェクトがあります.
obj = {}
obj[Symbol.iterator] = function* () {
    yield [1, 11]
    yield [2, 22]
    yield [3, 33]
}

console.dir(Object.fromEntries(obj))
最後に、作成対象のみを巡回できる属性があります.
適用:フィルタのプロパティ
関数を定義して、この関数の最初のパラメータをオブジェクトとし、他のいくつかのパラメータを予約が必要な属性として受信します.
function foo(obj, ...keys) {
    return Object.fromEntries(Object.entries(obj)
        .filter(([key]) => keys.includes(key))
    )
}

console.table(foo({ name: 'oli', age: '12' }, 'name'))
アプリケーション:フォームの処理
私たちがこのようなデータを持っていると仮定します.
[{
    name: 'oli',
    age: 12
}, {
    name: 'troy',
    age: 14
}]
csv、sqlデータベーステーブルに充填する必要がある場合、データをフィルタするには次の方法が必要です.
arr = [{
    name: 'oli',
    age: 12
}, {
    name: 'troy',
    age: 14
}]

obj = Object.fromEntries(
    arr.map(({name, age}) => [name, age])
)

console.table(obj)
データのフィルタリングが終わったら簡単にExcel表に貼り付けられます.あるいは、データベースに保存しやすいです.
適用:属性と値を交換する
function foo(obj) {
    return Object.fromEntries(Object.entries(obj)
        .map(([key, value]) => [value, key])
    )
}

console.table({ name: 'oli', age: '12' })
console.table(foo({ name: 'oli', age: '12' }))
他にも配列法を使って実現される様々な機能がありますが、ここでは一つ一つ展示されていません.
適用:urlクエリー文字列をオブジェクトに変換します.
query = Object.fromEntries(new URLSearchParams('foo=bar&baz=qux'))
// {foo: "bar", baz: "qux"}
テスト環境
子供用の靴を試したいですが、chromeテスト版をダウンロードして、chromeブラウザのバージョンが73より大きいことを保証します.
参考:
  • https://www.chromestatus.com/...
  • https://github.com/tc39/propo...
  • http://2ality.com/2019/01/obj...
  • もっと注意: