JavaScript对象详解,深入理解js对象_js撖寡情-程序员宅基地

技术标签: javascript  

定义:

对象是JavaScript的基本数据类型。对象也是一种复合值:可以通过名字访问这些值,我们可以将对象看做是从字符串到值的映射,当然对象不仅仅是字符串到值的映射,除了自有的属性还可以从原型继承属性。

创建对象:

1.字面量方式

	var empty={} //创建一个空对象

	var obj={a:1,b:2}; //两个属性的对象

	var compObj={a:'1',b:'2',cc:{
						d:'3',
						e:'4'
					}
				}; //复杂的对象

2.new构造函数的方式创建对象

  var a = new Array();//创建一个空数组
  var d = new Date();//创建当前时间的Date对象

3.原型对象方式

function Person(name){
 	this.name=name;
  }
  Person.prototype.eat=function(){
	 console.log(this.name+"是个好人");
  }
 var zhangsan =new Person("张三");

4.Object.create()

   var o1=Object.create({a:1,b:2});//o1会继承属性 a和b

属性的查询和设置

可以通过点(.)和方括号([])来获取属性的值

   var o1={
   		a:1,
   		b:2,
   		'hello zhangsan':'张三'
   }
   o1.a //1
   o1.b //2
   o1['a']//1
   o1['b']//2
   var key='hello zhangsan';
  	   o1[key]//张三
  	 o1.key//undefined
  	 o1.hello zhangsan //报错

可以看出对于点 (.) 来说,右侧必须是一个以属性名称命名的简单标示符。对于方括号来说,方括号内是一个计算结果为字符串的表达式,而这个字符串就是属性的名字,比如:

属性名'hello zhangsan',因为中间有空格只能用‘方括号‘的方式来获取,而其他属性则既可以 点 也可以 方括号。

设置值也是一样的,只不过有个赋值操作:

 o1.a='3'
 o1['b']='4'

删除属性

 delete o1.a;
 delete o1['b']

注意:delete运算符只能删除自有属性,不能删除继承属性。

检测属性

1.in运算符

   'a' in o1;//true 
   'b' in o1;//true
   'toString' in o1//true o继承来的属性,打开控制台可以在o1对象的__proto__属性里面找到toString

2.hasOwnPreperty()方式

   o1.hasOwnProperty('a');//true
   o1.hasOwnProperty('b');//true
   o1.hasOwnProperty('toString');//false 继承来的属性为false

3.使用 !==undefined

   o1.a!==undefined//true
   o1.b!==undefined//true
   o1.toString!==undefined// 继承来的属性为true

当然如果值直接设置了undefined,则这种检测不起作用,比如 var o1={a:undefined} ,这个a属性就没办法这样检测了。

属性的枚举

 1.for/in方式

  for(key in o1){
   	console.log(key,'===',o1[key])
   }

2.Object.keys 方式

   var keys = Object.keys(o1);
   keys.forEach((key)=>{
   	 	console.log(key,'===',o1[key])
   })

原型属性

    1.对象的__proto__均指向自身构造函数的prototype。
    2.prototype中的constructor 属性指向构造函数本身。
    3.isPrototypeOf方法检测对象自身是否处于另一个对象的原型或者处于原型链上。


对象的方法

对象从原型对象继承的基本是方法,看看几个比较重要的

1.valueOf() 方法返回指定对象的原始值。

//Array:返回数组对象本身
var array = [1,3,4,6];
console.log(array.valueOf() === array);   // true

// Number:返回数字值
var num =  123213;
console.log(num.valueOf());   // 15.2654

// boolean:返回布尔值true或false
var bool = true;
console.log(bool.valueOf() === bool);   // true

2.toString() 方法返回一个表示该对象的字符串。

可以通过这个方法来检测对象的类型,如下代码

	var toString = Object.prototype.toString;

	console.log(toString.call(new Object()));//[object Object]
	console.log(toString.call(new Date())); // [object Date]
	console.log(toString.call('abc')); // [object String]
	console.log(toString.call(123)); // [object Number]
	console.log(toString.call(true)); //  [object Boolean]
	console.log(toString.call(undefined)); // [object Undefined]
	console.log(toString.call(null)); // [object Null]
	console.log(toString.call(/./));//[object RegExp]

3.toLocaleString() 方法返回一个该对象的字符串表示。

	var toString = Object.prototype.toLocaleString;

	console.log(toString.call(new Object()));//[object Object]
	console.log(toString.call(new Date())); // Wed Dec 23 2020 20:09:24 GMT+0800 (中国标准时间)
	console.log(toString.call('abc')); // abc
	console.log(toString.call(123)); // 123
	console.log(toString.call(true)); //  true
	console.log(toString.call(/./));// /./

4.hasOwnProperty() 方法会返回一个布尔值,指示对象自身属性中是否具有指定的属性。

    var o1={
   		a:1,
   		b:2,
   		'hello zhangsan':'张三'
   }
   
   console.log(o1.hasOwnProperty('a'));//true
   console.log(o1.hasOwnProperty('b'));//true
   console.log(o1.hasOwnProperty('toString'));//false 继承来的属性为false

5.propertyIsEnumerable() 方法返回一个布尔值,表示指定的属性是否可枚举。

	//propertyIsEnumerable() 方法返回一个布尔值,表示指定的属性是否可枚举。
    var o1={
   		a:1,
   		b:2,
   		'hello zhangsan':'张三'
   }
   
   console.log(o1.propertyIsEnumerable('a'));//true
   console.log(o1.propertyIsEnumerable('b'));//true
   console.log(o1.propertyIsEnumerable('toString'));//false 继承来的属性为false

6.isPrototypeOf() 方法用于测试一个对象是否存在于另一个对象的原型链上。

   function Person(){}
   function Man(){}
   Man.prototype = Object.create(Person.prototype);
   
   var m = new Man();

	console.log(Person.prototype.isPrototypeOf(m)); // true
	console.log(Object.prototype.isPrototypeOf(m)); // true

从下图我们也可以看到 m 实例对象的__proto__指向了Person.prototype对象,同时Person.prototype对象的__proto__属性指向了Object.prototype对象。

整理不易给个三连支持一下吧,谢谢!

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/dkm123456/article/details/111596659

智能推荐

基于Pix4D使用无人机光学影像制作正射影像(DOM)和数字表面模型(DSM) 操作步骤_pix4dmapper无人机影像处理教程-程序员宅基地

文章浏览阅读5.7k次,点赞13次,收藏69次。此教程目的是让读者学会使用PIX4D拼接航片,教程较为通俗,面向初学者和专业人士。_pix4dmapper无人机影像处理教程

(7)LR如何利用siteScope监控MySQL性能_lr在性能测试怎么同时监控数据库-程序员宅基地

文章浏览阅读1.2k次。本次实验,是在自己的电脑上使用APMServ5.2.6部署Discuz2.X论坛下,对该论坛的数据库MySQL5.1进行性能测试的,下面讲述LoadRunner在设计场景时,如何利用siteScope工具监控MySQL数据库性能:一、在网上下载siteScope 我在网上搜了很久,发现siteScope软件的下载资源很少,毕竟它是收费的,想找个破解版,不过还是有的,哈哈。_lr在性能测试怎么同时监控数据库

借助知识图谱和Llama-Index实现基于大模型的RAG_llamaindex 知识图谱-程序员宅基地

文章浏览阅读1.2k次,点赞18次,收藏28次。对于语言模型(LLM)幻觉,知识图谱被证明优于向量数据库。知识图谱提供更准确、多样化、有趣、逻辑和一致的信息,减少了LLM中出现幻觉的可能性。这种优越性源于它们能够提供关于实体之间关系的精确细节,而不仅仅是表示相似性,支持更复杂的查询和逻辑推理。向量数据库以其数字数组在相似性搜索和最佳匹配场景中表现出色。最终,两者之间的选择取决于项目的需求,包括数据的性质、关系探索的需要以及预期的查询类型。_llamaindex 知识图谱

Onlyoffice本地部署超详细教程(附协作空间2.0新资讯)-程序员宅基地

文章浏览阅读4.3w次,点赞60次,收藏97次。相信大家已经有所了解ONLYOFFICE这个神中神办公软件真正的办公神器-ONLYOFFICE你了解多少?,最近公司产品突然提出一个需求要实现文档实时在线浏览编辑等一系列功能,需求评审我直接举手,这个活我来!之前对ONLYOFFICE有一定的了解,但是对于二次开发与整合方面一直没深入探索,正好借着本次机会,上班学习走起!本篇给大家讲一下ONLYOFFICE本地部署的相关步骤与注意事项。_onlyoffice

第十一届泰迪杯B题:产品订单的数据分析与需求预测_第十一届挑战赛b1-产品订单分析与需求预测 赛题数据-程序员宅基地

文章浏览阅读1.1w次,点赞38次,收藏232次。2. 基于上述分析,建立数学模型,对附件预测数据(predict_sku1.csv)中给出的产品,预测未来3月(即2019年1月、2月、3月)的月需求量,将预测结果按照表3的格式保存为文件result1.xlsx,与论文一起提交。附件中的预测数据(predict_sku1.csv)提供了需要预测产品的销售区域编码、产品编码、产品品类和产品细品类(格式见表2)。(2) 产品所在区域对需求量的影响,以及不同区域的产品需求量有何特性;(3) 不同销售方式(线上和线下)的产品需求量的特性;_第十一届挑战赛b1-产品订单分析与需求预测 赛题数据

fatal error: openssl/bio.h: No such file or directory 解决方案-程序员宅基地

文章浏览阅读3.9k次,点赞2次,收藏2次。出现这个或者fatal error: openssl/名单.h: No such file or directory。都是没有安装libssl-dev~libssl-dev包含libraries, header files and manpages,他是openssl的一部分,而openssl对ssl进行了实现~解决方案:使用sudo apt-get install libssl-de..._fatal error: openssl/bio.h: no such file or directory

随便推点

Docker基本管理_docker管理-程序员宅基地

文章浏览阅读982次。是一个开源的应用容器引擎,基于go语言开发并遵循了apache2.0协议开源是在Linux容器里运行应用的开源工具是一种轻量级的"虚拟机'Docker的容器技术可以在一台主机上轻松为任何应用创建一个轻量级的、可移植的、自给自足的容器。Docker与虚拟机的区别技术支持核心概念镜像:创建容器的基础,类似于虚拟机快照,面向Docker容器引擎的只读模板容器:用镜像创建的运行实列仓库:用来保存镜像的地方3.2、镜像管理命令3.2.1、搜索镜像3.2.2、下载镜像3.2.3、_docker管理

解决C#中dll类库无法生成资源字典问题-程序员宅基地

文章浏览阅读732次。第一步:引入三个程序集:1.PresentationCore2.PresentationFramework3.WindowsBase第二步:打开此类库的工程文件 (*.csproj)//在项目的路径下中打开这个文件,不要在VS中打开在图时位置添加代码:<ProjectTypeGuids>{60dc8134-eba5-43b8-bcc9-bb4bc16c2...

微信小程序UI自动化测试 一、minium搭建开始_微信小程序ui自动化实践-程序员宅基地

文章浏览阅读2.1k次。1 参考文档:https://blog.csdn.net/m0_38043408/article/details/106379734?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522160273112819726892421451%2522%252C%2522scm%2522%253A%252220140713.130102334.pc%255Fall.%2522%257D&request_id=16027311281972689242_微信小程序ui自动化实践

Sora:大型视觉模型的背景、技术、局限性和机遇综述 【官方论文】,引用文章-程序员宅基地

文章浏览阅读948次,点赞27次,收藏10次。Sora:大型视觉模型的背景、技术、局限性和机遇综述 【官方论文】Web3天空之城2024-02-28 19:05:20发布于北京科技领域创作者+关注文:城主写在前面:今天微软研究院发布了Sora的深度论文综述。这里和关心Sora的同学们分享本城翻译制作的中文版(全文3.4万字)英文原版传送门:https://arxiv.org/pdf/2402.17177v1.pdf---Sora:大型视觉模型的背景、技术、局限性和机遇综述 Yixin Liu1* Kai Zhang1* Yuan

Azure Service Principal Name 验证访问-程序员宅基地

文章浏览阅读164次。【代码】Azure Service Principal Name 验证访问。_azure service principal

Python数据可视化笔记03--柱状图、饼状图实战_jupyter柱状图添加图例-程序员宅基地

文章浏览阅读6.2k次,点赞12次,收藏49次。Python数据可视化笔记01--Matplotlib基础Python数据可视化笔记02--折线图、散点图实战本文索引:柱状图 饼状图环境:Windows10 + jupyter notebook一、柱状图【柱状图】使用Matplotlib提供的bar()函数来绘制柱状图。 与前面介绍的plot()函数类似,程序每次调用bar()函数时都会生成一组柱状图,..._jupyter柱状图添加图例

推荐文章

热门文章

相关标签