欠伸展肢体,吟咏心自愉。这篇文章主要讲述JavaScript数据结构之Object相关的知识,希望能为你提供帮助。
文章图片
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-enumerable
for (const key in obj)
console.dir(key);
// undefined
Object.keys(obj);
// [
// 2. non-writable
(() =>
"use strict";
obj.a = 200;
// TypeError in the strict mode
)();
// 3. non-deletable
delete obj.a;
obj.a === 100;
// true
但是,当
writable
或 enumerable
为 true 时,将忽略 configure:false
。2. Object.freeze()
Object.freeze()
方法可以防止对象中的数据被修改,即冻结一个对象,这样不能向这个对象 添加、更新或删除属性。语法
Object.freeze(obj)
obj
:要被冻结的对象。
实例
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()
。阻止向对象添加新的属性和删除属性,但允许更改和更新现有属性。语法
Object.seal(obj)
obj
:将要被密封的对象。
实例
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
obj.author = "天行无忌";
尽管
Object.seal
后的可配置现在为 false
,但还是通过代码改变其属性值为 天行无忌
,正如之前所解释的,将可配置设置为 false
会使属性不可写,但是如果 writable
明确为 true
,则它不起作用。当创建一个对象并设置一个新属性时,它默认为 writable:true
。delete obj.author;
Object.seal
会使每个属性都不可配置,从而防止被删除。从上面的代码看,对对象执行 Object.seal
后,delete obj.author;
将变得无效。obj.city = "Shenzhen";
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);
// DevPoint
delete obj.author;
console.log(obj.author);
// DevPoint
obj.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);
// 500
delete obj.detail.view;
console.log(obj.detail);
//
obj.detail.hits = 666;
console.log(obj.detail.hits);
// 666Object.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 = https://www.songbingjia.com/android/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);
// 100
delete 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 = https://www.songbingjia.com/android/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);
// 500
delete obj.detail.view;
console.log(obj.detail);
// view:500
obj.detail.hits = 666;
console.log(obj.detail.hits);
// undefined
4. Object.keys()
Object.keys()
方法会返回一个数组,该数组包含参数对象的所有键的名称,数组中属性名的排列顺序和正常循环遍历该对象时返回的顺序一致 。语法
Object.keys(obj)
obj
:要返回其枚举自身属性的对象。
实例看看下面的代码:
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()
是获取对象内素有属性的值,返回值组成的数组。语法
Object.values(obj)
obj
:被返回可枚举属性值的对象。
实例
const author =
name: "Quintion",
city: "Shenzhen",
age: 18,
validation: true,
;
console.log(Object.values(author));
// [ Quintion, Shenzhen, 18, true ]
6. Object.create()
【JavaScript数据结构之Object】
Object.create()
基于现有对象的原型__proto__
创建一个新对象,先来看下面代码:语法
Object.create(proto,[propertiesObject])
proto
:新创建对象的原型对象。propertiesObject
:可选,需要传入一个对象,该对象的属性类型参照Object.defineProperties()
的第二个参数。如果该参数被指定且不为undefined
,该传入对象的自有可枚举属性(即其自身定义的属性,而不是其原型链上的枚举属性)将为新创建的对象添加指定的属性值和对应的属性描述符。
实例
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()
允许获取对象的键和值,返回一个多维数组,其中每一维包含每个键和值,如[键 , 值]
语法
Object.entries(obj)
obj
:可以返回其可枚举属性的键值对的对象。
实例
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)
- 参数:
- 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"
- 深度拷贝问题: 针对深拷贝,需要使用其他方法,
Object.assign
拷贝的是属性值。假如源对象的属性值是一个指向对象的引用,它也只拷贝那个引用值。
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();
- 忽略 null 和 undefined:JavaScript 的
Object.assign()
方法在复制对象时会忽略null
和undefined
。请看下面列出的代码:
const obj1 =
title: "devpoint",
;
const obj2 = Object.assign(, obj1, null, undefined,city: "Shenzhen" );
console.log(obj2);
//title: devpoint, city: Shenzhen
总结
本文对对象常见的方法做了简单的介绍,并提供了相应的示例代码,在实际编码处理对象的过程中,使用上面的方法可以让代码变得更加优雅。当只需要简单的结构来存储数据并且知道所有键都是字符串或整数(或符号)时,对象是很好的选择。
推荐阅读
- MySQL面试10道不得不会的MySQL基础面试题
- linux防火墙综合
- tcpdump 命令的常用选项(一)
- 关于V2代理和Burp的一些实验
- Go 通过 Map/Filter/ForEach 等流式 API 高效处理数据
- 使用模板选择器(页面UI)创建自定义WordPress帖子类型吗()
- contact form需要填写以下两个字段之一
- 在ol li列表中看不到数字
- 根据URL更改wordpress主题