JS 对象创建与便利

简介: js对象的创建和遍历,轻松入门js

 这篇文章带大家进入 Java Script 的对象阶段,Java Script 可以说是万物皆对象。对象是引用数据类型,是保存复杂数据类型的容器,它是多个属性和方法的集合。


这篇文章的目标有三个:

  •  📑 目标一:学会创建对象的三种方式


  •  📑 目标三:学会对象调用的两种书写方式


  •  📑 目标二:学会遍历对象的两种方式

一:对象的创建

💹 对象的创建由三种形式:

分别是利用对象字面量创建,利用 new object 创建,以及利用构造函数创建

1.1 利用对象字面量创建

书写格式:

📝 属性与属性值要以键值对的形式书写

📝 属性属性值之间冒号隔开,属性与属性之间逗号隔开

<script>varobj1={
name : '卡卡西',
age : 19,
hello:function(){
console.log('大家好,我是卡卡西');
               }
         }
console.log(obj1.name);
console.log(obj1.age);
obj1.hello()
</script>

结果输出:

1.2 利用 new object 创建

书写格式:

📝 格式为 对象名.属性名=属性值

📝 属性与属性值之间为等号,属性与属性之间以分号;隔开

<script>varobj2=newObject;
obj2.name='卡卡西';
obj2.age=19obj2.hello=function(){
console.log('大家好 我是卡卡西同学');
           }
console.log(obj2.name);
console.log(obj2.age);
obj2.hello()
</script>

结果输出:


1.3 利用构造函数创建  

书写格式:

📝 构造函数名首字母要大写

📝 构造函数不需要 return 返回结果

📝 调用构造函数创建对象时写成 new + 构造函数名

📝 构造函数的属性方法前要加 this

<script>functionGouzao(name,age,sex){
this.name=name;
this.age=age;
this.sex=sex;
this.hello=function(){
console.log('hello,我是构造函数内的函数');
                }
          }
varobj3=newGouzao('卡卡西',19,'男');
console.log(obj3.name);
console.log(obj3.age);
console.log(obj3.sex);
obj3.hello()
</script>

结果输出:

new关键字创建对象的执行过程:

第一步:new + 构造函数名 即创建了一个空对象

第二步:构造函数中 this 指向该空对象

第三步:调用构造函数时的属性和方法传入空对象

第四步:返回新对象

二:对象调用的两种方式

📉 对象调用共两种方式:

 第一种:对象名.属性名


 第二种:对象名[属性名]





以刚才的构造函数创建对象为例,我们以这两种方式分别输出 name 值


 console.log( obj3.name );

 console.log( obj3[name] );

三:对象的遍历

🧼 JS创建对象后对象内有很多属性和方法,如何遍历属性和方法呢,我们会想到使用for循环,可是对象内并没有像数组一样的计数器(索引),所以无法使用普通的for循环进行遍历。对此我们要使用 for-in 循环进行遍历,for-in 循环多用于非数组的遍历,也被称为‘枚举’,数组在JS中也可以用 for-in 遍历,因为数组在JS中也以对象的形式存在,但是遍历复杂的数组可能会发生逻辑错误,所以不推荐使用 for-in 遍历数组。




格式:for (var k in 对象名)

此处的 k 可以切换成其他字母,由于 k 是 key键 的简拼,所以往往使用k来遍历


3.1 遍历只输出 k

遍历时只输出 k,由于 k 我们知道其是键 key 的简写,所以其得到的是对象内的键(属性名)


<script>varobj={
age:18,
name:'小明',
sex:'男',
                  }
for(varkinobj){
console.log(k);
                  }
</script>

输出结果:



 3.2 遍历输出 对象名[k]

遍历时输出 对象名[k],是得到其属性值,注意遍历对象时输出属性值只能写成第二种格式,即 对象名[属性值]


<script>varobj={
age:18,
name:'小明',
sex:'男',
                  }
for(varkinobj){
console.log(obj[k]);
                  }
</script>

输出结果:




相关文章
|
4月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的客户关系管理系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的客户关系管理系统附带文章源码部署视频讲解等
96 2
|
4月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的医院综合管理系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的医院综合管理系统附带文章源码部署视频讲解等
48 5
|
4月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的小区物流配送系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的小区物流配送系统附带文章源码部署视频讲解等
123 4
|
4月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的宠物援助平台附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的宠物援助平台附带文章源码部署视频讲解等
81 4
|
4月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的宠物交易平台附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的宠物交易平台附带文章源码部署视频讲解等
73 4
|
4月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的大学生入伍人员管理系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的大学生入伍人员管理系统附带文章源码部署视频讲解等
93 4
|
4月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp宿舍管理系统的附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp宿舍管理系统的附带文章源码部署视频讲解等
84 3
|
4月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的家政平台附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的家政平台附带文章源码部署视频讲解等
63 3
|
4月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的宠物医院系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的宠物医院系统附带文章源码部署视频讲解等
56 2
|
4月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的实验室安全考试系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的实验室安全考试系统附带文章源码部署视频讲解等
65 2