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 相关文章推荐
静态图片的十一种滤镜效果--不支持Ie7及非IE浏览器。
Mar 06 Javascript
javascript 面向对象编程基础 多态
Aug 21 Javascript
js 绑定带参数的事件以及手动触发事件
Apr 27 Javascript
兼容IE、FireFox、Chrome等浏览器的xml处理函数js代码
Nov 30 Javascript
JavaScript资源预加载组件和滑屏组件的使用推荐
Mar 10 Javascript
JavaScript必看小技巧(必看)
Jun 07 Javascript
JavaScript计算器网页版实现代码分享
Jul 15 Javascript
javaScript 逻辑运算符使用技巧整理
May 03 Javascript
基于js的变量提升和函数提升(详解)
Sep 17 Javascript
Vue2.0+Vux搭建一个完整的移动webApp项目的示例
Mar 19 Javascript
微信小程序swiper组件实现抖音翻页切换视频功能的实例代码
Jun 24 Javascript
VUE项目axios请求头更改Content-Type操作
Jul 24 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中经典方法实现判断多维数组是否为空
2011/10/23 PHP
PHP中一个有趣的preg_replace函数详解
2018/08/15 PHP
php fread函数使用方法总结
2019/05/28 PHP
Nigma vs AM BO3 第一场2.13
2021/03/10 DOTA
js中的escape及unescape函数的php实现代码
2007/09/04 Javascript
javascript contains和compareDocumentPosition 方法来确定是否HTML节点间的关系
2010/02/04 Javascript
jquery 设置元素相对于另一个元素的top值(实例代码)
2013/11/06 Javascript
javascript快速排序算法详解
2014/09/17 Javascript
开启Javascript中apply、call、bind的用法之旅模式
2015/10/28 Javascript
jQuery文件上传控件 Uploadify 详解
2016/06/20 Javascript
原生js实现可拖动的登录框效果
2017/01/21 Javascript
javascript常用的设计模式
2017/02/09 Javascript
JavaScript无缝滚动效果的实例代码
2017/03/27 Javascript
Vue实现动态显示textarea剩余字数
2017/05/22 Javascript
微信小程序 input输入及动态设置按钮的实现
2017/10/27 Javascript
详解angular路由高亮之RouterLinkActive
2018/04/28 Javascript
微信开发之微信jssdk录音功能开发示例
2018/10/22 Javascript
支付宝小程序tabbar底部导航
2018/11/06 Javascript
vue组件中节流函数的失效的原因和解决方法
2020/12/02 Vue.js
[01:06]DOTA2隆重推出2016冬季勇士令状 内含上海特级锦标赛互动指南
2016/02/17 DOTA
python使用rsa加密算法模块模拟新浪微博登录
2014/01/22 Python
Python中使用 Selenium 实现网页截图实例
2014/07/18 Python
wxPython窗口的继承机制实例分析
2014/09/28 Python
Pyhton中单行和多行注释的使用方法及规范
2016/10/11 Python
Python二维数组实现求出3*3矩阵对角线元素的和示例
2019/11/29 Python
python怎么对数字进行过滤
2020/07/05 Python
Python下划线5种含义代码实例解析
2020/07/10 Python
CSS3 background-image颜色渐变的实现代码
2018/09/13 HTML / CSS
美国知名女性服饰品牌:New York & Company
2017/03/23 全球购物
见习期自我鉴定
2013/11/07 职场文书
大三学生做职业规划:给未来找个方向
2014/02/24 职场文书
2014学雷锋活动心得体会
2014/03/10 职场文书
有趣的广告词
2014/03/18 职场文书
财务部会计岗位职责
2015/02/03 职场文书
活动宣传稿范文
2015/07/23 职场文书
详解Django的MVT设计模式
2021/04/29 Python