ES10 中的 Object.fromEntries() 妙用

当我们在操作对象 key或value的时候，有如下表的方法

Object.keys()	生成一个对象key的数组
Object.values()	生成一个对象value的数组
Object.entries()	生成一个对象 key和value的二维数组
Object.fromEntries()	将 Object.entries()生成的二维数组专成对象

这里我们重点讲一下 ES10 新提出的 Object.fromEntries()这个方法。

首先是Object.entries()的逆方法

const obj = {
    name: 'cherry',
    age: 28
}
const objEntries = Object.entries(obj)
console.log(objEntries)
// [Array(2), Array(2)]

// ES10
const objFromEntries = Object.fromEntries(objEntries)
console.log(objFromEntries)
// {name: "cherry", age: 28}

其次是可以将Map进行转换

const map = new Map()
map.set('name', 'cherry')
map.set('age', 28)
console.log(map) // {'name' => 'cherry', 'age' => 28}

const objFromEntries = Object.fromEntries(map)
console.log(objFromEntries)
// {name: "cherry", age: 28}

再 一个妙用就是过滤对象

const studentScore = {
    zhangsan: 60,
    lisi: 65,
    wangwu: 59
}
const filtersVal = Object.entries(studentScore).filter(([key, val]) => val >= 60)
console.log(filtersVal) // [[ 'zhangsan', 60 ], [ 'lisi', 65 ]]
console.log(Object.fromEntries(filtersVal)) // { zhangsan: 60, lisi: 65 }

最后的一个妙用就是解析 url search 参数

// let url = "https://www.baidu.com?name=cherry&age=28&sex=male"
// search 为 window.location.search
const search = "?name=cherry&age=28&sex=male";
const sParams = new URLSearchParams(search);
const paramObj = Object.fromEntries(sParams);
console.log(paramObj); // { name: 'cherry', age: '28', sex: 'male' }