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 相关文章推荐
javascript之dhDataGrid Ver2.0.0代码
Jul 01 Javascript
JavaScript避免代码的重复执行经验技巧分享
Apr 17 Javascript
JavaScript基础知识学习笔记
Dec 02 Javascript
js中window.open的参数及注意注意事项
Jul 06 Javascript
浅谈使用splice函数对数组中的元素进行删除时的注意事项
Dec 04 Javascript
angularjs手动识别字符串中的换行符方法
Oct 02 Javascript
Vue使用NPM方式搭建项目
Oct 25 Javascript
微信小程序与后台PHP交互的方法实例分析
Dec 10 Javascript
解决微信小程序云开发中获取数据库的内容为空的方法
May 15 Javascript
微信小程序如何加载数据库真实数据的实现
Mar 04 Javascript
原生js实现弹窗消息动画
Nov 20 Javascript
vue+elementui 实现新增和修改共用一个弹框的完整代码
Jun 08 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中的Class的几点个人看法
2006/10/09 PHP
php比较两个绝对时间的大小
2014/01/31 PHP
详解PHP中foreach的用法和实例
2016/10/25 PHP
Laravel实现通过blade模板引擎渲染视图
2019/10/25 PHP
js实现权限树的更新权限时的全选全消功能
2009/02/17 Javascript
前端开发的开始---基于面向对象的Ajax类
2010/09/17 Javascript
js保存当前路径(cookies记录)
2010/12/14 Javascript
javascript动态添加样式(行内式/嵌入式/外链式等规则)
2013/06/24 Javascript
Node.js实现简单聊天服务器
2014/06/20 Javascript
javascript轻量级模板引擎juicer使用指南
2014/06/22 Javascript
js关于命名空间的函数实例
2015/02/05 Javascript
javascript密码强度校验代码(两种方法)
2015/08/10 Javascript
js改变style样式和css样式的简单实例
2016/06/28 Javascript
jquery实现tab选项卡切换效果(悬停、下方横线动画位移)
2017/05/05 jQuery
JS加密插件CryptoJS实现AES加密操作示例
2018/08/16 Javascript
webpack file-loader和url-loader的区别
2019/01/15 Javascript
微信小程序在线客服自动回复功能(基于node)
2019/07/03 Javascript
vue 源码解析之虚拟Dom-render
2019/08/26 Javascript
javascript之分片上传,断点续传的实际项目实现详解
2019/09/05 Javascript
js String.prototype.trim字符去前后空格的扩展
2020/08/23 Javascript
[00:31]2016完美“圣”典风云人物:国士无双宣传片
2016/12/04 DOTA
python字典序问题实例
2014/09/26 Python
Python解析命令行读取参数--argparse模块使用方法
2018/01/23 Python
解决Django加载静态资源失败的问题
2019/07/28 Python
Python拼接字符串的7种方式详解
2020/03/19 Python
用HTML5制作视频拼图的教程
2015/05/13 HTML / CSS
SQL Server笔试题
2012/01/10 面试题
应届生简历中的自我评价
2014/01/13 职场文书
三年大学生活自我鉴定
2014/01/21 职场文书
办公设备采购方案
2014/03/16 职场文书
2014年党总支工作总结
2014/12/18 职场文书
给女朋友的道歉短信
2015/05/12 职场文书
运动会加油稿
2015/07/22 职场文书
2016年秋季开学典礼新闻稿
2015/11/25 职场文书
Nginx中break与last的区别详析
2021/03/31 Servers
mysql配置SSL证书登录的实现
2021/09/04 MySQL