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中正则表达式的全局匹配模式分析
Apr 26 Javascript
javascript学习笔记(二) js一些基本概念
Jun 18 Javascript
JavaScript实现文本框中默认显示背景图片在获得焦点后消失的方法
Jul 01 Javascript
jQuery实用技巧必备(下)
Nov 03 Javascript
关于JavaScript 原型链的一点个人理解
Jul 31 Javascript
Angular组件化管理实现方法分析
Mar 17 Javascript
如何解决vue与传统jquery插件冲突
Mar 20 Javascript
JS设置手机验证码60s等待实现代码
Jun 14 Javascript
JavaScript常用事件介绍
Jan 21 Javascript
微信小程序学习笔记之目录结构、基本配置图文详解
Mar 28 Javascript
Vue使用screenfull实现全屏效果
Sep 17 Javascript
JavaScript原始值与包装对象的详细介绍
May 11 Javascript
使用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的无刷新操作实现方法分析
2020/02/28 PHP
Mootools 1.2教程(21)——类(二)
2009/09/15 Javascript
jquery下异步提交表单 异步跨域提交表单
2010/11/17 Javascript
ajax java 实现自动完成功能
2012/12/19 Javascript
ajax读取数据后使用jqchart显示图表的方法
2015/06/10 Javascript
javascript如何操作HTML下拉列表标签
2015/08/20 Javascript
Angularjs中的事件广播 —全面解析$broadcast,$emit,$on
2016/05/17 Javascript
AngularJS 整理一些优化的小技巧
2016/08/18 Javascript
js日期相关函数dateAdd,dateDiff,dateFormat等介绍
2016/09/24 Javascript
利用jQuery对无序列表排序的简单方法
2016/10/16 Javascript
深入理解Angular.JS中的Scope继承
2017/06/04 Javascript
JavaScript指定断点操作实例教程
2018/09/18 Javascript
原生JS实现萤火虫效果
2020/03/07 Javascript
jQuery插件实现图片轮播效果
2020/10/19 jQuery
[01:30]2016国际邀请赛中国区预选赛神秘商店火爆开启
2016/06/26 DOTA
[01:02:32]DOTA2-DPC中国联赛 正赛 iG vs PSG.LGD BO3 第二场 2月26日
2021/03/11 DOTA
Python变量和数据类型详解
2017/02/15 Python
Python内置模块turtle绘图详解
2017/12/09 Python
Python实现中一次读取多个值的方法
2018/04/22 Python
pandas.DataFrame.to_json按行转json的方法
2018/06/05 Python
详解django自定义中间件处理
2018/11/21 Python
python买卖股票的最佳时机(基于贪心/蛮力算法)
2019/07/05 Python
pycharm安装及如何导入numpy
2020/04/03 Python
python des,aes,rsa加解密的实现
2021/01/16 Python
谷歌浏览器小字体处理方案即12px以下字体
2013/12/17 HTML / CSS
泰国办公用品购物网站:OfficeMate
2018/02/04 全球购物
奇怪的鱼:Weird Fish
2018/03/18 全球购物
Lulu Guinness露露·吉尼斯官网:红唇包
2019/02/03 全球购物
外科实习自我鉴定
2013/10/06 职场文书
企业年会主持词
2014/03/27 职场文书
群众路线党员个人整改措施
2014/10/27 职场文书
质量整改报告范文
2014/11/08 职场文书
营业用房租赁协议书
2014/11/26 职场文书
2014年妇产科工作总结
2014/12/08 职场文书
社区义诊通知
2015/04/24 职场文书
前端JS获取URL参数的4种方法总结
2022/04/05 Javascript