浅谈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 相关文章推荐
刷新页面实现方式总结(HTML,ASP,JS)
Nov 13 Javascript
Jquery中getJSON在asp.net中的使用说明
Mar 10 Javascript
IE下使用cloneNode注意事项分享
Nov 22 Javascript
JS实现div内部的文字或图片自动循环滚动代码
Apr 19 Javascript
jQuery之按钮组件的深入解析
Jun 19 Javascript
JavaScript中的Array 对象(数组对象)
Jun 02 Javascript
JQuery对ASP.NET MVC数据进行更新删除
Jul 13 Javascript
layui弹出层效果实现代码
May 19 Javascript
js中时间格式化的几种方法
Jul 22 Javascript
解决Vue axios post请求,后台获取不到数据的问题方法
Aug 11 Javascript
用原生JS实现爱奇艺首页导航栏代码实例
Sep 19 Javascript
JavaScript事件概念详解(区分静态注册和动态注册)
Feb 05 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
mysql limit查询优化分析
2008/11/12 PHP
php批量上传的实现代码
2013/06/09 PHP
PHP中Session引起的脚本阻塞问题解决办法
2014/04/08 PHP
使用array_map简单搞定PHP删除文件、删除目录
2014/10/29 PHP
php实现二进制和文本相互转换的方法
2015/04/18 PHP
Thinkphp框架开发移动端接口(1)
2016/08/18 PHP
PHP7原生MySQL数据库操作实现代码
2020/07/03 PHP
Js+Dhtml:WEB程序员简易开发工具包(预先体验版)
2006/11/07 Javascript
juqery 学习之三 选择器 可见性 元素属性
2010/11/25 Javascript
JavaScript简单实现网页回到顶部功能
2013/11/12 Javascript
javascript遍历控件实例详细解析
2014/01/10 Javascript
使用jQuery实现Web页面换肤功能的要点解析
2016/05/12 Javascript
ES6入门教程之let和const命令详解
2017/05/17 Javascript
Vue Cli3 创建项目的方法步骤
2018/10/15 Javascript
详解JavaScript数据类型和判断方法
2020/09/04 Javascript
Python安装使用命令行交互模块pexpect的基础教程
2016/05/12 Python
利用python模拟实现POST请求提交图片的方法
2017/07/25 Python
python如何生成网页验证码
2018/07/28 Python
python版opencv摄像头人脸实时检测方法
2018/08/03 Python
django+xadmin+djcelery实现后台管理定时任务
2018/08/14 Python
python3中pip3安装出错,找不到SSL的解决方式
2019/12/12 Python
使用python去除图片白色像素的实例
2019/12/12 Python
Python变量作用域LEGB用法解析
2020/02/04 Python
用python写一个带有gui界面的密码生成器
2020/11/06 Python
CSS3实现多重边框的方法总结
2016/05/31 HTML / CSS
突袭HTML5之Javascript API扩展1—Web Worker异步执行及相关概述
2013/01/31 HTML / CSS
美国女孩洋娃娃店:American Girl
2017/10/24 全球购物
微软美国官方网站:Microsoft美国
2018/05/10 全球购物
ABOUT YOU罗马尼亚:超过600个时尚品牌
2019/09/19 全球购物
计算机应用专业推荐信
2013/11/13 职场文书
工业设计专业个人求职信范文
2013/12/28 职场文书
趣味比赛活动方案
2014/02/15 职场文书
2014年国庆节演讲稿
2014/09/02 职场文书
单位作风建设自查报告
2014/10/23 职场文书
2015羊年春节慰问信
2015/02/14 职场文书
python前后端自定义分页器
2022/04/13 Python