Javascript对象中属性访问方式以及对象遍历方法

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))

打印结果：

参考

js对象属性的命名规则
MDN