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 相关文章推荐
js 动态选中下拉框
Nov 26 Javascript
javascript中xml操作实现代码
Nov 21 Javascript
json的前台操作和后台操作实现代码
Jan 20 Javascript
javascript实现在网页任意处点左键弹出隐藏菜单的方法
May 13 Javascript
js实现表格筛选功能
Jan 18 Javascript
JS Select下拉框(支持输入模糊查询)
Feb 04 Javascript
20行JS代码实现网页刮刮乐效果
Jun 23 Javascript
深入理解requireJS-实现一个简单的模块加载器
Jan 15 Javascript
Vue中 v-if 和v-else-if页面加载出现闪现的问题及解决方法
Oct 12 Javascript
Vue-CLI项目中路由传参的方式详解
Sep 01 Javascript
全面解析JavaScript Module模式
Jul 24 Javascript
Vue实现摇一摇功能(兼容ios13.3以上)
Jan 26 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
FCKeditor添加自定义按钮
2008/03/27 PHP
PHP 判断变量类型实现代码
2009/10/23 PHP
PHP新手NOTICE错误常见解决方法
2011/12/07 PHP
PHP的文件操作与算法实现的面试题示例
2015/08/10 PHP
值得分享的php+ajax实时聊天室
2016/07/20 PHP
详解PHP编码转换函数应用技巧
2016/10/22 PHP
thinkPHP5 ACL用户权限模块用法详解
2017/05/10 PHP
Laravel6.2中用于用户登录的新密码确认流程详解
2019/10/16 PHP
PHP上传图片到数据库并显示的实例代码
2019/12/20 PHP
EasySlider 基于jQuery功能强大简单易用的滑动门插件
2010/06/11 Javascript
学习JavaScript设计模式之迭代器模式
2016/01/19 Javascript
js关于getImageData跨域问题的解决方法
2016/10/14 Javascript
React中ES5与ES6写法的区别总结
2017/04/21 Javascript
vue.js开发环境搭建教程
2017/05/04 Javascript
微信小程序 http请求的session管理
2017/06/07 Javascript
浅谈关于.vue文件中style的scoped属性
2017/08/19 Javascript
Angular2的管道Pipe的使用方法
2017/11/07 Javascript
nodejs express配置自签名https服务器的方法
2018/05/22 NodeJs
详解创建自定义的Angular Schematics
2018/06/06 Javascript
js实现全选和全不选功能
2020/07/28 Javascript
python paramiko模块学习分享
2017/08/23 Python
Python文件读写保存操作的示例代码
2018/09/14 Python
python中单例常用的几种实现方法总结
2018/10/13 Python
浅谈Pandas Series 和 Numpy array中的相同点
2019/06/28 Python
python中比较两个列表的实例方法
2019/07/04 Python
keras的load_model实现加载含有参数的自定义模型
2020/06/22 Python
Python学习笔记之装饰器
2020/08/06 Python
python 实现aes256加密
2020/11/27 Python
canvas实现手机的手势解锁的步骤详细
2020/03/16 HTML / CSS
周生生珠宝香港官网:Chow Sang Sang(香港及海外配送)
2019/09/05 全球购物
什么是servlet
2012/05/08 面试题
求职者怎样写自荐信
2014/04/13 职场文书
奥林匹克运动会口号
2014/06/19 职场文书
竞选班干部演讲稿500字
2014/08/20 职场文书
学生会竞选演讲稿学习部
2014/08/25 职场文书
MongoDB误操作后使用oplog恢复数据
2022/04/11 MongoDB