javascript对象的使用和属性操作示例详解


Posted in Javascript onMarch 02, 2014

JavaScript 中所有变量都是对象,除了两个例外 null 和 undefined。

false.toString(); // 'false'
[1, 2, 3].toString(); // '1,2,3'function Foo(){}
Foo.bar = 1;
Foo.bar; // 1

一个常见的误解是数字的字面值(literal)不是对象。这是因为 JavaScript 解析器的一个错误, 它试图将点操作符解析为浮点数字面值的一部分。

2.toString(); // 出错:SyntaxError

有很多变通方法可以让数字的字面值看起来像对象。

2..toString(); // 第二个点号可以正常解析
2 .toString(); // 注意点号前面的空格
(2).toString(); // 2先被计算
 

对象作为数据类型

JavaScript 的对象可以作为哈希表使用,主要用来保存命名的键与值的对应关系。

使用对象的字面语法 - {} - 可以创建一个简单对象。这个新创建的对象从Object.prototype 继承下面,没有任何自定义属性。

var foo = {}; // 一个空对象// 一个新对象,拥有一个值为12的自定义属性'test'
var bar = {test: 12};

访问属性

有两种方式来访问对象的属性,点操作符或者中括号操作符。

var foo = {name: 'kitten'}
foo.name; // kitten
foo['name']; // kittenvar get = 'name';
foo[get]; // kitten
foo.1234; // SyntaxError
foo['1234']; // works

两种语法是等价的,但是中括号操作符在下面两种情况下依然有效 - 动态设置属性 - 属性名不是一个有效的变量名(译者注:比如属性名中包含空格,或者属性名是 JS 的关键词)

译者注:在 JSLint 语法检测工具中,点操作符是推荐做法。

 

删除属性

删除属性的唯一方法是使用 delete 操作符;设置属性为 undefined 或者null 并不能真正的删除属性, 而仅仅是移除了属性和值的关联。

14
var obj = {
    bar: 1,
    foo: 2,
    baz: 3
};
obj.bar = undefined;
obj.foo = null;
delete obj.baz;for(var i in obj) {
    if (obj.hasOwnProperty(i)) {
        console.log(i, '' + obj[i]);
    }
}

上面的输出结果有 bar undefined 和 foo null - 只有 baz 被真正的删除了,所以从输出结果中消失。

 

属性名的语法

var test = {
    'case': 'I am a keyword so I must be notated as a string',
    delete: 'I am a keyword too so me' // 出错:SyntaxError
};

对象的属性名可以使用字符串或者普通字符声明。但是由于 JavaScript 解析器的另一个错误设计, 上面的第二种声明方式在 ECMAScript 5 之前会抛出SyntaxError 的错误。

这个错误的原因是 delete 是 JavaScript 语言的一个关键词;因此为了在更低版本的 JavaScript 引擎下也能正常运行, 必须使用字符串字面值声明方式。

Javascript 相关文章推荐
Google韩国首页图标动画效果
Aug 26 Javascript
dojo随手记 gird组件引用
Feb 24 Javascript
JS判断两个时间大小的示例代码
Jan 28 Javascript
兼容最新firefox、chrome和IE的javascript图片预览实现代码
Aug 08 Javascript
使用node.js 获取客户端信息代码分享
Nov 26 Javascript
JavaScript控制网页层收起和展开效果的方法
Apr 15 Javascript
Javascript表单特效之十大常用原理性样例代码大总结
Jul 12 Javascript
Bootstrap导航条的使用和理解3
Dec 14 Javascript
浅谈webpack 四个核心概念之Entry
Jun 12 Javascript
vue 手机物理监听键+退出提示代码
Sep 09 Javascript
Nuxt 嵌套路由nuxt-child组件用法(父子页面组件的传值)
Nov 05 Javascript
vue form表单post请求结合Servlet实现文件上传功能
Jan 22 Vue.js
使用js显示当前时间示例
Mar 02 #Javascript
jquery实现背景墙聚光灯效果示例分享
Mar 02 #Javascript
jquery制作弹窗提示窗口代码分享
Mar 02 #Javascript
jquery中ajax函数执行顺序问题之如何设置同步
Feb 28 #Javascript
JavaScript获取当前页面上的指定对象示例代码
Feb 28 #Javascript
jquery获取当前点击对象的value方法
Feb 28 #Javascript
经过绑定元素时会多次触发mouseover和mouseout事件
Feb 28 #Javascript
You might like
在php中使用sockets:从新闻组中获取文章
2006/10/09 PHP
php一个解析字符串排列数组的方法
2015/05/12 PHP
浅谈本地WAMP环境的搭建
2015/05/13 PHP
PHP如何通过AJAX方式实现登录功能
2015/11/23 PHP
PHP+Ajax实现的无刷新分页功能详解【附demo源码下载】
2017/07/03 PHP
yii2中关于加密解密的那些事儿
2018/06/12 PHP
在Laravel5.6中使用Swoole的协程数据库查询
2018/06/15 PHP
javascript 年月日联动实现核心代码
2009/12/21 Javascript
javascript 静态对象和构造函数的使用和公私问题
2010/03/02 Javascript
精通Javascript系列之Javascript基础篇
2011/06/07 Javascript
js获取当前路径的简单示例代码
2014/01/08 Javascript
js获取通过ajax返回的map型的JSONArray的方法
2014/01/09 Javascript
jQuery each函数源码分析
2016/05/25 Javascript
js实现当鼠标移到表格上时显示这一格全部内容的代码
2016/06/12 Javascript
AngularJS页面带参跳转及参数解析操作示例
2017/06/28 Javascript
bootstrap响应式导航条模板使用详解(含下拉菜单,弹出框)
2017/11/17 Javascript
微信小程序 网络通信实现详解
2019/07/23 Javascript
[54:15]DOTA2-DPC中国联赛 正赛 DLG vs Dragon BO3 第二场2月1日
2021/03/11 DOTA
Django1.7+python 2.78+pycharm配置mysql数据库
2016/10/09 Python
Python字典实现简单的三级菜单(实例讲解)
2017/07/31 Python
在pycharm中设置显示行数的方法
2019/01/16 Python
Python 判断图像是否读取成功的方法
2019/01/26 Python
使用python serial 获取所有的串口名称的实例
2019/07/02 Python
美国Rue La La闪购网站:奢侈品、中高档品牌限时折扣
2016/10/19 全球购物
澳大利亚最大的女装零售商:Millers
2017/09/10 全球购物
英国文具、办公用品和科技商店:Ryman
2018/09/27 全球购物
Java如何支持I18N?
2016/10/31 面试题
高一地理教学反思
2014/01/18 职场文书
初中考试作弊检讨书
2014/02/01 职场文书
学雷锋演讲稿
2014/03/04 职场文书
司法局2014法制宣传日活动总结
2014/11/01 职场文书
2014年学校工会工作总结
2014/12/06 职场文书
2015年办公室主任工作总结
2015/04/09 职场文书
培训计划通知
2015/07/15 职场文书
优秀学生主要事迹怎么写
2015/11/04 职场文书
详解thinkphp的Auth类认证
2021/05/28 PHP