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 相关文章推荐
二级域名转向类
Nov 09 Javascript
js 鼠标拖动对象 可让任何div实现拖动效果
Nov 09 Javascript
javascript中关于break,continue的特殊用法与介绍
May 24 Javascript
javascript object array方法使用详解
Dec 03 Javascript
javascript中HTMLDOM操作详解
Dec 11 Javascript
Shell脚本实现Linux系统和进程资源监控
Mar 05 Javascript
Bootstrap组件(一)之菜单
May 11 Javascript
JavaScript中获取HTML元素值的三种方法
Jun 20 Javascript
微信小程序开发之Tabbar实例详解
Jan 09 Javascript
使用async-validator编写Form组件的方法
Jan 10 Javascript
JQuery特殊效果和链式调用操作示例
May 13 jQuery
JS判断数组四种实现方法详解
Jun 29 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 在文件指定行插入数据的代码
2010/05/08 PHP
php中替换字符串中的空格为逗号','的方法
2014/06/09 PHP
php观察者模式应用场景实例详解
2017/02/03 PHP
Laravel5.1框架注册中间件的三种场景详解
2019/07/09 PHP
用js来定义浏览器中一个左右浮动元素相对于页面主体宽度的位置的函数
2012/01/21 Javascript
使用jQuery实现input数值增量和减量的方法
2015/01/24 Javascript
JS实现判断碰撞的方法
2015/02/11 Javascript
javascript中attachEvent用法实例分析
2015/05/14 Javascript
JS实现自动切换文字的导航效果代码
2015/08/27 Javascript
js实现拖拽效果(构造函数)
2015/12/14 Javascript
原生JS取代一些JQuery方法的简单实现
2016/09/20 Javascript
实例教学如何写vue插件
2017/11/30 Javascript
在vue项目中安装使用Mint-UI的方法
2017/12/27 Javascript
js实现控制文件拖拽并获取拖拽内容功能
2018/02/17 Javascript
jQuery使用bind动态绑定事件无效的处理方法
2018/12/11 jQuery
简单通过settimeout看javascript的运行机制
2019/05/10 Javascript
微信小程序tabBar设置实例解析
2019/11/14 Javascript
[01:02]2014 DOTA2国际邀请赛中国区预选赛 现场抢先看
2014/05/22 DOTA
Python中zip()函数用法实例教程
2014/07/31 Python
Python3基础之list列表实例解析
2014/08/13 Python
使用Protocol Buffers的C语言拓展提速Python程序的示例
2015/04/16 Python
python实现linux下使用xcopy的方法
2015/06/28 Python
使用Python下载歌词并嵌入歌曲文件中的实现代码
2015/11/13 Python
Python格式化输出%s和%d
2018/05/07 Python
在Python中利用pickle保存变量的实例
2019/12/30 Python
基于python实现数组格式参数加密计算
2020/04/21 Python
Nginx+Uwsgi+Django 项目部署到服务器的思路详解
2020/05/08 Python
解决python执行较大excel文件openpyxl慢问题
2020/05/15 Python
AmazeUI 面板的实现示例
2020/08/17 HTML / CSS
Baby Tulai澳大利亚:美国婴儿背带品牌
2018/10/15 全球购物
如何通过 CSS 写出火焰效果
2021/03/24 HTML / CSS
中学教师请假制度
2014/02/03 职场文书
团购业务员岗位职责
2014/03/15 职场文书
区级文明单位申报材料
2014/05/15 职场文书
爱国口号
2014/06/19 职场文书
看看如何用Python绘制小米新版天价logo
2021/04/20 Python