你需要了解的两个很少人知道但是好用ObjectAPI

1、Object.entries()

1.1 官网定义

Object.entries()方法返回一个给定对象自身可枚举属性的键值对数组，其排列与使用 for...in 循环遍历该对象时返回的顺序一致（区别在于 for-in 循环还会枚举原型链中的属性）

历史：很早就被许多浏览器支持了，包括IE

1.2 基础使用

const obj = {
  a: 'somestring',
  b: 42
};
Object.entries(obj)
/* 返回值
[
    ['a', 'somestring'],
    ['b', 42]
]
*/

2、Object.fromEntries()

2.1 官网定义

Object.fromEntries() 方法把键值对列表转换为一个对象。

历史：ES10 推出（即2019年）

2.2 基础使用

const obj = new Map([
  ['foo', 'bar'],
  ['baz', 42]
]);
Object.fromEntries(obj)	// { foo: "bar", baz: 42 }

3、使用场景

3.1 Map 转 Object

const map = new Map()
map.set('name', 'sishen')
map.set('age', 18)
console.log(map) // {'name' => 'jimmy', 'age' => 18}

Object.fromEntries(map)		// {name: "sishen", age: 18}

3.2 过滤器

const course = {
    math: 80,
    english: 85,
    chinese: 90
}
// 1 将对象转化为数组
const arr = Object.entries(course)
// 2 使用数组方法进行过滤
arr = arr.filter(([key, val]) => val > 80)
// 3 还原对象
Object.fromEntries(arr)		// { english: 85, chinese: 90 }

3.3 转化 url 参数

const queryString = "?name=jimmy&age=18&height=1.88";
// 工具类，方便处理路由参数
const queryParams = new URLSearchParams(queryString);
const paramObj = Object.fromEntries(queryParams);
// { name: 'jimmy', age: '18', height: '1.88' }

编辑 | sishen
来源 | 前端兔
公众号 | 前端兔

关注公众号查看更多前端知识分享~~