[javascript] “for (… in…)”루프의 요소 순서

인용 존 레식 :

현재 모든 주요 브라우저는 객체의 속성을 정의 된 순서대로 반복합니다. Chrome은 몇 가지 경우를 제외하고이 작업도 수행합니다. […]이 동작은 ECMAScript 사양에 의해 명시 적으로 정의되어 있지 않습니다. ECMA-262의 섹션 12.6.4 :

속성을 열거하는 메커니즘은 구현에 따라 다릅니다.

그러나 사양은 구현과는 다릅니다. ECMAScript의 모든 최신 구현은 정의 된 순서대로 객체 속성을 반복합니다. 이 때문에 Chrome 팀은이 버그로 간주하여 수정합니다.

모든 비 숫자 속성 이름에 대해 수행하는 Chrome 및 Opera를 제외한 모든 브라우저는 정의 순서 를 따릅니다. 이 두 브라우저에서 속성은 숫자가 아닌 첫 번째 속성보다 순서대로 가져옵니다 (배열을 구현하는 방법과 관련이 있음). 순서도 동일 Object.keys합니다.

이 예제는 어떤 일이 발생하는지 명확히해야합니다.

var obj = {
  "first":"first",
  "2":"2",
  "34":"34",
  "1":"1",
  "second":"second"
};
for (var i in obj) { console.log(i); };
// Order listed:
// "1"
// "2"
// "34"
// "first"
// "second"

이것의 기술은 이것이 언제라도 변할 수 있다는 사실보다 덜 중요합니다. 이런 식으로 머무는 것에 의존하지 마십시오.

간단히 말해 : 순서가 중요한 경우 배열을 사용하십시오.

답변

function lineate(obj){
    var arr = [], i;
    for (i in obj) arr.push([i,obj[i]].join(':'));
    console.log(arr);
}
var obj = { a:1, b:2, c:3, "123":'xyz' };
/* log1 */  lineate(obj);
obj.a = 4;
/* log2 */  lineate(obj);
delete obj.a;
obj.a = 4;
/* log3 */  lineate(obj);

["a:1", "b:2", "c:3", "123:xyz"]
["a:4", "b:2", "c:3", "123:xyz"]
["b:2", "c:3", "123:xyz", "a:4"]

["123:xyz", "a:1", "b:2", "c:3"]
["123:xyz", "a:4", "b:2", "c:3"]
["123:xyz", "b:2", "c:3", "a:4"]

[123:xyz,a:1,b:2,c:3]
[123:xyz,a:4,b:2,c:3]
[123:xyz,a:4,b:2,c:3] 

var obj = {};
obj.a = 'a';
obj.b = 'b';
obj.c = 'c';

// IE allows the value to be deleted...
delete obj.b;

// ...but remembers the old position if it is added back later
obj.b = 'bb';
for (var p in obj) {
    alert(obj[p]); // in IE, will be a, bb, then c;
                   // not a, c, then bb as for FF/Chrome/Opera/Safari
}

<script type="text/javascript">
var username = {"14719":"A","648":"B","15185":"C"};

for (var i in username) {
  window.alert(i + ' => ' + username[i]);
}
</script>