javascript对象概念,面向对象JavaScript

  javascript对象概念,面向对象JavaScript

  本文已经给大家带来了一些关于javascript的知识,主要介绍了一些关于对象的相关问题,包括面向对象、对象操作、属性命名等等。下面就来看看吧,希望对你有帮助。

  【相关推荐:javascript视频教程,web前端】

  

JavaScript 对象

   JavaScript的八种数据类型,包括七种原始数据类型(Number、BigInt、String、Boolean、null、undefined和symbol)和一种复杂类型对象(即object type)。

  与原始数据类型相比,object被称为复杂类型是因为原始类型只能表示一种数据,例如Number表示一个数字,String表示一个字符串等。而对象可以包含键值对形式的所有原始数据类型。

  例如,我们可以使用符号类型来表示对象的ID,使用字符串类型来表示对象的名称,使用布尔类型来表示对象的性别,等等。对象中的每种类型的数据称为对象的属性。一个对象理论上可以有无数的属性,这些属性是用一对花括号{.}.

  面向对象不仅仅是JavaScript的一个语言特性,实际上是所有面向对象语言中非常重要的概念,比如C、Java、Python、C#。想要学好JavaScript,必须精通对象的特性,因为对象渗透在JavaScript的方方面面。

  

面向对象 VS 面向过程

  面向对象是一种编程思想,不是新技术。在面向对象诞生之前,程序员用面向过程的思想组织了大量的代码。

  什么是面向对象?这个问题在学校和面试中经常被问到。我们可以深刻理解答案:万物皆对象。虽然这是绝对正确的,但这并不是面试官或者老师想要的答案。

  面向对象是一种编程思想,是一种组织代码的方式,相对于面向过程。在定向的过程中,程序员就是上帝,上帝指挥一切。比如我们经常举一个例子:把大象放进冰箱。

  在面对的过程中,上帝需要先打开冰箱门,然后把大象放进冰箱,最后关上冰箱门。所有的过程都是上帝一个人在操作。

  在面向对象中,冰箱和大象都是已有对象,冰箱会自己开门,大象会自己进入冰箱,然后冰箱会自己关门。整个过程由上帝协调,但具体的做事过程是由物体自己完成的,比如如何打开冰箱门,如何进入冰箱。

  

语法

  您不需要使用关键字来定义对象。你可以用花括号{.}包装键值对以创建对象。语法如下:

  let child={

  姓名:“汤姆”,

  年龄:8,}上面的代码创建了一个简单的对象,并将该对象赋给变量child。一个孩子有两个属性(两个值),一个是名字,一个是年龄。

  所谓的键-值对(key:value)就是名称和值之间的简单映射。

  例如,上面示例中的名称“Tom”是一个键-值对,其中name是键,“Tom”是相应的值。在实际使用中,可以通过key获取对应的值,就像用变量名获取变量值一样。

  

空对象

  如果对象中没有属性,则该对象为空对象。我们可以通过简单地将{}赋值给一个变量来获得一个空对象,或者我们可以使用另一种方法:

  设nullobj 1={ };

  //创建一个同样为空的对象let nullobj 2=new Object();

  //还创建了一个空对象

对象操作

  一个对象创建后,就不是静态的了。我们可以在使用对象的过程中随时查询或更改对象的属性。

  

查询属性

  要查询对象的属性值,需要使用新符号:语法是对象名。变量名。

  举个简单的小李子:

  let child={

  姓名:“汤姆”,

  年龄:8,};console . log(child . name);console.log(child.age)代码的执行结果如下:

  在上面的例子中,如果我们想要查看变量child中的name属性,我们只需要简单地使用child.name

  

增加属性

  创建对象变量后,我们还可以随时向变量添加新属性,如下所示:

  let child={

  姓名:“汤姆”,

  年龄:8,} child.height=800//已创建新属性heightconsole.log(child.height );代码执行结果如下:

  要向对象变量添加新属性,只需使用。属性名,然后直接给新属性赋值。

  如果我们此时查看变量child的内容,我们可以看到height属性已经列在其中:

  对象的属性类型可以是任意的。我们可以直接用child.isBoy=true给对象添加一个布尔值,或者用child.money=null给对象添加一个空值的属性。

  

更改属性

  改变JavaScript对象的属性值也非常简单。直接给变量赋值就行了。拿一个简单的小李子来说:

  let child={

  姓名:“汤姆”,

  年龄:8,} child.age=12console.log(子);代码执行结果如下:

  如您所见,年龄变量已从8变为12。

  

删除属性

  删除对象的属性需要一个新关键字delete。删除对象名和属性名用于删除对象的属性:

  let child={

  姓名:“汤姆”,

  年龄:8,}删除child.ageconsole.log(子);代码执行结果如下:

  从代码的执行结果中,我们可以看到属性age被删除了。

  

多单词键值

  对象的属性名(key)也可以使用多个由空格分隔的单词,但是在创建这样的属性时需要用双引号将键名括起来。

  例如:

  let child={

  name=Tom ,

  年龄:8岁,

  “最喜欢的猫”:“杰里”。}上面的代码创建了一个键值对,键名为“Favorite Cat ”,但是在访问属性值时,如果使用:

  child.favorite cat= Bob//语法错误这种方式是错误的。引擎将把favorite作为一个键名,并在遇到cat时报告一个错误。

  您需要方括号来访问这些键值。

  :

方括号

  .可以访问普通的属性名,可以在‘favorite cat’等变量中使用[]。例如:

  let child={

  姓名:“汤姆”,

  年龄:8岁,

  喜爱的猫: Jerry ,}console.log(child[喜爱的猫]);代码执行结果如下:

  方括号提供对以外的属性的访问。我们可以通过替换来完全操纵对象的属性。带方括号。

  例如:

  let child={

  姓名:“汤姆”,

  年龄:8,}孩子[最喜欢的猫]=杰瑞;

  //添加属性child[ name ]= Bob ;

  //修改属性delete child[ age ];

  //删除号码console . log(child[ name ]);

  //查看属性除了常规的属性操作,方括号还可以通过变量访问对象属性:

  let child={

  姓名:“汤姆”,

  年龄:8,} let prop= nameconsole . log(child[prop]);prop= ageconsole . log(child[prop]);通过变量访问属性值的能力为我们提供了一种非常有用的访问变量的方式。比如我们可以在程序中计算属性的键名,然后通过键名访问键值。

  举个栗子:

  let child={

  prop1:0,

  prop2:1,

  prop3:2,} let prop= propfor(设I=1;i4;i ){

  console . log(child[prop I]);}这里计算的是range属性值的键,这个函数不能用.

  

计算属性

  创建对象时,我们也可以通过变量指定对象的键名。这样的属性称为计算属性

  例如:

  设propName= namelet child={

  [属性名]:汤姆,

  年龄:8,}代码执行结果如下:

  设propName= name

  let child={

  [属性名]:汤姆,

  年龄:8岁,

  }

  不明确的

  儿童

  {name: Tom ,age: 8}上面例子中的[propName]是一个计算属性,它的含义很简单,就是将变量propName(这里是 name )中存储的值作为对象的键名。

  上面的代码与下面的代码具有基本相同的功能:

  设propName= namelet child={

  年龄:8,} child[prop name]= Tom ;复杂表达式也可以用在方括号中:

  Child={[prop 2 * 3]: Tom ,}代码执行结果如下:

  let child={

  [道具 2*3]:汤姆,

  } undefined child { prop 6: Tom }

属性简写

  在实际应用中,或者匿名对象中,我们经常使用与变量同名的属性。例如:

  let name= Tom设年龄=8;let child={

  Name:Name,//属性名和变量名一样,都是name。

  年龄:年龄,};在这种情况下,我们可以将对象属性缩写如下:

  let name= Tom设年龄=8;let child={

  Name,//相当于name:name;

  Age,}代码执行结果:

  let name= Tom

  设年龄=8;

  let child={

  姓名,

  年龄,

  }未定义的子{name: Tom ,age: 8}:

属性命名

  不同于变量命名。我们可以使用几乎任何值作为属性的名称,包括关键字和数字:

  

关键字作为变量名

  虽然听起来不可思议,但实际上所有的关键词都可以作为对象的属性名:

  让obj={

  对于:0,

  而:1,

  功能:2,

  预警:3,}代码执行结果:

  让obj={

  对于:0,

  而:1,

  功能:2,

  预警:3,

  } undefined obj {for: 0,while: 1,function: 2,alert: 3}:

数字作为关键字

  数字也可以作为关键字的名称,如下:

  让obj={

  0:“数字”,//隐式转换为“0”

  1:Number ,} console . log(obj[ 0 ]);作为数字属性名,它将被隐式转换为字符串。当访问属性时。不能使用,但必须改用方括号。

  

属性名称中的陷阱

  在命名上,有一个小陷阱。我们不能使用__proto__作为属性的名称。这个属性是对象中比较特殊的一个,后面会专门介绍。

  例如:

  设obj={ };obj。_ _ proto _ _=1;console.log(对象。_ _ proto _ _);

  

in 操作符

   JavaScript有一个特性需要注意。即使访问不存在的属性,它也不会报告错误。它只是返回未定义的。

  那我们怎么知道该属性是否存在于对象中呢?

  最简单的方法是使用if语句:

  设obj={ };if(obj.someProp===undefined){

  .}这在大多数情况下没有问题,但是当属性名的值本身没有定义时,就会出现错误:

  让obj={

  prop:undefined } obj . prop===undefined?console . log( no ):console . log( yes );代码执行结果:

  让obj={

  属性:未定义

  }

  obj.prop===未定义?console . log( no ):console . log( yes );

  虽然存在prop,但上述情况不能正确返回结果。

  你需要在这个时候使用。

  让obj={

  prop:未定义,};if(obj中的“prop ”){

  console . log( yes );}否则{

  console . log( no );}这样做不是优雅很多吗?

  让obj={

  道具:未定义,

  };

  if(obj中的“prop ”){

  console . log( yes );

  }否则{

  console . log( no );

  } yes undefined

属性遍历

  如果我们不知道对象中存在哪些属性,那么如何获取所有的属性值呢?

  这时,您需要使用.在.语句,它类似于for循环,但更简洁。

  语法

  for(对象中的键){

  .}拿个简单的小李子来说:

  let child={

  姓名:“汤姆”,

  年龄:8岁,

  身高:180,}适合(让孩子键入){

  console . log(key): child[key]);}代码执行结果如下:

  let child={

  姓名:“汤姆”,

  年龄:8岁,

  身高:180,

  }

  对于(让孩子键入){

  console . log(key): child[key]);

  }姓名:tom年龄:8身高:180未定义

属性顺序

  当我们创建一个对象并遍历其中的所有属性时,属性是如何排列的?答案是:按特殊顺序排列,遵循以下规则:

  属性按数字顺序排列;其他属性按创建顺序排列;数字在其他属性之前;例如:

  让obj={

  姓名:“汤姆”,

  年龄:99,

  7:7,

  1:1,

  9:9 ,}for (let key in obj){

  console . log(key : obj[key]);}代码执行结果:

  让obj={

  姓名:“汤姆”,

  年龄:99,

  7:7,

  1:1,

  9:9,

  }

  for (let key in obj){

  console . log(key : obj[key]);

  } 1:1 7:7 9:9姓名:Tom年龄:99【相关推荐:javascript视频教程,web前端】以上是一篇关于掌握JavaScript对象的文章的详细内容。更多请关注我们的其他相关文章!

郑重声明:本文由网友发布,不代表盛行IT的观点,版权归原作者所有,仅为传播更多信息之目的,如有侵权请联系,我们将第一时间修改或删除,多谢。

留言与评论(共有 条评论)
   
验证码: