ES8 (ECMAScript 2017)引入了两个非常有用的方法:Object.entries() 和 Object.fromEntries()。在前端开发中,它们可以用来更方便、高效地操作对象和数组。
Object.entries()
Object.entries() 方法返回一个给定对象自身可枚举属性的键值对数组。它的语法如下:
Object.entries(obj)
其中,obj 表示要进行操作的对象。
返回的数组中,每个元素都是一个形如 [key, value] 的键值对数组。这些键值对 以对象原型链中枚举顺序排列,通常与手动循环对象属性时的顺序保持一致。
Object.entries() 方法的真正意义在于它能够帮助我们更轻松便捷地迭代对象属性。
示例代码:
-- -------------------- ---- ------- ----- ----- - --- -- -- -- -- --- --- ------ ----- ------ -- ---------------------- - -------------------- ----------- - -- ------- -- --- -- -- --- -- -- --- --
上述代码使用了一个 for of 循环,将对象myObj的每个属性值都解构成[key,value]键值对数组,最后打印出每个属性名和属性值。
Object.fromEntries()
相比较 Object.entries(),Object.fromEntries() 可能更容易被忽视,但它同样是非常有用的。它的作用是从键值对数组中返回一个新的对象。
它的语法如下:
Object.fromEntries(iterable)
其中,iterable 是一个以键值对数组为元素的可迭代对象,如 Map 或 Array 等。
示例代码:
const myEntries = [['a', 1], ['b', 2], ['c', 3]]; const myObj = Object.fromEntries(myEntries); console.log(myObj); // Output: { a: 1, b: 2, c: 3 }
上述代码用数组 myEntries 存储了三个键值对,然后用 Object.fromEntries() 方法将它转化为一个键名分别为 a、b、c,键值分别为 1、2、3 的新对象 myObj。
Object.fromEntries() 方法在由键值对构成的数组向对象的转换中非常方便,尤其是在数据的整合、格式化处理方面。
实践应用
实际开发中,经常会遇到将对象转换为数组,或者将数组转换为对象的场景。Object.entries() 和 Object.fromEntries() 方法的结合使用可以使这些场景变得更加简单。
比如,我们先将一个对象转换为数组,进行某些数据处理,然后再将结果转换为对象:
-- -------------------- ---- ------- ----- ----- - - -- -- -- -- -- - -- ----- --------- - ---------------------- -- ----------- ----- ---------------- - -------------------- ------- -- ------------------- ----- - ---- ----- --------- - ------------------------------------- ----------------------- -- ------- - -- -- -- -- -- - -
上述代码先将 myObj 对象转换为一个键值对数组 myEntries,并将这个数组分别进行了键名字母大小写转换和键值处理的操作,最后通过 Object.fromEntries() 方法,将处理后的键值对数组转换为一个新的对象 newObject。
总结
ES8 中新增的 Object.entries() 和 Object.fromEntries() 是常常被忽视的一些方法,但它们可以大大地提高代码的可读性和易用性。我们可以通过 Object.entries() 更容易地迭代对象属性,通过 Object.fromEntries() 更轻松便捷地将数组转换为对象,结合使用这两种方法,可以简化许多数据处理逻辑,提高代码的效率。
来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/645c83fe968c7c53b0eeba28