这篇文章带大家进入 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>
输出结果: