在ES6和ES8中,Javascript世界已经引入了Object.entries()和Object.values()方法来帮助前端开发人员处理对象的键值对。现在,ES10中又新增了一个新方法,叫做Object.fromEntries()。本文将详细介绍它们的用法和区别,以及深入探究它们的学习和指导意义。
Object.entries()和Object.values()
在介绍Object.fromEntries()之前,我们先来看看它的前身Object.entries()和Object.values()。这两个方法在ES6中被引入,用来获取对象的键值对和对应的值。例如:
----- --- - - ----- -------- ---- --- ------- -------- -- --------------------------------- -- ------- --------- --------- ------- ---- ---------- ---------- -------------------------------- -- ------- --------- --- ---------
你会发现Object.entries()可以返回一个数组,其中包含对象的每个属性的键值对,而Object.values()只返回对象所有属性的值。这两个方法可以帮助我们更加方便快捷地获取对象的内容,而不必再写出一堆循环语句。
Object.fromEntries()
Object.fromEntries()是ES10中新增的方法,它可以将由键值对数组组成的二维数组转换为一个对象。例如:
----- --- - --------- --------- ------- ---- ---------- ----------- ------------------------------------- -- ------- ------ -------- ---- --- ------- ---------
与Object.entries()互为补充,当我们需要将二维数组转换为对象时,可以用Object.fromEntries()方法,而不必再采用手动构建对象的方式。
Object.fromEntries()的指导意义
从上面的例子我们可以发现,如果我们想要对一个对象进行深度拷贝并赋值另给一个变量名,那么原本顶层对象深度引用的属性(对象属性)在普通对象里的使用会遇到赋值一改全局的问题.也就是说,下面的代码是有“问题”的,并不符合我们的期望:
--- --- - -------------- --- ------ - --- ----------- - ------- ---------------- -- --------------
用spread operator可以进行浅拷贝:
--- --- - -------------- --- ------ - -------- ----------- - ------- ---------------- -- -------------- ------------------- -- --------------
但是spread operator也拷贝不了对象属性。所以如下情况还是“改了一处,全局改了”:
--- --- - ------------------------ ------------------- --- ------ - -------- -------------------- - ----- ---------------- -- ---------------------- ------------------- ------------------- -- ---------------------- -------------------
有了Object.fromEntries():
--- --- - ------------------------ ------------------- --- ------ - ------------------------------------------------------------------- -------------------- - ----- ---------------- -- ------------------------ ------------------- ------------------- -- ---------------------- -------------------
也可以使用更深入的库帮助我们实现深拷贝的功能,例如lodash、immer等. 但是,当我们不想引入过多的库时,使用Object.fromEntries()可以高效、简便地实现对象的深度拷贝。
总结
- Object.entries()和Object.values()方法已经在ES6中引入,并成为了我们处理对象键值对和值的重要工具。
- Object.fromEntries()方法是ES10中新增的方法,可以将由键值对数组组成的二维数组转换为一个对象,从而实现对象的深度拷贝。
如果你对深入理解和学习ES6和ES10有兴趣,可以参考我写的笔记。
来源:JavaScript中文网 ,转载请联系管理员! 本文地址:https://www.javascriptcn.com/post/6451d6b8675af4061b59578e