浅谈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 相关文章推荐
JavaScript Undefined,Null类型和NaN值区别
Oct 22 Javascript
Jquery显示和隐藏元素或设为只读(含Ligerui的控件禁用,实例说明介绍)
Jul 09 Javascript
jquery利用ajax调用后台方法实例
Aug 23 Javascript
jQuery中get()方法用法实例
Dec 27 Javascript
DOM节点的替换或修改函数replaceChild()用法实例
Jan 12 Javascript
Webpack 实现 Node.js 代码热替换
Oct 22 Javascript
浅谈jQuery双事件多重加载的问题
Oct 05 Javascript
jQuery实现花式轮播之圣诞节礼物传送效果
Dec 25 Javascript
微信小程序按钮去除边框线分享页面功能
Aug 27 Javascript
js如何获取图片url的Blob值并预览示例代码
Mar 07 Javascript
微信小程序 组件的外部样式externalClasses使用详解
Sep 06 Javascript
node.js中module模块的功能理解与用法实例分析
Feb 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
一个基于PDO的数据库操作类
2011/03/24 PHP
PHP里的中文变量说明
2011/07/23 PHP
php array_values 返回数组的值实例详解
2016/11/17 PHP
php 中奖概率算法实现代码
2017/01/25 PHP
php实现数组纵向转横向并过滤重复值的方法分析
2017/05/29 PHP
php实现微信企业付款到个人零钱功能
2018/10/09 PHP
Laravel 5.5 异常处理 & 错误日志的解决
2019/10/17 PHP
用javascript将数据库中的TEXT类型数据动态赋值到TEXTAREA中
2007/04/20 Javascript
JavaScript按位运算符的应用简析
2014/02/04 Javascript
node.js中使用q.js实现api的promise化
2014/09/17 Javascript
jQuery带箭头提示框tooltips插件集锦
2014/11/17 Javascript
JS代码随机生成姓名、手机号、身份证号、银行卡号
2016/04/27 Javascript
图文详解Heap Sort堆排序算法及JavaScript的代码实现
2016/05/04 Javascript
AngularJS 面试题集锦
2016/09/06 Javascript
基于jQuery实现歌词滚动版音乐播放器的代码
2016/09/17 Javascript
javascript深拷贝和浅拷贝详解
2017/02/14 Javascript
js实现模糊匹配功能
2017/02/15 Javascript
使用Vue CLI创建typescript项目的方法
2019/08/09 Javascript
vue element upload实现图片本地预览
2019/08/20 Javascript
详解Vue的七种传值方式
2021/02/08 Vue.js
python异步任务队列示例
2014/04/01 Python
Python基于最小二乘法实现曲线拟合示例
2018/06/14 Python
selenium3+python3环境搭建教程图解
2018/12/07 Python
Python学习笔记之自定义函数用法详解
2019/06/08 Python
利用selenium爬虫抓取数据的基础教程
2019/06/10 Python
利用Python的sympy包求解一元三次方程示例
2019/11/22 Python
Python Scrapy多页数据爬取实现过程解析
2020/06/12 Python
Keras 利用sklearn的ROC-AUC建立评价函数详解
2020/06/15 Python
pycharm激活码2020最新分享适用pycharm2020最新版亲测可用
2020/11/22 Python
欧洲领先的火车票和大巴票预订平台:Trainline
2018/12/26 全球购物
CHRONEXT英国:您的首选奢华腕表目的地
2020/03/30 全球购物
捐书活动总结
2014/05/04 职场文书
小学绿色学校申报材料
2014/08/23 职场文书
党的群众路线教育实践活动个人对照检查材料(企业)
2014/11/05 职场文书
党校学习个人总结
2015/02/15 职场文书
英文版辞职信
2015/02/28 职场文书