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 Window及document对象详细整理
Jan 12 Javascript
JSON.stringify 语法实例讲解
Mar 14 Javascript
jQuery实现折叠、展开的菜单组效果代码
Sep 16 Javascript
关于事件mouseover ,mouseout ,mouseenter,mouseleave的区别
Oct 12 Javascript
基于JS实现移动端访问PC端页面时跳转到对应的移动端网页
Dec 24 Javascript
深入浅析knockout源码分析之订阅
Jul 12 Javascript
js cookie实现记住密码功能
Jan 17 Javascript
Vue2.0实现1.0的搜索过滤器功能实例代码
Mar 20 Javascript
详解离线安装npm包的几种方法
Nov 25 Javascript
小程序实现录音上传功能
Nov 22 Javascript
JS document文档的简单操作完整示例
Jan 13 Javascript
vue实现省市区联动 element-china-area-data插件
Apr 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
Ajax+PHP 边学边练 之二 实例
2009/11/24 PHP
采用PHP函数memory_get_usage获取PHP内存清耗量的方法
2011/12/06 PHP
PHP实现的构造sql语句类实例
2016/02/03 PHP
一段实现页面上的图片延时加载的js代码
2010/02/11 Javascript
jquery+css+ul模拟列表菜单具体实现思路
2013/04/15 Javascript
jquery中邮箱地址 URL网站地址正则验证实例代码
2013/09/15 Javascript
js 阻止子元素响应父元素的onmouseout事件具体实现
2013/12/23 Javascript
jQuery的ajax下载blob文件
2016/07/21 Javascript
javascript对浅拷贝和深拷贝的详解
2016/10/14 Javascript
bootstrap fileinput 上传插件的基础使用
2017/02/17 Javascript
微信小程序 跳转传递数据的实例
2017/07/06 Javascript
vue组件编写之todolist组件实例详解
2018/01/22 Javascript
Vuex 使用及简单实例(计数器)
2018/08/29 Javascript
vue-cli 使用axios的操作方法及整合axios的多种方法
2018/09/12 Javascript
加速vue组件渲染之性能优化
2020/04/09 Javascript
[58:21]DOTA2亚洲邀请赛 4.3 突围赛 Liquid vs VGJ.T 第二场
2018/04/04 DOTA
python高并发异步服务器核心库forkcore使用方法
2013/11/26 Python
Python3 XML 获取雅虎天气的实现方法
2018/02/01 Python
微信公众号token验证失败解决方案
2019/07/22 Python
python+selenium定时爬取丁香园的新型冠状病毒数据并制作出类似的地图(部署到云服务器)
2020/02/09 Python
Django REST framwork的权限验证实例
2020/04/02 Python
PyTorch中的C++扩展实现
2020/04/02 Python
Python库skimage绘制二值图像代码实例
2020/04/10 Python
python如何编写类似nmap的扫描工具
2020/11/06 Python
python 基于opencv 绘制图像轮廓
2020/12/11 Python
施华洛世奇澳大利亚官网:SWAROVSKI澳大利亚
2017/01/06 全球购物
缅甸网上购物:Shop.com.mm
2017/12/05 全球购物
外企C语言笔试题
2013/11/10 面试题
是否有自动比较结构的方法
2015/06/03 面试题
院药学专业个人求职信
2013/09/21 职场文书
私营公司诉讼代理委托书范本
2014/09/13 职场文书
2015年小学体育工作总结
2015/05/22 职场文书
幼儿园小班教学反思
2016/03/03 职场文书
小学生作文之《压岁钱的烦恼》
2019/09/27 职场文书
JPA 通过Specification如何实现复杂查询
2021/11/23 Java/Android
Golang实现可重入锁的示例代码
2022/05/25 Golang