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 相关文章推荐
js类 from qq
Nov 13 Javascript
写的htc的数据表格
Jan 20 Javascript
Javascript的IE和Firefox兼容性汇编(zz)
Feb 02 Javascript
十分钟打造AutoComplete自动完成效果代码
Dec 26 Javascript
js函数获取html中className所在的内容并去除标签
Sep 08 Javascript
alert出数组中的随即值代码
Sep 25 Javascript
jquery加载单文件vue组件的方法
Jun 20 jQuery
vue 设置路由的登录权限的方法
Jul 03 Javascript
vue项目打包部署到服务器的方法示例
Aug 27 Javascript
微信小程序实现搜索功能并跳转搜索结果页面
May 18 Javascript
vue实现固定位置显示功能
May 30 Javascript
BootstrapValidator实现表单验证功能
Nov 08 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用户登录之cookie信息安全分析
2016/05/13 PHP
yii 2.0中表单小部件的使用方法示例
2017/05/23 PHP
PHP ADODB实现分页功能简单示例
2018/05/25 PHP
PHP时间戳和日期相互转换操作实例小结
2018/12/18 PHP
laravel 实现关闭CSRF(全部关闭、部分关闭)
2019/10/21 PHP
Nigma vs Alliance BO5 第四场2.14
2021/03/10 DOTA
超越Jquery_01_isPlainObject分析与重构
2010/10/20 Javascript
javascript开发中因空格引发的错误
2010/11/08 Javascript
javascript日期转换 时间戳转日期格式
2011/11/05 Javascript
js 获取坐标 通过JS得到当前焦点(鼠标)的坐标属性
2013/01/04 Javascript
控制台报错object is not a function的解决方法
2014/08/24 Javascript
JavaScript中的原型继承基础学习教程
2016/05/06 Javascript
jQuery中的select操作详解
2016/11/29 Javascript
layui导航栏实现代码
2017/05/19 Javascript
Kindeditor单独调用单图上传增加预览功能的实例
2017/07/31 Javascript
使用JavaScript生成罗马字符的实例代码
2018/06/08 Javascript
vue使用el-upload上传文件及Feign服务间传递文件的方法
2019/03/15 Javascript
layui动态渲染生成select的option值方法
2019/09/23 Javascript
Python文件夹与文件的相关操作(推荐)
2016/07/25 Python
Python3爬虫学习之将爬取的信息保存到本地的方法详解
2018/12/12 Python
浅谈Python接口对json串的处理方法
2018/12/19 Python
Python实现的在特定目录下导入模块功能分析
2019/02/11 Python
python爬虫模块URL管理器模块用法解析
2020/02/03 Python
python时间与Unix时间戳相互转换方法详解
2020/02/13 Python
在Matplotlib图中插入LaTex公式实例
2020/04/17 Python
python3发送request请求及查看返回结果实例
2020/04/30 Python
matplotlib 画双轴子图无法显示x轴的解决方法
2020/07/27 Python
Pycharm自动添加文件头注释和函数注释参数的方法
2020/10/23 Python
css3媒体查询中device-width和width的区别详解
2020/03/27 HTML / CSS
介绍一下Java的安全机制
2012/06/28 面试题
施工班组长岗位职责
2014/01/05 职场文书
村党支部公开承诺书
2014/05/29 职场文书
安全宣传标语口号
2014/06/06 职场文书
销售会议开幕词
2015/01/28 职场文书
长城的导游词
2015/01/30 职场文书
创业计划书之废品回收
2019/09/26 职场文书