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 相关文章推荐
function, new function, new Function之间的区别
Mar 08 Javascript
JavaScript实现复制功能各浏览器支持情况实测
Jul 18 Javascript
javascript 模拟坦克大战游戏(html5版)附源码下载
Apr 08 Javascript
js中的cookie的读写操作示例详解
Apr 17 Javascript
jQuery中slice()方法用法实例
Jan 07 Javascript
Javascript实现飞动广告效果的方法
May 25 Javascript
详解JavaScript基本类型和引用类型
Dec 09 Javascript
AngularJS中如何使用$parse或$eval在运行时对Scope变量赋值
Jan 25 Javascript
jQuery实现打开网页自动弹出遮罩层或点击弹出遮罩层功能示例
Oct 19 jQuery
vue计算属性时v-for处理数组时遇到的一个bug问题
Jan 21 Javascript
浅谈小程序 setData学问多
Feb 20 Javascript
layui实现checkbox的目录树tree的例子
Sep 12 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
用php实现让页面只能被百度gogole蜘蛛访问的方法
2009/12/29 PHP
PHP使用array_multisort对多个数组或多维数组进行排序
2014/12/16 PHP
php格式化json函数示例代码
2016/05/12 PHP
php7新特性的理解和比较总结
2019/04/14 PHP
Laravel 连接(Join)示例
2019/10/16 PHP
Javascript中的常见排序算法
2007/03/27 Javascript
基于jQuery的ajax功能实现web service的json转化
2009/08/29 Javascript
JavaScript 类的定义和引用 JavaScript高级培训 自定义对象
2010/04/27 Javascript
IE与FireFox中的childNodes区别
2011/10/20 Javascript
查找页面中所有类为test的结点的方法
2014/03/28 Javascript
javascript数据类型示例分享
2015/01/19 Javascript
AngularJS  $modal弹出框实例代码
2016/08/24 Javascript
JavaScript实现前端实时搜索功能
2020/03/26 Javascript
详解js删除数组中的指定元素
2018/10/31 Javascript
微信小程序 下拉刷新及上拉加载原理解析
2019/11/06 Javascript
vue中实现弹出层动画效果的示例代码
2020/09/25 Javascript
python语言使用技巧分享
2016/05/31 Python
Python 使用os.remove删除文件夹时报错的解决方法
2017/01/13 Python
Python随机数用法实例详解【基于random模块】
2017/04/18 Python
Python机器学习算法之k均值聚类(k-means)
2018/02/23 Python
PyQt5每天必学之QSplitter实现窗口分隔
2018/04/19 Python
Anaconda2下实现Python2.7和Python3.5的共存方法
2018/06/11 Python
Python标准库shutil模块使用方法解析
2020/03/10 Python
Python GUI编程学习笔记之tkinter界面布局显示详解
2020/03/30 Python
五分钟带你搞懂python 迭代器与生成器
2020/08/30 Python
纯css3实现照片墙效果
2014/12/26 HTML / CSS
Html5移动端获奖无缝滚动动画实现示例
2018/06/25 HTML / CSS
英国女性化妆品收纳和家具网站:Beautify
2019/12/07 全球购物
加拿大专业美发产品购物网站:Chatters
2021/02/28 全球购物
如何通过jdbc调用存储过程
2012/04/19 面试题
金属材料工程毕业生个人的自我评价
2013/11/28 职场文书
营销人才自我鉴定范文
2013/12/25 职场文书
剪彩仪式主持词
2014/03/19 职场文书
合作协议书范本
2014/04/17 职场文书
大学生活动总结怎么写
2014/04/29 职场文书
2014年教师节演讲稿范文
2014/09/10 职场文书