浅谈js中对象的使用

 更新时间:2016年08月11日 09:13:30   投稿:jingxian  
下面小编就为大家带来一篇浅谈js中对象的使用。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧

简单记录javascript中对象的使用

一、创建对象

//创建一个空对象
  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,使用的是点号的方式,即对象名.属性名,这就是其中的一种访问方式。访问对象中的属性值有两种方式,第一种是使用点号(.),第二种是使用数组的方式(对象名[属性名])。

//创建一个空对象
  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循环遍历对象中的值,

//创建一个含有两个属性的对象,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);
  }

打印结果为:

x
12
y
12
name
JS

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

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

//创建一个含有两个属性的对象,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属性,新增的方式其实和给属性赋值是一样的,还可以使用关联数组的方式给对象增加属性,

//创建一个含有两个属性的对象,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(),

//定义一个对象
  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中对象的使用就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • ECharts柱状图过多添加滚动条的步骤(亲测可用)

    ECharts柱状图过多添加滚动条的步骤(亲测可用)

    这篇文章主要介绍了ECharts柱状图过多添加滚动条的步骤(亲测可用),添加echarts柱状图滚动条,首先添加js用来判断当前视图要显示几个及是否显示滚动条,本文结合实例代码介绍的非常详细,需要的朋友参考下吧
    2024-01-01
  • 微信小程序--获取用户地理位置名称(无须用户授权)的方法

    微信小程序--获取用户地理位置名称(无须用户授权)的方法

    这篇文章主要介绍了微信小程序-获取用户地理位置名称(无须用户授权)的方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-04-04
  • JavaScript关联数组用法分析【概念、定义、遍历】

    JavaScript关联数组用法分析【概念、定义、遍历】

    这篇文章主要介绍了JavaScript关联数组用法,结合实例形式分析了关联数组的概念、定义与遍历操作相关实现技巧,需要的朋友可以参考下
    2017-03-03
  • Object.defineproperty方法示例详解

    Object.defineproperty方法示例详解

    Object.defineproperty 的作用就是直接在一个对象上定义一个新属性,或者修改一个已经存在的属性,这篇文章主要介绍了Object.defineproperty方法,需要的朋友可以参考下
    2022-12-12
  • 微信小程序自定义tabbar栏实现过程讲解

    微信小程序自定义tabbar栏实现过程讲解

    tabBar相对而言用的还是比较多的,但是用起来并没有难,下面这篇文章主要给大家介绍了关于微信小程序全局配置之tabBar的相关资料,文中通过图文以及示例代码介绍的非常详细,需要的朋友可以参考下
    2023-02-02
  • Java 正则表达式学习总结和一些小例子

    Java 正则表达式学习总结和一些小例子

    字符串处理是许多程序中非常重要的一部分,它们可以用于文本显示,数据表示,查找键和很多目的.在Unix下,用户可以使用正则表达式的强健功能实现这些 目的
    2012-09-09
  • JavaScript实现离开页面前提示功能【附jQuery实现方法】

    JavaScript实现离开页面前提示功能【附jQuery实现方法】

    这篇文章主要介绍了JavaScript实现离开页面前提示功能,结合具体实例形式分析了javascript实现针对关闭页面的事件响应原理与操作技巧,并附带jQuery的相应实现方法,需要的朋友可以参考下
    2017-09-09
  • 原生JS实现萤火虫效果

    原生JS实现萤火虫效果

    这篇文章主要为大家详细介绍了原生JS实现萤火虫效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-03-03
  • Bootstrap~多级导航(级联导航)的实现效果【附代码】

    Bootstrap~多级导航(级联导航)的实现效果【附代码】

    下面小编就为大家分享一篇Bootstrap~多级导航(级联导航)的实现效果【附代码】。小编觉得挺不错。希望对大家有所帮助。一起跟随小编过来看看吧
    2016-03-03
  • JS监听变量改变的实现

    JS监听变量改变的实现

    本文主要介绍了JS监听变量改变的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2023-04-04

最新评论