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 相关文章推荐
让alert不出现弹窗的两种方法
May 18 Javascript
简介AngularJS中$http服务的用法
Feb 06 Javascript
基于JavaScript实现百叶窗动画效果不只单纯flas可以实现
Feb 29 Javascript
全面解析bootstrap格子布局
May 22 Javascript
值得收藏的vuejs安装教程
Nov 21 Javascript
JS中的BOM应用
Feb 02 Javascript
vue.js 实现输入框动态添加功能
Jun 25 Javascript
vue-router中scrollBehavior的巧妙用法
Jul 09 Javascript
微信开发之企业付款到银行卡接口开发的示例代码
Sep 18 Javascript
vue实现密码显示与隐藏按钮的自定义组件功能
Apr 23 Javascript
Vue2.0 实现页面缓存和不缓存的方式
Nov 12 Javascript
详解Vue中$props、$attrs和$listeners的使用方法
Feb 18 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
JS中encodeURIComponent函数用php解码的代码
2012/03/01 PHP
php实现文件下载实例分享
2014/06/02 PHP
页面利用渐进式JPEG来提升用户体验度
2014/12/01 PHP
完美解决thinkphp验证码出错无法显示的方法
2014/12/09 PHP
如何解决PHP无法实现多线程的问题
2015/09/25 PHP
PHP读书笔记_运算符详解
2016/07/01 PHP
php实现简单的权限管理的示例代码
2017/08/25 PHP
PHP实现的链式队列结构示例
2017/09/15 PHP
PHP异步进程助手async-helper
2018/02/05 PHP
几个高效,简洁的字符处理函数
2007/04/12 Javascript
js读取本地excel文档数据的代码
2010/11/11 Javascript
AngularJS上拉加载问题解决方法
2016/05/23 Javascript
Javascript中arguments对象的详解与使用方法
2016/10/04 Javascript
javascript 注释代码的几种方法总结
2017/01/04 Javascript
AngularJS使用angular.bootstrap完成模块手动加载的方法分析
2017/01/19 Javascript
js将当前时间格式化为 年-月-日 时:分:秒的实现代码
2018/01/20 Javascript
在小程序中使用Echart图表的示例代码
2018/08/02 Javascript
基于JS抓取某高校附近共享单车位置 使用web方式展示位置变化代码实例
2019/08/27 Javascript
layui给下拉框、按钮状态、时间赋初始值的方法
2019/09/10 Javascript
JavaScript中的this/call/apply/bind的使用及区别
2020/03/06 Javascript
Python查询Mysql时返回字典结构的代码
2012/06/18 Python
Python写的PHPMyAdmin暴力破解工具代码
2014/08/06 Python
Python中让MySQL查询结果返回字典类型的方法
2014/08/22 Python
Python脚本暴力破解栅栏密码
2015/10/19 Python
Python列表和元组的定义与使用操作示例
2017/07/26 Python
django 快速启动数据库客户端程序的方法示例
2019/08/16 Python
python实现智能语音天气预报
2019/12/02 Python
制定岗位职责的原则
2013/11/08 职场文书
给学校的建议书
2014/03/12 职场文书
保护黄河倡议书
2014/05/16 职场文书
医院我们的节日活动实施方案
2014/08/22 职场文书
酒店端午节活动方案
2014/08/26 职场文书
开展党的群众路线教育实践活动个人对照检查材料
2014/11/05 职场文书
人事局接收函
2015/01/31 职场文书
少年犯观后感
2015/06/11 职场文书
python实现简单的聊天小程序
2021/07/07 Python