浅谈js中对象的使用

简单记录javascript中对象的使用

一、创建对象

?
1
2
3
4
5
6
7
8
9
10
//创建一个空对象
   var o={};
   //创建一个含有两个属性的对象,x、y
   var o2={x:12,y: '12' ,name: 'JS' };
   //此对象中的author属性的值还是一个对象
   var o3={x:12,author:{name: 'JS' ,age:23,address: 'china' }};
   //创建一个空对象和{}一样
   var o4= new Object();
   //给对象增加name属性
   o4.name= 'JS'

上面使用了两种方式创建对象,一种是字面量的方式,另一种是使用new创建对象,new后面的Object叫做构造函数。

二、对象的访问

从上面我们可以看到我们给对向o4增加了一个属性name,使用的是点号的方式,即对象名.属性名,这就是其中的一种访问方式。访问对象中的属性值有两种方式,第一种是使用点号(.),第二种是使用数组的方式(对象名[属性名])。

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
//创建一个空对象
   var o={};
   //创建一个含有两个属性的对象,x、y
   var o2={x:12,y: '12' ,name: 'JS' };
   //此对象中的author属性的值还是一个对象
   var o3={x:12,author:{name: 'JS' ,age:23,address: 'china' }};
   //创建一个空对象和{}一样
   var o4= new Object();
   //给对象增加name属性
   o4.name= 'JS'
   /**访问对象的属性值
   */
   //1、使用点号的方式
   var x=o2.x; //12
   var authorOfName=o3.author.name; //JS
   var name=o4.name; //JS
   
   //2、使用数组的方式
   var x2=o2[ 'x' ]; //12
   var authorOfName2=o3[ 'author' ][ 'name' ]; //JS
   var name2=o4[ 'name' ]; //JS

使用点号的方式来访问对象中的属性值比较好理解,但是使用数组的方式,不是太好理解,在javascript中,所有的对象都是关联数组,所谓关联数据就是这种方式看起来像是数组的访问方式,只不过这种方式不是使用的索引而是字符串索引,为此叫做关联数组。

上面访问对象属性值都是在知道对象属性名的情况,如果不知道对象的属性值呢?可以使用for/in循环遍历对象中的值,

?
1
2
3
4
5
6
7
8
//创建一个含有两个属性的对象,x、y、name
   var o2={x:12,y: '12' ,name: 'JS' };
   for (p in o2) {
     var property=p;
     var value=o2[p];
     console.log(property);
     console.log(value);
   }

打印结果为:

?
1
2
3
4
5
6
x
12
y
12
name
JS

可以看出一共有三个属性,且都打印了其值。

假如对象比较复杂可以加入一些判断,判断是否存在一个属性,那么如何判断一个对象是否包含了某个属性呢,由于对象都继承了Object,在Object中有hasOwnProperty()方法,用来判断对象中是否存在一个属性,返回值是布尔类型(boolean),注意此方法只会判断是否存在对象自己的属性,不会判断对象继承的属性。

?
1
2
3
4
//创建一个含有两个属性的对象,x、y、name
   var o2={x:12,y: '12' ,name: 'JS' };
   var b=o2.hasOwnProperty( 'name' ) //true
   var b2=o2.hasOwnProperty( 'age' ) //false

三、新增、删除属性

在最开始我们给对象o4新增了一个name属性,新增的方式其实和给属性赋值是一样的,还可以使用关联数组的方式给对象增加属性,

?
1
2
3
4
5
6
7
8
9
10
//创建一个含有两个属性的对象,x、y、name
   var o2={x:12,y: '12' ,name: 'JS' };
   //删除name属性
   delete o2.name;
   var b=o2.hasOwnProperty( 'name' ) //false
   //新增name属性
   o2[ 'name' ]= 'javascript' ;
   //由于已经存在了name属性,这里是给name重新赋值
   o2.name= 'js' ;
   var b3=o2.hasOwnProperty( 'name' ); //true

上面,删除了对象o2的name属性,然后又使用关联数组的方式新增了name属性,接着使用点号的方式给name属性重新赋值。

四、对象和字符串之间的转化

在ECMAScript5中内置了对象和字符串之间的相互转化,现在大多数主流浏览器都支持ECMAScript5,如果不支持可以从网上下载json2.js类库,把此类库引入到文件中便可以使用。

对象和字符串之间的转化叫做对象序列化,即将对象的状态转化为字符串或者将字符串转化为对象,这些转化都使用JSON作为数据交换格式,JSON的全称是JavaScript Object Notation。

把对象转化为字符串使用JSON.stringify();把字符串转化为对象使用JSON.parse(),

?
1
2
3
4
5
6
7
8
9
10
11
12
//定义一个对象
   var o={name: 'JavaScript' ,age:24};
   //此种方式在转化为对象是报错,必须使用下面的方式
   //var str="{name:'JavaScript',age:24}";
   //正确的定义对象字符串
   var str= '{"name":"JavaScript","age":24}' ;
   //把对象转化为字符串
   var str2=JSON.stringify(o);
   console.log( 'str2:' +str2+ ',类型:' +( typeof str2)); //str2:{"name":"JavaScript","age":24},类型:string
   //把字符串转化为对象
   var o2=JSON.parse(str);
   console.log( 'o2:' +o2+ ',类型:' +( typeof o2)); //o2:[object Object],类型:object

上面实现了对象和字符串之间的相互转化。

以上这篇浅谈js中对象的使用就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值