Object 是 ECMAScript 中最常用的数据类型之一，很适合存储和在应用程序之间交互数据。Object 定义一组属性的无序集合，可以将其想象成一张散列表，其中的内容就是一组名/值对，值可以是数据或者函数。 而数组是一个有序集合，为了保证元素排列有序，相比 Object 来说会占用更多的内存空间。
本文将介绍 Object 使用中将用得到的方法。
1. Object.defineProperty
在了解 JavaScript 对象之前先来了解一下 Object 中的 defineProperty 方法是什么。当一个对象在初始处理过程中由引擎创建时，JavaScript 将基本属性赋予新创建的对象，以处理来自外部的请求，例如访问或删除属性。
可以修改或设置的属性如下：
value ： 属性的值
enumerable ：如果为 true，则该属性可通过 for-in 循环或 Object.keys() 进行搜索，默认为 false 。
writable ：如果为 false，则无法修改该属性，它在严格模式下引发错误，默认为 false 。
可配置 ： 如果为 false，则这会使对象的属性不可枚举、不可写、不可删除和不可配置，默认为false 。
get ： 当尝试访问该属性时提前调用的函数，默认为 undefined。
set ： 当尝试为属性设置某个值时提前调用的函数，默认为 undefined。
下面来看一些简单的代码：
可枚举
const obj = {};Object.defineProperty(obj, "a", { value: 100, enumerable: false,});for (const key in obj) { console.log(key);}// 未定义Object.keys(obj);// []
复制代码
可写
const obj = {};Object.defineProperty(obj, "a", { value: 100, writable: false,});obj.a = 200;obj.a === 100; // 真的(() => { "use strict"; obj.a = 100; // 严格模式下的类型错误})();
复制代码
可配置
const obj = {};Object.defineProperty(obj, "a", { value: 100, configurable: false,});// 1. non-enumerablefor (const key in obj) { console.dir(key);}// undefinedObject.keys(obj);// [// 2. non-writable(() => { "use strict"; obj.a = 200; // TypeError in the strict mode})();// 3. non-deletabledelete obj.a;obj.a === 100; // true
复制代码
但是，当 writable 或 enumerable 为 true 时，将忽略 configure:false 。
2. Object.freeze()
Object.freeze() 方法可以防止对象中的数据被修改，即冻结一个对象，这样不能向这个对象 添加、更新或删除属性。
语法
返回值
返回被冻结的对象。
实例
const author = { name: "Quintion", city: "Shenzhen", age: 18, validation: true,};
Object.freeze(author);
author.name = "QuintionTang";author.province = "Guangdong";delete author.age;console.log(author); // { name: 'Quintion', city: 'Shenzhen', age: 18, validation: true }
复制代码
如上面的代码，更新属性name、新增属性province、删除属性age，最终对象都没有任何改变。
3. Object.seal()
Object.seal() 方法有点类似于 Object.freeze() 。阻止向对象添加新的属性和删除属性，但允许更改和更新现有属性。
语法
返回值
返回被密封的对象。
实例
const author = { name: "Quintion", city: "Shenzhen", age: 18, validation: true,};
Object.seal(author);
author.name = "QuintionTang";author.province = "Guangdong";delete author.age;console.log(author); // { name: 'QuintionTang', city: 'Shenzhen', age: 18, validation: true }
复制代码
从上面代码可以看到，新增属性和删除属性都无效，只有更新属性name生效了。
Object.Seal() 和 Object.freeze()
谈到 Object.seal 和 Object.freeze 就不得不谈到数据的可变性，数据不变性在编程语言中一直非常重要，在 JavaScript 中也是如此。Object.freeze 和 Object.seal 方法可以部分保证数据的不变性。
上面已经介绍了这两个方法的使用，这里就从代码的结果来对比一下其区别。来看下面的 Object.seal 例子：
Object.seal 的解析
const obj = { author: "DevPoint" };console.log(Object.getOwnPropertyDescriptors(obj));/*{ author: { value: 'DevPoint', writable: true, enumerable: true, configurable: true }}*/Object.seal(obj);console.log(Object.getOwnPropertyDescriptors(obj));/*{ author: { value: 'DevPoint', writable: true, enumerable: true, configurable: false }}*/obj.author = "天行无忌";console.log(obj.author); // 天行无忌delete obj.author;console.log(obj.author); // 天行无忌obj.city = "Shenzhen";console.log(obj.city); // undefined
复制代码
上面代码定义了一个对象 obj 有一个属性 author ，其中的值为 DevPoint，初始的描述属性如下：
{ author: { value: 'DevPoint', writable: true, enumerable: true, configurable: true }}
复制代码
然后用 Object.seal 密封了对象，再次查看哪些描述符发生了变化，哪些没有，从结果看只有可配置的更改为 false。
{ author: { value: 'DevPoint', writable: true, enumerable: true, configurable: false }}
复制代码
尽管 Object.seal 后的可配置现在为 false，但还是通过代码改变其属性值为 天行无忌 ，正如之前所解释的，将可配置设置为 false 会使属性不可写，但是如果 writable 明确为 true ，则它不起作用。当创建一个对象并设置一个新属性时，它默认为 writable:true 。
Object.seal 会使每个属性都不可配置，从而防止被删除。从上面的代码看，对对象执行 Object.seal 后，delete obj.author; 将变得无效。
Object.freeze 的解析
同样先来看一下代码，如下：
const obj = { author: "DevPoint" };console.log(Object.getOwnPropertyDescriptors(obj));/*{ author: { value: 'DevPoint', writable: true, enumerable: true, configurable: true }}*/Object.freeze(obj);console.log(Object.getOwnPropertyDescriptors(obj));/*{ author: { value: 'DevPoint', writable: false, enumerable: true, configurable: false }}*/obj.author = "天行无忌";console.log(obj.author); // DevPointdelete obj.author;console.log(obj.author); // DevPointobj.city = "Shenzhen";console.log(obj.city); // undefined
复制代码
从上面代码结果看，与 Object.seal 的区别在于 writable 在执行 Object.freeze 后属性值也变为 false 。因此后续代码对其属性进行更新都无效。同样与 Object.seal 一样，Object.freeze 也使对象不可配置，这使得对象的每个属性都不可删除。
共同点
执行后的对象变得不可扩展，这意味着对象将无法添加新属性。
执行后的对象中的每个元素都变得不可配置，这意味着无法删除属性。
如果在“使用严格”模式下调用操作，则两种方法都可能引发错误，例如在严格模式下执行 obj.author = "天行无忌" 会出现错误。
不同
对象执行 Object.seal 后允许修改属性，而执行 Object.freeze 则不允许。
不足
Object.freeze 和 Object.seal 在“实用性”方面存在不足，它们都只是对对象的第一层有效。
const obj = { author: "DevPoint", detail: { view: 100 } };console.log(Object.getOwnPropertyDescriptors(obj.detail));/*{ view: { value: 100, writable: true, enumerable: true, configurable: true }}*/Object.seal(obj);console.log(Object.getOwnPropertyDescriptors(obj.detail));/*{ view: { value: 100, writable: true, enumerable: true, configurable: true }}*/
obj.detail.view = 500;console.log(obj.detail.view); // 500delete obj.detail.view;console.log(obj.detail); // {}obj.detail.hits = 666;console.log(obj.detail.hits); // 666
Object.freeze(obj);console.log(Object.getOwnPropertyDescriptors(obj.detail));/*{ view: { value: 100, writable: true, enumerable: true, configurable: true }}*/
复制代码
如果希望避免对更深层次的对象属性有效，需要像深拷贝一样，需要写一些代码来实现（deepFreeze）：
const obj = { author: "DevPoint", detail: { view: 100 } };console.log(Object.getOwnPropertyDescriptors(obj.detail));/*{ view: { value: 100, writable: true, enumerable: true, configurable: true }}*/const deepFreeze = (object) => { const propNames = Object.getOwnPropertyNames(object);
for (const name of propNames) { const value = object[name]; if (value && typeof value === "object") { deepFreeze(value); } } return Object.freeze(object);};const freezeObj = deepFreeze(obj);console.log(Object.getOwnPropertyDescriptors(freezeObj.detail));/*{ view: { value: 100, writable: false, enumerable: true, configurable: false }}*/
obj.detail.view = 500;console.log(obj.detail.view); // 100delete obj.detail.view;console.log(obj.detail); // {view:100}obj.detail.hits = 666;console.log(obj.detail.hits); // undefined
复制代码
如果希望对嵌套对象实现 Object.seal 效果，同样需要编写代码来实现（deepSeal）：
const obj = { author: "DevPoint", detail: { view: 100 } };console.log(Object.getOwnPropertyDescriptors(obj.detail));/*{ view: { value: 100, writable: true, enumerable: true, configurable: true }}*/const deepSeal = (object) => { const propNames = Object.getOwnPropertyNames(object);
for (const name of propNames) { const value = object[name]; if (value && typeof value === "object") { deepSeal(value); } } return Object.seal(object);};const freezeObj = deepSeal(obj);console.log(Object.getOwnPropertyDescriptors(freezeObj.detail));/*{ view: { value: 100, writable: true, enumerable: true, configurable: false }}*/
obj.detail.view = 500;console.log(obj.detail.view); // 500delete obj.detail.view;console.log(obj.detail); // {view:500}obj.detail.hits = 666;console.log(obj.detail.hits); // undefined
复制代码
4. Object.keys()
Object.keys() 方法会返回一个数组，该数组包含参数对象的所有键的名称，数组中属性名的排列顺序和正常循环遍历该对象时返回的顺序一致 。
语法
返回值
一个表示给定对象的所有可枚举属性的字符串数组。
实例
看看下面的代码：
const author = { name: "Quintion", city: "Shenzhen", age: 18, validation: true,};
console.log(Object.keys(author)); // [ 'name', 'city', 'age', 'validation' ]
复制代码
可以看到上面的代码中打印的结果是一个包含键作为输出的数组。输出的结果可以使用数组的方法进行处理或者迭代。
console.log(Object.keys(author).length); // 4
复制代码
5. Object.values()
Object.values() 和 Object.keys() 类似，不过Object.values() 是获取对象内素有属性的值，返回值组成的数组。
语法
返回值
一个包含对象自身的所有可枚举属性值的数组。
实例
const author = { name: "Quintion", city: "Shenzhen", age: 18, validation: true,};
console.log(Object.values(author)); // [ 'Quintion', 'Shenzhen', 18, true ]
复制代码
6. Object.create()
Object.create() 基于现有对象的原型__proto__创建一个新对象，先来看下面代码：
语法
Object.create(proto，[propertiesObject])
复制代码
返回值
一个新对象，带着指定的原型对象和属性。
实例
const author = { firstName: "Quintion", lastName: "Tang", fullName() { return `${this.firstName} ${this.lastName}`; },};
const newAuthor = Object.create(author);console.log(newAuthor); // {}newAuthor.firstName = "Ronb";newAuthor.lastName = "Joy";console.log(newAuthor.fullName()); // Ronb Joy
复制代码
在上面的代码中，使用object. create()创建一个具有author对象原型的新对象newAuthor。这样在新对象newAuthor中可以像改变author对象所拥有的属性值一样改变相应的属性值，这个看起来是不有点像继承，没错， 使用 Object.create 可以实现类式继承。
7. Object.entries()
Object.entries() 允许获取对象的键和值，返回一个多维数组，其中每一维包含每个键和值，如 [键 , 值]
语法
返回值
给定对象自身可枚举属性的键值对数组。
实例
const author = { firstName: "Quintion", lastName: "Tang", fullName() { return `${this.firstName} ${this.lastName}`; },};
console.log(Object.entries(author));
复制代码
输出的结果如下：
[ [ 'firstName', 'Quintion' ], [ 'lastName', 'Tang' ], [ 'fullName', [Function: fullName] ]]
复制代码
8. Object.assign()
Object.assign() 方法用于将所有可枚举属性的值从一个或多个源对象复制到目标对象。它将返回目标对象。
语法
Object.assign(target, ...sources)
复制代码
注意
Object.assign方法只会拷贝源对象自身的并且可枚举的属性到目标对象。
拷贝过程中将调用源对象的 getter 方法，并在 target 对象上使用setter 方法实现目标对象的拷贝。因此，它分配属性，而不仅仅是复制或定义新的属性。
如果合并源包含getter，这可能使其不适合将新属性合并到原型中。
String 类型和 Symbol 类型的属性都会被拷贝。
在出现错误的情况下，例如，如果属性不可写，会引发 TypeError，如果在引发错误之前添加了任何属性，则可以更改 target 对象。
Object.assign会跳过那些值为 null 或 undefined 的源对象。
实例
const obj = {name:"devpoint"};const copy = Object.assign({}, obj);console.log(copy); //{name:"devpoint"}
复制代码
function test() { let obj1 = { name: "devpoint1", address: { city: "Shenzhen1" } }; let obj2 = Object.assign({}, obj1); console.log(JSON.stringify(obj2)); // {"name":"devpoint1","address":{"city":"Shenzhen1"}}
obj1.name = "devpoint2"; console.log(JSON.stringify(obj1)); // {"name":"devpoint2","address":{"city":"Shenzhen1"}} console.log(JSON.stringify(obj2)); // {"name":"devpoint1","address":{"city":"Shenzhen1"}}
obj2.name = "devpoint3"; console.log(JSON.stringify(obj1)); // {"name":"devpoint2","address":{"city":"Shenzhen1"}} console.log(JSON.stringify(obj2)); // {"name":"devpoint3","address":{"city":"Shenzhen1"}}
obj2.address.city = "Shenzhen3"; console.log(JSON.stringify(obj1)); // {"name":"devpoint2","address":{"city":"Shenzhen3"}} console.log(JSON.stringify(obj2)); // {"name":"devpoint3","address":{"city":"Shenzhen3"}}
// Deep Clone obj1 = { name: "devpoint1", address: { city: "Shenzhen1" } }; let obj3 = JSON.parse(JSON.stringify(obj1)); obj1.name = "devpoint4"; obj1.address.city = "Shenzhen4"; console.log(JSON.stringify(obj3)); // {"name":"devpoint1","address":{"city":"Shenzhen1"}}}test();
复制代码
const obj1 = { title: "devpoint",};
const obj2 = Object.assign({}, obj1, null, undefined, { city: "Shenzhen" });console.log(obj2); // { title: 'devpoint', city: 'Shenzhen' }
复制代码
总结
本文对对象常见的方法做了简单的介绍，并提供了相应的示例代码，在实际编码处理对象的过程中，使用上面的方法可以让代码变得更加优雅。当只需要简单的结构来存储数据并且知道所有键都是字符串或整数（或符号）时，对象是很好的选择。
评论