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 相关文章推荐
用jscript实现新建word文档
Jun 15 Javascript
jquery中dom操作和事件的实例学习 仿yahoo邮箱登录框的提示效果
Nov 30 Javascript
AngularJS中的Directive自定义一个表格
Jan 25 Javascript
JavaScript实现复制或剪切内容到剪贴板功能的方法
May 23 Javascript
JS实现选定指定HTML元素对象中指定文本内容功能示例
Feb 13 Javascript
vue中路由参数传递可能会遇到的坑
Dec 07 Javascript
React Router v4 入坑指南(小结)
Apr 08 Javascript
详解如何构建Promise队列实现异步函数顺序执行
Oct 23 Javascript
JavaScript使用小插件实现倒计时的方法讲解
Mar 11 Javascript
基于vue框架手写一个notify插件实现通知功能的方法
Mar 31 Javascript
基于JavaScript 实现拖放功能
Sep 12 Javascript
React Native登录之指纹登录篇的示例代码
Nov 03 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
7个JS基础知识总结
2014/03/05 Javascript
Jquery原生态实现表格header头随滚动条滚动而滚动
2014/03/18 Javascript
nodejs中使用monk访问mongodb
2014/07/06 NodeJs
解决Jquery向页面append新元素之后事件的绑定问题
2015/03/16 Javascript
创建你的第一个AngularJS应用的方法
2015/06/16 Javascript
全面解析Bootstrap表单使用方法(表单控件状态)
2015/11/24 Javascript
学习javascript面向对象 理解javascript原型和原型链
2016/01/04 Javascript
js实现可控制左右方向的无缝滚动效果
2016/05/29 Javascript
JavaScript实现九九乘法表的简单实例
2016/06/07 Javascript
同步异步动态引入js文件的几种方法总结
2016/09/23 Javascript
Javascript实现倒计时(防页面刷新)实例
2016/12/13 Javascript
ajax 提交数据到后台jsp页面及页面跳转问题
2017/01/19 Javascript
AngularJS表单提交实例详解
2017/02/18 Javascript
AngularJS使用ocLazyLoad实现js延迟加载
2017/07/05 Javascript
JS实现点击复选框变更DIV显示状态的示例代码
2017/12/18 Javascript
10个经典的网页鼠标特效代码
2018/01/09 Javascript
vue 监听键盘回车事件详解 @keyup.enter || @keyup.enter.native
2018/08/25 Javascript
vue权限管理系统的实现代码
2019/01/17 Javascript
vue.js实现备忘录demo
2019/06/26 Javascript
JavaScript检测浏览器是否支持CSS变量代码实例
2020/04/03 Javascript
对pycharm代码整体左移和右移缩进快捷键的介绍
2018/07/16 Python
使用Python的toolz库开始函数式编程的方法
2018/11/15 Python
解决Python一行输出不显示的问题
2018/12/03 Python
程序员的七夕用30行代码让Python化身表白神器
2019/08/07 Python
tensorflow 获取checkpoint中的变量列表实例
2020/02/11 Python
python实现全排列代码(回溯、深度优先搜索)
2020/02/26 Python
对django 2.x版本中models.ForeignKey()外键说明介绍
2020/03/30 Python
解决django框架model中外键不落实到数据库问题
2020/05/20 Python
Python爬取股票信息,并可视化数据的示例
2020/09/26 Python
文秘应聘自荐书范文
2014/02/18 职场文书
行政人事专员岗位职责
2014/03/05 职场文书
益达广告词
2014/03/14 职场文书
2015年母亲节活动策划方案
2015/05/04 职场文书
JS如何实现基于websocket的多端桥接平台
2021/05/14 Javascript
阿里云 Windows server 2019 配置FTP
2022/04/28 Servers
vscode内网访问服务器的方法
2022/06/28 Servers