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中Iframe之间传值的方法
Mar 11 Javascript
浏览器打开层自动缓慢展开收缩实例代码
Jul 04 Javascript
基于mouseout和mouseover等类似事件的冒泡问题解决方法
Nov 18 Javascript
jQuery中attr()方法用法实例
Jan 05 Javascript
JQuery日历插件My97DatePicker日期范围限制
Jan 20 Javascript
浅谈React 属性和状态的一些总结
Nov 21 Javascript
从零开始学习Node.js系列教程之设置HTTP头的方法示例
Apr 13 Javascript
JavaScript中undefined和null的区别
May 03 Javascript
react-native-tab-navigator组件的基本使用示例代码
Sep 07 Javascript
vue-cli 引入、配置axios的方法
May 08 Javascript
如何实现小程序tab栏下划线动画效果
May 18 Javascript
JavaScript从原型到原型链深入理解
Jun 03 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
几种显示数据的方法的比较
2006/10/09 PHP
Yii核心组件AssetManager原理分析
2014/12/02 PHP
php 中self,this的区别和操作方法实例分析
2019/11/04 PHP
Javascript读取cookie函数代码
2010/10/16 Javascript
JS模拟自动点击的简单实例
2013/08/08 Javascript
cookie的复制与使用记住用户名实现代码
2013/11/04 Javascript
使用js判断当前时区TimeZone是否是夏令时
2014/02/23 Javascript
使用jQuery动态加载js脚本文件的方法
2014/04/03 Javascript
javascript页面渲染速度测试脚本分享
2014/04/15 Javascript
jQuery简易图片放大特效示例代码
2014/06/09 Javascript
JS中产生20位随机数以0-9为例也可以是a-z A-Z
2014/08/01 Javascript
jQuery给多个不同元素添加class样式的方法
2015/03/26 Javascript
ES6新特性之模块Module用法详解
2017/04/01 Javascript
10分钟上手vue-cli 3.0 入门介绍
2018/04/04 Javascript
Mac下通过brew安装指定版本的nodejs教程
2018/05/17 NodeJs
微信小程序入门之广告条实现方法示例
2018/12/05 Javascript
React通过redux-persist持久化数据存储的方法示例
2019/02/14 Javascript
原生JS使用Canvas实现拖拽式绘图功能
2019/06/05 Javascript
Vue项目环境搭建详细总结
2019/09/26 Javascript
详解React 元素渲染
2020/07/07 Javascript
JavaScript中的Proxy对象
2020/11/27 Javascript
在Python中操作时间之mktime()方法的使用教程
2015/05/22 Python
python实现自动重启本程序的方法
2015/07/09 Python
Python matplotlib绘图可视化知识点整理(小结)
2018/03/16 Python
django反向解析和正向解析的方式
2018/06/05 Python
python中 * 的用法详解
2019/07/10 Python
阿里云ECS服务器部署django的方法
2019/08/29 Python
tensorflow如何继续训练之前保存的模型实例
2020/01/21 Python
html5+css如何实现中间大两头小的轮播效果
2018/12/06 HTML / CSS
原生 JS+CSS+HTML 实现时序图的方法
2019/07/31 HTML / CSS
LightInTheBox西班牙站点:全球商品在线采购
2016/09/22 全球购物
介绍一下SQL注入攻击的种类和防范手段
2012/02/18 面试题
DIY蛋糕店的创业计划书范文
2013/12/26 职场文书
李开复演讲稿
2014/05/24 职场文书
教师职位说明书
2014/07/29 职场文书
2014年向国旗敬礼活动总结
2014/09/27 职场文书