浅谈js中对象的使用


Posted in Javascript onAugust 11, 2016

简单记录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中对象的使用就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js设置文本框中焦点位置在最后的示例代码(简单实用)
Mar 04 Javascript
可恶的ie8提示缺少id未定义
Mar 20 Javascript
KnockoutJs快速入门教程
May 16 Javascript
jQuery+ajax简单实现文件上传的方法
Jun 03 Javascript
Javascript必知必会(四)js类型转换
Jun 08 Javascript
javascript 四十条常用技巧大全
Sep 09 Javascript
angularjs指令之绑定策略(@、=、&)
Apr 13 Javascript
js弹性势能动画之抛物线运动实例详解
Jul 27 Javascript
vue2.0$nextTick监听数据渲染完成之后的回调函数方法
Sep 11 Javascript
JS实现的贪吃蛇游戏案例详解
May 01 Javascript
JS数据类型(基本数据类型、引用数据类型)及堆和栈的区别分析
Mar 04 Javascript
Typescript3.9 常用新特性一览(推荐)
May 14 Javascript
js倒计时简单实现代码
Aug 11 #Javascript
原生态js,鼠标按下后,经过了那些单元格的简单实例
Aug 11 #Javascript
vue分页组件table-pagebar使用实例解析
Nov 15 #Javascript
使用BootStrap实现用户登录界面UI
Aug 10 #Javascript
基于JSON格式数据的简单jQuery幻灯片插件(jquery-slider)
Aug 10 #Javascript
BootStrap Typeahead自动补全插件实例代码
Aug 10 #Javascript
BootStrap中Datepicker控件带中文的js文件
Aug 10 #Javascript
You might like
PHP结合Mysql数据库实现留言板功能
2016/03/04 PHP
PHP 7.1新特性的汇总介绍
2016/12/16 PHP
用cssText批量修改样式
2009/08/29 Javascript
jQuery 遍历json数组的实现代码
2020/09/22 Javascript
基于jquery的Repeater实现代码
2010/07/17 Javascript
js 可拖动列表实现代码
2011/12/13 Javascript
JavaScrip实现PHP print_r的数功能(三种方法)
2013/11/12 Javascript
JS模式之简单的订阅者和发布者模式完整实例
2015/06/30 Javascript
jQuery实现html元素拖拽
2015/07/21 Javascript
Bootstrap轮播加上css3动画,炫酷到底!
2015/12/22 Javascript
jQuery绑定事件on()与弹窗的简要概述
2016/04/27 Javascript
Ajax基础知识详解
2017/02/17 Javascript
轻松玩转BootstrapTable(后端使用SpringMVC+Hibernate)
2017/09/06 Javascript
vue2.0 + element UI 中 el-table 数据导出Excel的方法
2018/03/02 Javascript
关于微信公众号开发无法支付的问题解决
2018/12/28 Javascript
Python实现对比不同字体中的同一字符的显示效果
2015/04/23 Python
Python中取整的几种方法小结
2017/01/06 Python
Python+tkinter使用80行代码实现一个计算器实例
2018/01/16 Python
基于python批量处理dat文件及科学计算方法详解
2018/05/08 Python
django框架实现一次性上传多个文件功能示例【批量上传】
2019/06/19 Python
Python3内置模块之base64编解码方法详解
2019/07/13 Python
python判断变量是否为int、字符串、列表、元组、字典的方法详解
2020/02/13 Python
欧洲高端品牌直销店:Fashionesta
2016/08/31 全球购物
我们是伦敦女孩:WalG
2018/01/08 全球购物
新闻专业本科生的自我评价分享
2013/11/20 职场文书
老师自我鉴定范文
2013/12/25 职场文书
某同学的自我鉴定范文
2013/12/26 职场文书
面试后感谢信怎么写
2014/02/01 职场文书
建筑安全员岗位职责
2014/03/13 职场文书
我的中国梦演讲稿小学篇
2014/08/19 职场文书
农业局党的群众路线教育实践活动整改方案
2014/09/20 职场文书
故宫导游词
2015/01/31 职场文书
2015年学校总务工作总结
2015/07/20 职场文书
2015年卫生院健康教育工作总结
2015/07/24 职场文书
小学生法制教育心得体会
2016/01/14 职场文书
Redis中有序集合的内部实现方式的详细介绍
2022/03/16 Redis