Javascript中的for in语句获取对象属性的顺序问题

下面创建一个对象,并为对象添加一些属性:

var user = {};
if(!user[‘Jason’’]) {
user[‘Jason’’] = [];
}
user[‘Jason’’][‘grade’’] = 3;
user[‘Jason’’][‘isChinese’’] = 1;

if(!user[‘arthinking’’]) {
user[‘arthinking’’] = [];
}
user[‘Jason’’][‘grade’’] = 4;
user[‘Jason’’][‘isChinese’’] = 1;

我们获取user.length时发现,它是undefined的,我们只能通过for in循环获取对象的属性:

for(var key in user){
console.log(‘key: ‘, key);
}

可以发现,循环输出的属性并不是按照创建的属性进行排列的。

Chrome Opera 的 JavaScript 解析引擎遵循的是新版 ECMA-262 第五版规范。因此,使用 for-in 语句遍历对象属性时遍历书序并非属性构建顺序。而 IE6 IE7 IE8 Firefox Safari 的 JavaScript 解析引擎遵循的是较老的 ECMA-262 第三版规范,属性遍历顺序由属性构建的顺序决定。

for-in 语句无法保证遍历顺序,应尽量避免编写依赖对象属性顺序的代码。如果想顺序遍历一组数据,请使用数组并使用 for 语句遍历。 如果想按照定义的次序遍历对象属性,请参考本文针对各浏览器编写特殊代码。

如果我们需要按照一定的顺序输出属性,也可以先在一个数组中保存所有的key值,再将数组排序,最后循环这个key数组,通过key获取对象中的属性即可:

var user = {};
if(!user[‘Jason’]) {
user[‘Jason’] = [];
}
user[‘Jason’][‘grade’] = 3;
user[‘Jason’][‘level’] = 1;

if(!user[‘arthinking’]) {
user[‘arthinking’] = [];
}
user[‘arthinking’][‘grade’] = 4;
user[‘arthinking’][‘level’] = 1;

console.log(user);

for(var key in user){
console.log(‘key: ‘, key);
}

var keys = [];
for(var key in user){
keys.push(key);
}
keys = keys.sort();

for(var i=0; i<keys.length; i++){
var key = keys[i];
console.log(user[key][‘grade’]);
}

arthinking wechat
欢迎关注itzhai公众号