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 验证表单(form)中的单选(radio)值
Sep 08 Javascript
基于jQuery.Validate验证库知识点的详解
Apr 26 Javascript
jQuery多个input求和的实现方法
Feb 12 Javascript
jQuery.Uploadify插件实现带进度条的批量上传功能
Jun 08 Javascript
Node.js DES加密的简单实现
Jul 07 Javascript
谈谈PHP中相对路径的问题与绝对路径的使用
Aug 16 Javascript
jquery.Callbacks的实现详解
Nov 30 Javascript
基于Node的React图片上传组件实现实例代码
May 10 Javascript
JavaScript实现跟随滚动缓冲运动广告框
Jul 15 Javascript
vue加载自定义的js文件方法
Mar 13 Javascript
微信小程序列表时间戳转换实现过程解析
Oct 12 Javascript
Vue-cli项目部署到Nginx服务器的方法
Nov 01 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
改变Apache端口等配置修改方法
2008/06/05 PHP
php使用正则表达式去掉html中的注释方法
2016/11/03 PHP
Zend Framework入门教程之Zend_Config组件用法详解
2016/12/09 PHP
PHP使用new StdClass()创建空对象的方法分析
2017/06/06 PHP
jquery利用ajax调用后台方法实例
2013/08/23 Javascript
使用JS读秒使用示例
2013/09/21 Javascript
Javascript中对象继承的实现小例
2014/05/12 Javascript
js获取所有checkbox的值的简单实例
2016/05/30 Javascript
浅谈ES6 模板字符串的具体使用方法
2017/11/07 Javascript
nodejs简单访问及操作mysql数据库的方法示例
2018/03/15 NodeJs
JavaScript数组去重算法实例小结
2018/05/07 Javascript
微信小程序实现的绘制table表格功能示例
2019/04/26 Javascript
vue项目打包之开发环境和部署环境的实现
2020/04/23 Javascript
在Angular中实现一个级联效果的下拉框的示例代码
2020/05/20 Javascript
vue 中的动态传参和query传参操作
2020/11/09 Javascript
python采集百度百科的方法
2015/06/05 Python
实例探究Python以并发方式编写高性能端口扫描器的方法
2016/06/14 Python
详解如何在python中读写和存储matlab的数据文件(*.mat)
2018/02/24 Python
python读取几个G的csv文件方法
2019/01/07 Python
Python 用三行代码提取PDF表格数据
2019/10/13 Python
python 协程中的迭代器,生成器原理及应用实例详解
2019/10/28 Python
Python 字节流,字符串,十六进制相互转换实例(binascii,bytes)
2020/05/11 Python
python 如何利用argparse解析命令行参数
2020/09/11 Python
python复合条件下的字典排序
2020/12/18 Python
python asyncio 协程库的使用
2021/01/21 Python
CSS3 3D旋转rotate效果实例介绍
2016/05/03 HTML / CSS
结合 CSS3 transition transform 实现简单的跑马灯效果的示例
2018/02/07 HTML / CSS
比利时香水网上商店:NOTINO
2018/03/28 全球购物
Lacoste(法国鳄鱼)加拿大官网:以标志性的POLO衫而闻名
2019/05/15 全球购物
Cynthia Rowley官网:全球领先的生活方式品牌
2020/10/27 全球购物
Nike瑞士官网:Nike CH
2021/01/18 全球购物
网络安全类面试题
2015/08/01 面试题
演讲稿开场白台词
2014/08/25 职场文书
刑事辩护授权委托书范本
2014/10/17 职场文书
数据结构课程设计心得体会
2016/01/15 职场文书
导游词之开封禹王台风景区
2019/12/02 职场文书