前言
随着 JavaScript 的不断发展,ES12(ECMAScript 2021)已经发布。在新的规范中,Object、Map 和 Set 这三个数据结构得到了优化和增强。本文将重点介绍在前端开发中,Object、Map 和 Set 的实战应用。
Object
Object 是 JavaScript 中最常见的数据类型之一。在 ES12 中,Object 新增了一些实用的方法,包括 Object.fromEntries()
和 Object.prototype.__proto__
。
Object.fromEntries()
Object.fromEntries()
可以将一个数组转化成一个对象。该数组必须为键值对数组,如:
----- --- - ------ --- ----- --- ----- ---- ----- --- - ------------------------ -- --- -- -- -- -- --
一个实际的应用场景是将 URLSearchParams 转化为对象:
----- ------------ - --- -------------------------------- ----- --- - ------------------------------------------- -- --- ---- -- ---- -- ----
Object.prototype.proto
在 ES6 之前,我们可以使用 Object.getPrototypeOf()
方法获取一个对象的原型(prototype)。在 ES6 中,我们可以使用 Object.setPrototypeOf()
方法设置一个对象的原型。而在 ES12 中,我们可以使用 __proto__
直接访问一个对象的原型,也可以设置该对象的原型:
----- --- - - -- - -- ----- -------- - - -- - -- ------------- - --------- ------------------- -- - ----- ------ - - -- - -- ---------------- - ---- ---------------------- -- - ---------------------- -- -
需要注意的是,虽然 __proto__
在 Chrome 和 Firefox 中已经得到了支持,但是在其他浏览器中使用该属性仍然存在兼容性问题。
Map
Map 是一种新的数据结构,它可以存储键值对,其中键可以是任意类型。在 ES12 中,Map 新增了一些实用的方法,包括 Map.prototype.upsert()
和 Map.prototype.groupBy()
。
Map.prototype.upsert()
Map.prototype.upsert()
可以向 Map 中插入或更新一个值。如果插入到 Map 中的键已经存在,则更新该键对应的值;反之则插入一个新的键值对。该方法可以用于记录出现次数:
----- --- - ----- ---- ---- ---- ---- ----- ----- --- - --- ------ ------------------ -- - ---------------- -- ----- -- --- - --- --- ----------------- -- ------ - --- -- -- --- -- -- --- -- - -
以上代码中,map.upsert()
方法的第一个参数为键,第二个参数为默认值,第三个参数为更新函数。
Map.prototype.groupBy()
Map.prototype.groupBy()
可以对数组进行分组,生成一个 Map。该方法接受一个回调函数,用于确定每个元素所属的组。
----- --- - - - --- -- ----- ------- -- - --- -- ----- ----- -- - --- -- ----- --------- -- - --- -- ----- ----- -- -- ----- --- - ------------------ -- ----------- ----------------- -- ------ - -- ------- -- - - --- -- ----- ------- - -- -- ----- -- - - --- -- ----- ----- -- - --- -- ----- ----- - -- -- --------- -- - - --- -- ----- --------- - - -- -
以上代码中,arr.groupBy()
方法的回调函数返回每个元素所属的组。
Set
Set 是一种新的数据结构,它可以存储不重复的值。在 ES12 中,Set 新增了一些实用的方法,包括 Set.prototype.intersection()
和 Set.prototype.difference()
。
Set.prototype.intersection()
Set.prototype.intersection()
可以根据多个集合求交集。
----- ---- - --- ------- -- ---- ----- ---- - --- ------- -- ---- ----- ---- - --- ------- -- ---- ----- ------ - ----------------------- ------ -------------------- -- ------ - - -
以上代码中,set1.intersection()
方法接受多个参数,用于求交集。
Set.prototype.difference()
Set.prototype.difference()
可以求两个集合的差集。
----- ---- - --- ------- -- ---- ----- ---- - --- ------- -- ---- ----- ------ - ---------------------- -------------------- -- ------ - - -
以上代码中,set1.difference()
方法接受一个参数,用于求差集。
总结
ES12 中,Object、Map 和 Set 经过优化和增强后变得更加实用。本文介绍了它们的一些实战应用,可以帮助前端开发者提高代码的可读性和效率。需要注意的是,在使用一些新的特性时,应当关注兼容性问题,并结合实际情况进行选择。
来源:JavaScript中文网 ,转载请联系管理员! 本文地址:https://www.javascriptcn.com/post/645f2652968c7c53b013bc89