JavaScript对象_动力节点Java学院整理


Posted in Javascript onJune 23, 2017

JavaScript的对象是一种无序的集合数据类型,它由若干键值对组成。

JavaScript的对象用于描述现实世界中的某个对象。例如,为了描述“小明”这个淘气的小朋友,我们可以用若干键值对来描述他:

var xiaoming = {
  name: '小明',
  birth: 1990,
  school: 'No.1 Middle School',
  height: 1.70,
  weight: 65,
  score: null
};

JavaScript用一个{...}表示一个对象,键值对以xxx: xxx形式申明,用,隔开。注意,最后一个键值对不需要在末尾加,,如果加了,有的浏览器(如低版本的IE)将报错。

上述对象申明了一个name属性,值是'小明',birth属性,值是1990,以及其他一些属性。最后,把这个对象赋值给变量xiaoming后,就可以通过变量xiaoming来获取小明的属性了:

xiaoming.name; // '小明'
xiaoming.birth; // 1990

访问属性是通过.操作符完成的,但这要求属性名必须是一个有效的变量名。如果属性名包含特殊字符,就必须用''括起来:

var xiaohong = {
  name: '小红',
  'middle-school': 'No.1 Middle School'
};

xiaohong的属性名middle-school不是一个有效的变量,就需要用''括起来。访问这个属性也无法使用.操作符,必须用['xxx']来访问:

xiaohong['middle-school']; // 'No.1 Middle School'
xiaohong['name']; // '小红'
xiaohong.name; // '小红'

也可以用xiaohong['name']来访问xiaohong的name属性,不过xiaohong.name的写法更简洁。我们在编写JavaScript代码的时候,属性名尽量使用标准的变量名,这样就可以直接通过object.prop的形式访问一个属性了。

实际上JavaScript对象的所有属性都是字符串,不过属性对应的值可以是任意数据类型。

如果访问一个不存在的属性会返回什么呢?JavaScript规定,访问不存在的属性不报错,而是返回undefined:

var xiaoming = {
  name: '小明'
};
xiaoming.age; // undefined

由于JavaScript的对象是动态类型,你可以自由地给一个对象添加或删除属性:

var xiaoming = {
  name: '小明'
};
xiaoming.age; // undefined
xiaoming.age = 18; // 新增一个age属性
xiaoming.age; // 18
delete xiaoming.age; // 删除age属性
xiaoming.age; // undefined
delete xiaoming['name']; // 删除name属性
xiaoming.name; // undefined
delete xiaoming.school; // 删除一个不存在的school属性也不会报错

如果我们要检测xiaoming是否拥有某一属性,可以用in操作符:

var xiaoming = {
  name: '小明',
  birth: 1990,
  school: 'No.1 Middle School',
  height: 1.70,
  weight: 65,
  score: null
};
'name' in xiaoming; // true
'grade' in xiaoming; // false

不过要小心,如果in判断一个属性存在,这个属性不一定是xiaoming的,它可能是xiaoming继承得到的:

'toString' in xiaoming; // true

因为toString定义在object对象中,而所有对象最终都会在原型链上指向object,所以xiaoming也拥有toString属性。

要判断一个属性是否是xiaoming自身拥有的,而不是继承得到的,可以用hasOwnProperty()方法:

var xiaoming = {
  name: '小明'
};
xiaoming.hasOwnProperty('name'); // true
xiaoming.hasOwnProperty('toString'); // false

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
纯CSS打造的导航菜单(附jquery版)
Aug 07 Javascript
JavaScript常用的返回,自动跳转,刷新,关闭语句汇总
Jan 13 Javascript
javascript数据结构之二叉搜索树实现方法
Nov 25 Javascript
Bootstrap3制作自己的导航栏
May 12 Javascript
Bootstrap3学习笔记(二)之排版
May 20 Javascript
Bootstrap table的使用方法
Nov 02 Javascript
浅谈node的事件机制
Oct 09 Javascript
详解在vue-cli中引用jQuery、bootstrap以及使用sass、less编写css
Nov 08 jQuery
jQuery+CSS实现的table表格行列转置功能示例
Jan 08 jQuery
使用Vue写一个datepicker的示例
Jan 27 Javascript
vue 2.x 中axios 封装的get 和post方法
Feb 28 Javascript
js实现简单的日历显示效果函数示例
Nov 25 Javascript
JavaScript订单操作小程序完整版
Jun 23 #Javascript
详解vue模拟加载更多功能(数据追加)
Jun 23 #Javascript
JavaScript实现简单的树形菜单效果
Jun 23 #Javascript
AngularJS 限定$scope的范围实例详解
Jun 23 #Javascript
QRCode.js:基于JQuery的生成二维码JS库的使用
Jun 23 #jQuery
js实现城市级联菜单的2种方法
Jun 23 #Javascript
JS使用正则表达式验证身份证号码
Jun 23 #Javascript
You might like
Zend Framework教程之Application用法实例详解
2016/03/14 PHP
微信公众号判断用户是否已关注php代码解析
2016/06/24 PHP
php简单生成一组与多组随机字符串的方法
2017/05/09 PHP
浅谈php使用curl模拟多线程发送请求
2019/03/08 PHP
laravel实现上传图片,并且制作缩略图,按照日期存放的代码
2019/10/16 PHP
javascript 面向对象继承
2009/11/26 Javascript
Jquery实现仿新浪微博获取文本框能输入的字数代码
2013/02/22 Javascript
异步动态加载js与css文件的js代码
2013/09/15 Javascript
js整数字符串转换为金额类型数据(示例代码)
2013/12/26 Javascript
对new functionName()定义一个函数的理解
2014/05/22 Javascript
jquery中one()方法的用法实例
2015/01/16 Javascript
浅谈javascript属性onresize
2015/04/20 Javascript
bootstrap布局中input输入框右侧图标点击功能
2016/05/16 Javascript
jQuery Ajax 上传文件处理方式介绍(推荐)
2016/06/30 Javascript
JS使用cookie设置样式的方法
2016/06/30 Javascript
vue学习笔记之vue1.0和vue2.0的区别介绍
2017/05/17 Javascript
JS脚本实现网页自动秒杀点击
2018/01/11 Javascript
详解基于Vue-cli搭建的项目如何和后台交互
2018/06/29 Javascript
vue 解决setTimeOut和setInterval函数无效报错的问题
2020/07/30 Javascript
解决vue项目打包上服务器显示404错误,本地没出错的问题
2020/11/03 Javascript
[48:23]DOTA2上海特级锦标赛主赛事日 - 4 败者组第四轮#1COL VS EG第一局
2016/03/05 DOTA
[58:46]OG vs NAVI 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/17 DOTA
将TensorFlow的模型网络导出为单个文件的方法
2018/04/23 Python
详解Python字典的操作
2019/03/04 Python
如何在django中添加日志功能
2020/02/06 Python
英国高街奥特莱斯:Highstreet Outlet
2019/11/21 全球购物
易程科技软件测试笔试
2013/03/24 面试题
领导视察欢迎词
2014/01/15 职场文书
长安大学毕业生自我鉴定
2014/01/17 职场文书
优乐美广告词
2014/03/14 职场文书
员工安全生产责任书
2014/07/22 职场文书
2014教师教育实践活动对照检查材料思想汇报
2014/09/21 职场文书
2014年党员发展工作总结
2014/12/02 职场文书
2016年寒假政治学习心得体会
2015/10/09 职场文书
python实现图片九宫格分割的示例
2021/04/25 Python
Java8 CompletableFuture 异步回调
2022/04/28 Java/Android