本文详解JavaScript中对象的属性操作。涵盖通过点操作符和中括号访问属性、使用delete彻底删除属性以及处理关键字作为属性名的语法规范。重点解析数字字面量解析陷阱及动态属性设置的正确写法,提供完整代码示例与注意事项。
JavaScript对象基础与字面量解析
在JavaScript中,除null和undefined外,所有变量均被视为对象。
代码如下:
false.toString(); // 'false'
[1, 2, 3].toString(); // '1,2,3'
function Foo(){}
Foo.bar = 1;
Foo.bar; // 1
常有人误以为数字字面量不是对象,这源于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']; // kitten
var 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 保留关键字;为确保在低版本 JS 引擎中兼容执行,需采用字符串字面量方式进行声明。