~에 대한 JavaScript

for ... in과 for 루프에 큰 차이가 있다고 생각하십니까? 어떤 종류의 "사용"을 선호하고 그 이유는 무엇입니까?

연관 배열의 배열이 있다고 가정 해 봅시다.

var myArray = [{'key': 'value'}, {'key': 'value1'}];

따라서 반복 할 수 있습니다.

for (var i = 0; i < myArray.length; i++)

과:

for (var i in myArray)

큰 차이는 보이지 않습니다. 성능 문제가 있습니까?

선택은 관용구가 가장 잘 이해되는 것을 기반으로해야합니다.

배열은 다음을 사용하여 반복됩니다.

for (var i = 0; i < a.length; i++)
   //do stuff with a[i]

연관 배열로 사용되는 객체는 다음을 사용하여 반복됩니다.

for (var key in o)
  //do stuff with o[key]

지구가 산산이 부서지지 않는 한, 정해진 사용 패턴을 고수하십시오.

Douglas Crockford 는 명령문 사용을 피하기 위해 JavaScript : Good Part (24 페이지)에서 권장 for in합니다.

for in객체에서 속성 이름을 반복 하는 데 사용 하면 결과가 정렬되지 않습니다. 최악의 결과 : 예기치 않은 결과가 발생할 수 있습니다. 여기에는 프로토 타입 체인에서 상속 된 멤버 및 메소드 이름이 포함됩니다.

속성을 제외한 모든 것을로 필터링 할 수 있습니다 .hasOwnProperty. 이 코드 샘플은 원래 원하는 것을 수행합니다.

for (var name in obj) {
    if (Object.prototype.hasOwnProperty.call(obj, name)) {
        // DO STUFF
    }
}

참고-jQuery 사용자

jQuery의 each(callback)메소드는 for( ; ; )기본적으로 루프를 사용 하며 길이가 인 경우 for( in ) 에만 사용 합니다undefined .

따라서이 기능을 사용할 때 올바른 순서를 취하는 것이 안전하다고 말하고 싶습니다.

예 :

$(['a','b','c']).each(function() {
    alert(this);
});
//Outputs "a" then "b" then "c"

이것을 사용하는 단점은 UI 이외의 논리를 수행하면 함수가 다른 프레임 워크보다 이식성이 떨어집니다. 이 each()기능은 jQuery 선택기와 함께 사용하기에 가장 적합 for( ; ; )하며 그렇지 않은 경우 권장됩니다.

사용하는 루프 종류와 브라우저에 따라 성능 차이가 있습니다.

예를 들어 :

for (var i = myArray.length-1; i >= 0; i--)

일부 브라우저에서 다음보다 두 배 빠릅니다.

for (var i = 0; i < myArray.length; i++)

그러나 배열이 거대하거나 지속적으로 반복하지 않으면 모든 것이 충분히 빠릅니다. 배열 루핑이 프로젝트 (또는 그 문제에 대한 다른 프로젝트)의 병목 현상이라고 의심합니다.

네이티브 Array.forEach 메소드는 현재 폭넓게 지원되고 있습니다.

Chrome, Firefox, IE9, Safari 및 Opera는 모든 주요 브라우저의 2012 현재 버전에 대한 답변이 ES5의 기본 배열을 지원합니다.

IE8을 기본적으로 지원할 이유가없는 한 (적절한 JS 환경을 제공하는 ES5-shim 또는 Chrome 프레임을 이러한 사용자에게 제공 할 수 있음을 명심하십시오) 언어의 적절한 구문을 사용하는 것이 더 깨끗합니다.

myArray.forEach(function(item, index) {
    console.log(item, index);
});

array.forEach ()에 대한 전체 설명서는 MDN에 있습니다.

배열이 드문 경우 두 개는 동일하지 않습니다.

var array = [0, 1, 2, , , 5];

for (var k in array) {
  // Not guaranteed by the language spec to iterate in order.
  alert(k);  // Outputs 0, 1, 2, 5.
  // Behavior when loop body adds to the array is unclear.
}

for (var i = 0; i < array.length; ++i) {
  // Iterates in order.
  // i is a number, not a string.
  alert(i);  // Outputs 0, 1, 2, 3, 4, 5
  // Behavior when loop body modifies array is clearer.
}

forEach를 사용하여 프로토 타입 체인 건너 뛰기

위의 @ nailer 's answer에 대한 간단한 부록 , forEach with Object.keys를 사용하면 hasOwnProperty를 사용하지 않고도 프로토 타입 체인을 반복하지 않아도됩니다.

var Base = function () {
    this.coming = "hey";
};

var Sub = function () {
    this.leaving = "bye";
};

Sub.prototype = new Base();
var tst = new Sub();

for (var i in tst) {
    console.log(tst.hasOwnProperty(i) + i + tst[i]);
}

Object.keys(tst).forEach(function (val) {
    console.log(val + tst[val]);
});

두 번째 의견은 필요에 따라 반복 방법을 선택해야한다는 의견입니다. 난 안에 실제로 당신을 제안 이제까지 네이티브 통해 루프 Array와 for in구조. 이 방법은 느린 와 체이스 Seibert는 프로토 타입 프레임 워크와 호환되지 않습니다, 전 순간에 지적.

JavaScript로 작업하는 경우 반드시 살펴 봐야 할 다양한 루핑 스타일에 대한 훌륭한 벤치 마크가 있습니다 . 초기 최적화는하지 말고 머리 뒤쪽 어딘가에 보관하십시오.

for in객체의 모든 속성을 가져 오는 데 사용 하며 스크립트를 디버깅 할 때 특히 유용합니다. 예를 들어, 익숙하지 않은 객체를 탐색 할 때이 줄을 편리하게 사용하고 싶습니다.

l = ''; for (m in obj) { l += m + ' => ' + obj[m] + '\n' } console.log(l);

전체 객체 (메소드 본문과 함께)의 내용을 내 Firebug 로그에 덤프합니다. 매우 편리합니다.

여기 내가 한 일이 있습니다.

function foreach(o, f) {
 for(var i = 0; i < o.length; i++) { // simple for loop
  f(o[i], i); // execute a function and make the obj, objIndex available
 }
}

이것은 그것을 사용하는
방법입니다. 이것은 배열과 객체 (예 : HTML 요소 목록)에서 작동합니다

foreach(o, function(obj, i) { // for each obj in o
  alert(obj); // obj
  alert(i); // obj index
  /*
    say if you were dealing with an html element may be you have a collection of divs
  */
  if(typeof obj == 'object') { 
   obj.style.marginLeft = '20px';
  }
});

방금 제안 했으므로 제안했습니다. :)

항목을 참조하려는 방식에 따라 다른 방법을 사용합니다.

현재 항목 만 원하면 foreach를 사용하십시오.

상대 비교를 수행하기 위해 인덱서가 필요한 경우에 사용하십시오. (이것은 이전 / 다음 항목과 어떻게 비교됩니까?)

성능 차이를 본 적이 없습니다. 걱정하기 전에 성능 문제가 발생할 때까지 기다립니다.

로 (myArray의에서 VAR I)에 대한 당신은 할 수 루프 이상도 객체 내가 키 이름을 포함하고 당신을 통해 속성에 액세스 할 수 있습니다 [I]에서 myArray . 직접 객체의 프로토 타입에 메소드를 추가 할 경우 jQuery를 또는 프로토 타입과 같은 외부 프레임 워크를 사용하는 경우 Additionaly, 당신은 객체에 추가 한 것입니다 어떤 방법, 즉, 너무, 루프에 포함됩니다, 또는 한 지점에서 내가 가리 킵니다 그 방법.

조심해!

여러 스크립트 태그가 있고 예를 들어 태그 속성에서 정보를 검색하는 경우 간단한 배열이 아니라 HTMLCollection 객체이므로 for 루프와 함께 .length 속성을 사용해야합니다.

https://developer.mozilla.org/en/DOM/HTMLCollection

foreach 문을 (var i in yourList) 사용하면 대부분의 브라우저에서 HTMLCollection의 속성과 메서드가 반환됩니다!

var scriptTags = document.getElementsByTagName("script");

for(var i = 0; i < scriptTags.length; i++)
alert(i); // Will print all your elements index (you can get src attribute value using scriptTags[i].attributes[0].value)

for(var i in scriptTags)
alert(i); // Will print "length", "item" and "namedItem" in addition to your elements!

getElementsByTagName이 NodeList를 리턴해야하더라도 대부분의 브라우저는 HTMLCollection을 리턴합니다. https://developer.mozilla.org/en/DOM/document.getElementsByTagName

배열의 for 루프는 프로토 타입과 호환되지 않습니다. 나중에 해당 라이브러리를 사용해야 할 것으로 생각되면 for 루프를 고수하는 것이 좋습니다.

http://www.prototypejs.org/api/array

객체와 프로토 타입 및 배열을 사용하는 "각"에 대한 문제를 보았습니다.

내 이해는 각각이 객체의 속성과 배열이 아니라는 것입니다.

코드 속도를 높이고 싶다면 어떻게해야합니까?

for( var i=0,j=null; j=array[i++]; foo(j) );

for 문 내에 while 논리를 사용하는 것이 다소 덜 중복됩니다. 또한 firefox에는 Array.forEach 및 Array.filter가 있습니다.

jsperf에 따르면 더 짧고 가장 좋은 코드는

keys  = Object.keys(obj);
for (var i = keys.length; i--;){
   value = obj[keys[i]];// or other action
}

병렬 처리를 이용하려면 Array (). forEach 루프를 사용하십시오.

for (;;) 는 배열 용입니다 . [20,55,33]

for..in is for Objects : {x : 20, y : 55 : z : 33}

조심해!!! Mac OS에서 Chrome 22.0을 사용하고 있으며 각 구문마다 문제가 있습니다.

이것이 브라우저 문제, 자바 스크립트 문제 또는 코드의 오류인지는 모르겠지만 매우 이상합니다. 객체 외부에서는 완벽하게 작동합니다.

var MyTest = {
    a:string = "a",
    b:string = "b"
};

myfunction = function(dicts) {
    for (var dict in dicts) {
        alert(dict);
        alert(typeof dict); // print 'string' (incorrect)
    }

    for (var i = 0; i < dicts.length; i++) {
        alert(dicts[i]);
        alert(typeof dicts[i]); // print 'object' (correct, it must be {abc: "xyz"})
    }
};

MyObj = function() {
    this.aaa = function() {
        myfunction([MyTest]);
    };
};
new MyObj().aaa(); // This does not work

myfunction([MyTest]); // This works

둘 사이에 중요한 차이점이 있습니다. for-in은 객체의 속성을 반복하므로, 케이스가 배열 인 경우 요소뿐만 아니라 "제거"기능도 반복합니다.

for (var i = 0; i < myArray.length; i++) { 
    console.log(i) 
}

//Output
0
1

for (var i in myArray) { 
    console.log(i) 
} 

// Output
0 
1 
remove

와 함께 for-in을 사용할 수 있습니다 if(myArray.hasOwnProperty(i)). 여전히 배열을 반복 할 때 항상 이것을 피하고 for (;;) 문을 사용하는 것이 좋습니다.

둘 다 매우 비슷하지만 사소한 차이가 있습니다.

var array = ["a", "b", "c"];
array["abc"] = 123;
console.log("Standard for loop:");
for (var index = 0; index < array.length; index++)
{
  console.log(" array[" + index + "] = " + array[index]); //Standard for loop
}

이 경우 출력은 다음과 같습니다.

루프 표준 :

배열 [0] = A

ARRAY [1] = B

배열 [2] = C

console.log("For-in loop:");
for (var key in array)
{
  console.log(" array[" + key + "] = " + array[key]); //For-in loop output
}

이 경우 출력은 다음과 같습니다.

사전 루프 :

ARRAY [1] = B

배열 [2] = C

배열 [10] = D

배열 [ABC] = 123

for in 문을 사용하면 객체의 모든 속성 이름을 반복 할 수 있습니다. 불행히도 프로토 타입 체인을 통해 상속 된 모든 멤버를 반복합니다. 이것은 관심이 데이터 멤버에있을 때 메소드 함수를 제공하는 데 나쁜 부작용이 있습니다.