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的压缩及jquery压缩探讨(提高页面加载性能/保护劳动成果)
Jan 29 Javascript
JS刷新框架外页面七种实现代码
Feb 18 Javascript
JSP跨iframe如何传递参数实现代码
Sep 21 Javascript
javascript中clone对象详解
Dec 03 Javascript
浅谈 javascript 事件处理
Jan 04 Javascript
jqueryUI里拖拽排序示例分析
Feb 26 Javascript
javascript实现在网页中运行本地程序的方法
Feb 03 Javascript
深入解析Backbone.js框架的依赖库Underscore.js的作用
May 07 Javascript
基于JavaScript实现窗口拖动效果
Jan 18 Javascript
详解React中的组件通信问题
Jul 31 Javascript
JavaScript工具库之Lodash详解
Jun 15 Javascript
vue实现tab栏点击高亮效果
Aug 19 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学习笔记汇总
2014/10/05 PHP
PHP获取POST数据的几种方法汇总
2015/03/03 PHP
php抽象方法和普通方法的区别点总结
2019/10/13 PHP
JavaScript实现页面滚动图片加载(仿lazyload效果)
2011/07/22 Javascript
jquery实现带复选框的表格行选中删除时高亮显示
2013/08/01 Javascript
Jqgrid设置全选(选择)及获取选择行的值示例代码
2013/12/28 Javascript
详解JavaScript中shift()方法的使用
2015/06/09 Javascript
JavaScript中函数(Function)的apply与call理解
2015/07/08 Javascript
JavaScript实现带箭头标识的多级下拉菜单效果
2015/08/27 Javascript
jQuery使用$.ajax提交表单完整实例
2015/12/11 Javascript
使用Javascript监控前端相关数据的代码
2016/10/27 Javascript
微信小程序车牌号码模拟键盘输入功能的实现代码
2018/11/11 Javascript
Vue看了就会的8个小技巧
2021/01/21 Vue.js
常见python正则用法的简单实例
2016/06/21 Python
python anaconda 安装 环境变量 升级 以及特殊库安装的方法
2017/06/21 Python
Python+tkinter使用80行代码实现一个计算器实例
2018/01/16 Python
解决sublime+python3无法输出中文的问题
2018/12/12 Python
python-OpenCV 实现将数组转换成灰度图和彩图
2020/01/09 Python
Python小白学习爬虫常用请求报头
2020/06/03 Python
如何更换python默认编辑器的背景色
2020/08/10 Python
python给list排序的简单方法
2020/12/10 Python
pycharm 关闭search everywhere的解决操作
2021/01/15 Python
Python对excel的基本操作方法
2021/02/18 Python
htmlentities() 和 htmlspecialchars()有什么区别
2015/07/01 面试题
判断单链表中是否存在环
2012/07/16 面试题
What's the difference between Debug and Trace class? (Debug类与Trace类有什么区别)
2013/09/10 面试题
药学专业大学生个人的自我评价
2013/11/04 职场文书
公司培训心得体会
2014/01/03 职场文书
铁路个人事迹材料
2014/01/30 职场文书
教师学习培训邀请函
2014/02/04 职场文书
终止劳动合同协议书
2014/04/14 职场文书
争先创优公开承诺书
2014/08/30 职场文书
晚自修旷课检讨书怎么写
2014/11/17 职场文书
企业愿景口号
2015/12/25 职场文书
Mac M1安装mnmp (Mac+Nginx+MySQL+PHP) 开发环境
2021/03/29 PHP
Java Spring 控制反转(IOC)容器详解
2021/10/05 Java/Android