利用 ES10 中的 Object.getOwnPropertyDescriptors() 方法进行对象克隆和拷贝
前言:
近几年,JavaScript 以其轻量化、高效率,以及在 Web 应用、Node.js 方面优越的开发场景及其逐渐强大的语法特性逐渐成为互联网前端 入门语言。较新版本的 ES6/ES7/ES8/ES9/ES10 等,不仅增加了对箭头函数、解构赋值、模板字面量、可选参数、展开运算符、Promise、Async/Await 等多个语法特性,而且为对象的操作提供了更多更丰富的方法。其中,最为实用的便是利用 ES10 中新增的 Object.getOwnPropertyDescriptors() 方法,实现对象的克隆和拷贝。
正文:
Object.getOwnPropertyDescriptors() 方法返回一个给定对象所有自有属性(包括可枚举和不可枚举属性,但不包括 Symbol 值作为名称的属性)的描述符。通过 Object.getOwnPropertyDescriptors() 方法可以获取源对象的所有属性的描述符,与该对象的原型无关,从而实现了真正的对象克隆和拷贝。
以下代码示例为使用 ES10 新增的 Object.getOwnPropertyDescriptors() 方法的用法:
const obj = { foo: 123 } const clone = Object.defineProperties({}, Object.getOwnPropertyDescriptors(obj))
以上代码就是对 obj 物件使用 Object.defineProperty 监听,同时在 defineProperties 这个静态方法的第二个参数内,我们调用 Object.getOwnPropertyDescriptors 方法,完美获取 obj 物件以及其所有属性的描述符,并存到新生成的 clone 物件中。
在上面的示例代码中,我们使用 Object.defineProperty 方法监听,但也可使用 Object.defineProperties 方法扩展更多定义。通常情况下,我们也可以通过 Object.setPrototypeOf(clone, Object.getPrototypeOf(obj)) 将 clone 对象与其原型连接起来。然后,我们就可以专注于仅替换某些原始属性,而不丢失原型。
Object.getOwnPropertyDescriptors() 方法的使用不仅限于对象克隆和拷贝,也可用于各种对象操作。例如,可以使用此方法将源对象的属性添加/删除,或者将其更改为不可写或不可配置等。本篇文章不仅仅是对如何使用该方法进行了简单的讲解,它还为您提供了一种更好的方式,帮助将该方法应用到实际项目中。
总结:
通过 ES10 中 Object.getOwnPropertyDescriptors() 方法进行对象的克隆和拍照,具有很高的实用性,无需自定义函数,可以快捷、方便地实现对象的操作。本文同时也是为那些初学者提供了一种新的使用其 JavaScript 的方式。了解该方法的基本原理,使用场景以及内部实现机制,可以帮助实现高效的代码设计和编写。JavaScript 的变革是连续不断地,因此我们必须随时学习和掌握新的语法特性和新功能,以保持前沿的能力和在行业上的竞争优势。
来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/65ab2cfcadd4f0e0ff4cab15