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 相关文章推荐
JavaScript 事件记录使用说明
Oct 20 Javascript
javascript窗口宽高,鼠标位置,滚动高度(详细解析)
Nov 18 Javascript
jquery 检测元素是否存在的实例代码
Nov 19 Javascript
javascript中setTimeout和setInterval的unref()和ref()用法示例
Nov 26 Javascript
非常棒的jQuery图片轮播效果
Apr 17 Javascript
关于JS中setTimeout()无法调用带参函数问题的解决方法
Jun 21 Javascript
jQuery基本选择器之标签名选择器
Sep 03 Javascript
vue.js父组件使用外部对象的方法示例
Apr 25 Javascript
浅谈Vue SPA 首屏加载优化实践
Dec 15 Javascript
CryptoJS中AES实现前后端通用加解密技术
Dec 18 Javascript
vuejs移动端实现div拖拽移动
Jul 25 Javascript
Vue自定义全局弹窗组件操作
Aug 11 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
一条久听不愿放下的DIY森海MX500,三言两语话神奇
2021/03/02 无线电
php程序的国际化实现方法(利用gettext)
2011/08/14 PHP
php生成随机密码自定义函数代码(简单快速)
2014/05/10 PHP
PHP实现四种基础排序算法的运行时间比较(推荐)
2016/08/11 PHP
thinkphp配置文件路径的实现方法
2016/08/30 PHP
php操作access数据库的方法详解
2017/02/22 PHP
javascript 遍历验证所有文本框的值
2009/08/27 Javascript
jquery ajax 同步异步的执行示例代码
2010/06/23 Javascript
JavaScript动态调整TextArea高度的代码
2010/12/28 Javascript
js精度溢出解决方案
2012/12/02 Javascript
动态显示可输入的字数提示还可以输入的字数
2014/04/01 Javascript
基于jQuery实现复选框的全选 全不选 反选功能
2014/11/24 Javascript
jquery.uploadify插件在chrome浏览器频繁崩溃解决方法
2015/03/01 Javascript
轻量级网页遮罩层jQuery插件用法实例
2015/07/31 Javascript
js关于getImageData跨域问题的解决方法
2016/10/14 Javascript
Bootstrap基本组件学习笔记之input输入框组(9)
2016/12/07 Javascript
jQuery实现鼠标滑过图片移动特效
2016/12/08 Javascript
详解Javascript数据类型的转换规则
2016/12/12 Javascript
微信小程序 input输入框控件详解及实例(多种示例)
2016/12/14 Javascript
angular仿支付宝密码框输入效果
2017/03/25 Javascript
Vue.JS项目中5个经典Vuex插件
2017/11/28 Javascript
jquery 输入框查找关键字并提亮颜色的实例代码
2018/01/23 jQuery
vue页面引入three.js实现3d动画场景操作
2020/08/10 Javascript
[01:03:36]Ti4 循环赛第三日DK vs Titan
2014/07/12 DOTA
python中while循环语句用法简单实例
2015/05/07 Python
Python实现提取谷歌音乐搜索结果的方法
2015/07/10 Python
谈谈python中GUI的选择
2018/03/01 Python
python range()函数取反序遍历sequence的方法
2018/06/25 Python
python 在某.py文件中调用其他.py内的函数的方法
2019/06/25 Python
Django之模板层的实现代码
2019/09/09 Python
成教毕业生自我鉴定
2013/10/23 职场文书
声乐专业大学生职业生涯规划书:理想的未来需要自己去打造
2014/09/20 职场文书
2015元旦文艺汇演主持稿(开场白+结束语)
2014/12/14 职场文书
离婚案件被告代理词
2015/05/23 职场文书
庆七一晚会主持词
2015/06/30 职场文书
用Java实现简单计算器功能
2021/07/21 Java/Android