Js对象属性的访问,在日常编程中很常见,在一次使用中莫名报错,不知缘由,遂对改知识点进行归纳总结
对象中属性访问方式的异同
在Javascript中,通常使用"."运算符来获取对象属性值,例如object.key;或者使用[],与访问数组成员同样的形式获取对象属性值,例如object[key]。这两种访问对象属性的方法相似但也有所区别,接下通过下面几个例子来一探object.key与object[key]的异同。
Examples 1
var obj = {
a: 1,
b: 2
}
obj.a; // 1
obj[a]; // Uncaught ReferenceError: a is not defined
obj["a"]; // 1 object中key的数据类型为字符串
当去访问对象中现有的属性值时,object.key与object[key]一样,只不过要注意object中key的数据类型为字符串。
Examples 2
var obj = {
a: 1,
b: 2
}
var name = 'a';
obj.name; // undefined
obj[name]; // 1
在例子2中,我们绕个弯,将obj中的属性名赋值给key变量,再通过之前的两种方式去访问,发现obj.name为undefined,说明object.key这个方法会直接去访问点运算后的这个静态的属性名,但是object[key]却是访问name变量的值所对应的属性名。这个知识点的应用是很常见的,比如遍历一个对象所有的属性值。
Examples 3
var obj = new Object();
obj["oo xx"] = 1;
obj[""] = "empty string";
obj[" "] = "string contains only space";
obj.oo xx = 1; // Uncaught SyntaxError: Unexpected identifier
如例所示,[]操作符为对象添加属性时,属性名称可以是任何字符串(包括只包含空格的字符串和空字符串);但是通过"."操作符为对象添加属性时,属性名称必须是合法的标识符名称。
Conclusion
采用object[key]的形式读取或创建对象属性时,解释器首先会检查key是值类型字面量还是用户定义的变量,如果key是值类型的字面量,则解释器自动将其转换为字符串后再读取或创建属性,如obj[1],obj[true]会被转换成obj["1"]、obj["true"]。
如果key是变量名称(或者是表达式),则解释器会读取变量内容(或对表达式求值);如果变量的值是字符串,则直接读取属性,如果是其他类型的数据,则转换为字符串后再读取属性。
遍历对象的方法
for in
for in可以遍历对象可枚举属性,包括自有属性以及原型链上的属性
Object.keys()
Object.keys 返回一个所有元素为字符串的数组,其元素来自于从给定的object上面可直接枚举的属性。
Object.getOwnPropertyNames()
Object.getOwnPropertyNames()用于返回对象的自有属性,包括可枚举和不可枚举的
function object(name){
this.name = name; // 自身属性
}
object.prototype.age = "25"; //原型链上属性
obj = new object("loosen")
Object.defineProperty(obj,"sex",{
value: "male",
enumerable: true // 可枚举属性
})
Object.defineProperty(obj,"height",{
value: "175cm",
enumerable: false // 不可枚举属性
})
// for in
for(var key in obj) console.log(key);
// Object.keys()
console.log(Object.keys(obj))
// Object.getOwnPropertyNames()
console.log(Object.getOwnPropertyNames(obj))
打印结果: