TL; DR

• for-in안전 장치와 함께 사용하거나 그것이 왜 당신을 물릴 수 있는지 알지 못한다면 사용 하지 마십시오 .

• 가장 좋은 건은 보통

  • for-of루프 (ES2015 + 만)
  • Array#forEach( spec| MDN) (또는 그 친척 some등) (ES5 + 만 해당),
  • 단순한 구식 for루프
  • 또는 for-in안전 장치와 함께.

그러나 거기 많이 읽어, 탐험 더 …

JavaScript에는 배열 및 배열과 유사한 객체를 반복하는 강력한 의미가 있습니다. 대답은 두 가지 부분으로 나뉩니다. 순수 배열 옵션과 객체, 다른 반복 가능한 객체 (ES2015 +), DOM 컬렉션 등과 같이 배열 과 비슷한 항목에 대한 옵션 arguments.

당신이 ES2015 옵션을 사용할 수있는 나는 빨리 알게 될 것이다 지금 에 의해, 심지어 ES5 엔진에 transpiling ES5에 ES2015을. 자세한 내용은 “ES2015 transpiling”/ “ES6 transpiling”을 검색하십시오.

자, 우리의 옵션을 보자.

실제 배열의 경우

당신은 세 가지 옵션이 있습니다 인 ECMAScript 5 ( “ES5을”) 버전은 가장 광범위 순간에 지원, 2 개의 더 추가 ECMAScript를 2015 ( “ES2015”, “ES6”) :

1. 사용 forEach및 관련 (ES5 +)
2. 간단한 for루프를 사용하십시오
3. 올바르게 사용for-in
4. 사용 for-of(이터레이터를 암시 적으로 사용) (ES2015 +)
5. 반복자를 명시 적으로 사용하십시오 (ES2015 +)

세부:

1. 사용 forEach및 관련

ArrayES5에 의해 추가 된 기능 (직접 또는 폴리 필 사용)에 액세스 할 수있는 모호한 현대 환경 (IE8이 아님)에서 forEach( spec| MDN)를 사용할 수 있습니다 .

var a = ["a", "b", "c"];
a.forEach(function(entry) {
    console.log(entry);
});

forEach콜백 함수 및 선택적으로 this해당 콜백을 호출 할 때 사용할 값 (위에서 사용되지 않음)을 수락합니다 . 배열의 각 항목에 대해 콜백이 호출되어 희소 배열의 존재하지 않는 항목은 건너 뜁니다. 위의 인수 하나만 사용했지만 콜백은 세 가지로 호출됩니다. 각 항목의 값, 해당 항목의 색인 및 반복하는 배열에 대한 참조 ).

IE8 (2016 년 9 월이 글을 쓰는 시점에 NetApps가 시장 점유율을 4 % 이상으로 표시)과 같은 오래된 브라우저를 지원하지 않는 한, forEachshim없이 범용 웹 페이지에서 행복하게 사용할 수 있습니다 . 더 이상 사용되지 않는 브라우저를 지원해야하는 경우에는 shimming / polyfilling forEach을 쉽게 수행 할 수 있습니다 (여러 옵션의 경우 “es5 shim”검색).

forEach 반복 함수에 인수로 제공되므로 포함 범위에서 인덱싱 및 값 변수를 선언 할 필요가 없다는 장점이 있습니다.

각 배열 항목에 대한 함수 호출의 런타임 비용이 걱정된다면 걱정하지 마십시오. 세부 사항 .

또한 forEach“모두 반복”기능이지만 ES5는 다음과 같은 몇 가지 유용한 “어레이를 통해 작업하고 작업을 수행”기능을 정의했습니다.

• every(콜백이 처음 반환 될 때 루핑이 중지 false되거나 잘못된 것)
• some(콜백이 처음 반환 될 때 루핑이 중지 true되거나 사실이 아닙니다)
• filter(필터 함수가 리턴하는 요소를 포함하는 새로운 배열을 작성하고 리턴하는 요소는 true생략 함 false)
• map (콜백에서 반환 한 값으로 새 배열을 만듭니다)
• reduce (콜백을 반복해서 호출하여 이전 값을 전달하여 값을 작성합니다. 세부 사항에 대한 스펙을 참조하십시오.
• reduceRight(와 reduce같지만 오름차순이 아닌 내림차순으로 작동)

2. 간단한 for루프를 사용하십시오

때로는 오래된 방법이 가장 좋습니다.

var index;
var a = ["a", "b", "c"];
for (index = 0; index < a.length; ++index) {
    console.log(a[index]);
}

배열의 길이가 루프 동안 변경되지 않습니다, 그것은 (가능성) 성능에 민감한 코드의 경우, 앞까지 길이를 잡아 약간 더 복잡한 버전은 수 있습니다 작은 비트 빠른 :

var index, len;
var a = ["a", "b", "c"];
for (index = 0, len = a.length; index < len; ++index) {
    console.log(a[index]);
}

그리고 / 또는 뒤로 계산 :

var index;
var a = ["a", "b", "c"];
for (index = a.length - 1; index >= 0; --index) {
    console.log(a[index]);
}

그러나 최신 JavaScript 엔진을 사용하면 마지막 주스를 피할 필요가 거의 없습니다.

ES2015 이상에서는 인덱스 및 값 변수를 for루프에 로컬로 만들 수 있습니다 .

let a = ["a", "b", "c"];
for (let index = 0; index < a.length; ++index) {
    let value = a[index];
    console.log(index, value);
}
//console.log(index);   // would cause "ReferenceError: index is not defined"
//console.log(value);   // would cause "ReferenceError: value is not defined"

let a = ["a", "b", "c"];
for (let index = 0; index < a.length; ++index) {
    let value = a[index];
    console.log(index, value);
}
try {
    console.log(index);
} catch (e) {
    console.error(e);   // "ReferenceError: index is not defined"
}
try {
    console.log(value);
} catch (e) {
    console.error(e);   // "ReferenceError: value is not defined"
}

그리고 그렇게 할 때, 각 루프 반복에 대해 다시 생성 될 value뿐만 아니라 index다시 생성되므로 루프 본문에서 생성 된 클로저 는 해당 반복에 대해 생성 된 index(및 value)에 대한 참조를 유지합니다 .

let divs = document.querySelectorAll("div");
for (let index = 0; index < divs.length; ++index) {
    divs[index].addEventListener('click', e => {
        console.log("Index is: " + index);
    });
}

let divs = document.querySelectorAll("div");
for (let index = 0; index < divs.length; ++index) {
    divs[index].addEventListener('click', e => {
        console.log("Index is: " + index);
    });
}

<div>zero</div>
<div>one</div>
<div>two</div>
<div>three</div>
<div>four</div>

5 개의 div가있는 경우 첫 번째를 클릭하면 “Index is : 0″이 표시되고 마지막을 클릭하면 “Index is : 4″가 표시됩니다. 대신 대신 사용하면 작동 하지 않습니다 .varlet

3. 올바르게 사용for-in

사람들에게 당신에게 사용하라고 말하게 할 것 입니다 . for-in그러나 그것이 아닙니다for-in . 배열의 인덱스가 아닌 객체for-in 의 열거 가능한 속성을 반복합니다 . ES2015 (ES6)에서도 주문이 보장 되지 않습니다. ES2015 +는 개체 속성에 순서를 정의하지 않습니다 (통해 [[OwnPropertyKeys]], [[Enumerate]]그리고 그것들을 사용하는 것을 좋아 Object.getOwnPropertyKeys), 그러나 그 정의하지 않았다 for-in순서를 따를 것입니다; 그러나 ES2020은 그렇게했다. ( 이 다른 답변에 대한 자세한 내용 )

for-in배열에 대한 유일한 실제 사용 사례 는 다음과 같습니다.

• 그것은이다 스파 스 배열 과 대규모 , 그 격차를 나
• 요소가 아닌 속성을 사용하고 있으며 루프에 포함하려는 경우

첫 번째 예만 살펴보기 : for-in적절한 보호 조치를 사용하는 경우 희소 배열 요소를 방문하는 데 사용할 수 있습니다 .

// `a` is a sparse array
var key;
var a = [];
a[0] = "a";
a[10] = "b";
a[10000] = "c";
for (key in a) {
    if (a.hasOwnProperty(key)  &&        // These checks are
        /^0$|^[1-9]\d*$/.test(key) &&    // explained
        key <= 4294967294                // below
        ) {
        console.log(a[key]);
    }
}

세 가지 확인 사항에 유의하십시오.

1. 객체는 그 이름에 따라 자체 속성을 가지고 있으며 (프로토 타입에서 상속 된 속성이 아님)

2. 키는 모두 10 진수 (예 : 과학적 표기법이 아닌 일반 문자열 형식)이며

3. 숫자로 강제 변환 될 때 키의 값은 <= 2 ^ 32-2 (4,294,967,294)입니다. 그 번호는 어디에서 왔습니까? 그것은 사양에서 배열 인덱스의 정의의 일부입니다 . 다른 숫자 (정수가 아닌 숫자, 음수, 2 ^ 32-2보다 큰 숫자)는 배열 인덱스가 아닙니다. 이 2 ^ 32의 이유 – 2 – 즉, 2 ^ 32 이상의 낮은 최대 인덱스 값이다하게 한 배열의 최대 값이고 length가질 수있다. (예를 들어, 배열의 길이는 32 비트 부호없는 정수에 맞습니다.) ( 이전 블로그 테스트에서 내 이전 테스트가 옳지 않다는 의견을 지적한 RobG에게 요청합니다 .)

물론 인라인 코드에서는 그렇게하지 않을 것입니다. 유틸리티 함수를 작성합니다. 혹시:

// Utility function for antiquated environments without `forEach`
var hasOwn = Object.prototype.hasOwnProperty;
var rexNum = /^0$|^[1-9]\d*$/;
function sparseEach(array, callback, thisArg) {
    var index;
    for (var key in array) {
        index = +key;
        if (hasOwn.call(a, key) &&
            rexNum.test(key) &&
            index <= 4294967294
            ) {
            callback.call(thisArg, array[key], index, array);
        }
    }
}

var a = [];
a[5] = "five";
a[10] = "ten";
a[100000] = "one hundred thousand";
a.b = "bee";

sparseEach(a, function(value, index) {
    console.log("Value at " + index + " is " + value);
});

4. 사용 for-of(이터레이터를 암시 적으로 사용) (ES2015 +)

ES2015는 반복자 를 JavaScript에 추가했습니다 . 반복자를 사용하는 가장 쉬운 방법은 새로운 for-of문장입니다. 다음과 같이 보입니다 :

const a = ["a", "b", "c"];
for (const val of a) {
    console.log(val);
}

커버 아래에서 배열에서 반복자 를 가져 와서 루프를 통해 값을 가져옵니다. for-in객체 (배열)에 의해 정의 된 반복자를 사용하고 배열 이 속성이 아닌 항목을 통해 반복되도록 정의하기 때문에 using에 문제가 없습니다 . for-inES5 와 달리 항목을 방문하는 순서는 색인의 숫자 순서입니다.

5. 반복자를 명시 적으로 사용하십시오 (ES2015 +)

때로는 반복자를 명시 적으로 사용하고 싶을 수도 있습니다 . 그것보다 훨씬 복잡하지만 그렇게 할 수도 있습니다 for-of. 다음과 같이 보입니다 :

const a = ["a", "b", "c"];
const it = a.values();
let entry;
while (!(entry = it.next()).done) {
    console.log(entry.value);
}

반복자는 사양의 반복자 정의와 일치하는 객체입니다. 그 next방법은 새 반환 결과 객체 당신이 그것을 호출 할 때마다. 결과 객체에는 속성이 있으며 done, 완료 여부를 알려주는 속성 value과 해당 반복 값이 있는 속성 이 있습니다. (있는 done경우 선택 사항 false이며, 원하는 value경우 선택 사항 undefined입니다.)

의 의미 value는 반복자 에 따라 다릅니다. 배열은 반복자를 반환하는 (적어도) 세 가지 함수를 지원합니다.

• values(): 이것은 내가 위에서 사용한 것입니다. 그것은 각각 반복자 반환 value이 반복 배열 항목이다 ( "a", "b"및 "c"실시 예 이전에).
• keys(): 각각 value이 해당 반복에 대한 키인 반복자를 리턴합니다 (따라서 a위의 경우 "0", 그런 "1"다음 "2").
• entries(): 각각 value이 [key, value]해당 반복 양식의 배열 인 반복자를 리턴합니다 .

배열과 같은 객체

실제 배열 외에도 숫자 이름을 가진 속성과 속성을 가진 배열과 같은 객체가 있습니다 length. NodeList인스턴스, arguments객체 등. 우리는 내용을 어떻게 반복합니까?

배열에 대해 위의 옵션 중 하나를 사용하십시오

위의 배열 접근법 중 적어도 일부, 또는 대부분 또는 전체는 종종 배열 유사 객체에 동일하게 적용됩니다.

1. 사용 forEach및 관련 (ES5 +)

   다양한 기능들은 Array.prototype“의도적 일반”이며 일반적 통해 객체와 같은 배열에 사용될 수있다 Function#call나 Function#apply. ( 이 답변 끝에 호스트 제공 객체 에 대한 경고를 참조하십시오. 그러나 드문 문제입니다.)

   당신이 사용하고자 가정하자 forEachA의 Node의 childNodes속성입니다. 당신은 이것을 할 것입니다 :

   Array.prototype.forEach.call(node.childNodes, function(child) {
       // Do something with `child`
   });

   그렇게 많이 할 경우, 함수 참조의 사본을 재사용을 위해 변수로 가져와야 할 수 있습니다. 예를 들면 다음과 같습니다.

   // (This is all presumably in some scoping function)
   var forEach = Array.prototype.forEach;
   
   // Then later...
   forEach.call(node.childNodes, function(child) {
       // Do something with `child`
   });

2. 간단한 for루프를 사용하십시오

   분명히 간단한 for루프는 배열과 같은 객체에 적용됩니다.

3. 올바르게 사용for-in

   for-in배열과 동일한 보호 장치를 사용하면 배열과 유사한 객체에서도 작동해야합니다. 위의 # 1에 호스트 제공 개체에 대한 경고가 적용될 수 있습니다.

4. 사용 for-of(이터레이터를 암시 적으로 사용) (ES2015 +)

   for-of객체가 제공 하는 반복자를 사용 합니다 (있는 경우). 여기에는 호스트 제공 객체가 포함됩니다. 예를 들어, NodeListfrom querySelectorAll에 대한 스펙이 반복을 지원하도록 업데이트되었습니다. 의 사양 HTMLCollection에서가 getElementsByTagName아니었다.

5. 반복자를 명시 적으로 사용하십시오 (ES2015 +)

   # 4를 참조하십시오.

진정한 배열 만들기

다른 경우에는 배열과 유사한 객체를 실제 배열로 변환 할 수 있습니다. 그렇게하는 것은 놀라 울 정도로 쉽습니다.

1. slice배열 의 방법을 사용하십시오

   slice위에서 언급 한 다른 방법들과 마찬가지로 “의도적으로 일반적”인 배열 의 방법을 사용할 수 있으므로 다음 과 같이 배열과 같은 객체와 함께 사용할 수 있습니다.

   var trueArray = Array.prototype.slice.call(arrayLikeObject);

   예를 들어, NodeLista를 실제 배열로 변환하려면 다음과 같이하십시오.

   var divs = Array.prototype.slice.call(document.querySelectorAll("div"));

   아래의 호스트 제공 객체에 대한주의 사항을 참조하십시오 . 특히, 이것은 IE8 및 이전 버전에서는 실패하므로 호스트 제공 객체를 this이와 같이 사용할 수 없습니다 .

2. 스프레드 구문 사용 ( ...)

   이 기능을 지원하는 JavaScript 엔진과 함께 ES2015의 스프레드 구문 을 사용할 수도 있습니다 . 마찬가지로 객체에서 제공 for-of하는 반복자를 사용 합니다 (이전 섹션의 # 4 참조).

   var trueArray = [...iterableObject];

   예를 들어, NodeList스프레드 구문을 사용하여 a를 실제 배열로 변환하려는 경우 이것은 매우 간결합니다.

   var divs = [...document.querySelectorAll("div")];

3. 사용하다 Array.from

   Array.from (사양) | (MDN) (ES2015 +, 쉽게 폴리 필됨)은 배열과 유사한 객체로부터 배열을 생성하고, 선택적으로 매핑 기능을 통해 항목을 먼저 전달합니다. 그래서:

   var divs = Array.from(document.querySelectorAll("div"));

   또는 주어진 클래스가있는 요소의 태그 이름 배열을 얻으려면 매핑 함수를 사용하십시오.

   // Arrow function (ES2015):
   var divs = Array.from(document.querySelectorAll(".some-class"), element => element.tagName);
   
   // Standard function (since `Array.from` can be shimmed):
   var divs = Array.from(document.querySelectorAll(".some-class"), function(element) {
       return element.tagName;
   });

호스트 제공 객체에 대한주의 사항

호스트 제공 배열 유사 객체 (DOM 목록 및 JavaScript 엔진이 아닌 브라우저에서 제공하는 기타 Array.prototype기능)와 함께 함수 를 사용하는 경우 대상 환경에서 테스트하여 호스트 제공 객체가 제대로 작동하는지 확인해야합니다. . 대부분은 올바르게 동작 하지만 (지금) 테스트하는 것이 중요합니다. 그 이유는 사용하려는 대부분의 방법이 호스트 제공 객체에 의존하여 추상 작업에 정직한 답변을 제공하기 때문 입니다. 이 글을 쓰는 시점에서 브라우저는이 작업을 훌륭하게 수행하지만 5.1 사양에서는 호스트 제공 객체가 정직하지 않을 수 있습니다. §8.6.2 에 있으며 , 해당 섹션의 시작 부분 근처에 큰 테이블 아래에 여러 단락이 있습니다.Array.prototype[[HasProperty]]

호스트 객체는 달리 명시되지 않는 한 어떤 방식 으로든 이러한 내부 메소드를 구현할 수 있습니다. 예를 들어, 하나의 가능성이 있다는 것입니다 [[Get]]및 [[Put]]특정 호스트 객체가 실제로 가져오고 저장하는 속성 값을하지만 [[HasProperty]]항상 생성 거짓 .

(ES2015 사양에서 동등한 언어를 찾을 수는 없지만 여전히 그렇습니다.) 다시 말하지만, 현대 브라우저에서 일반적인 호스트 제공 배열과 같은 객체 ( NodeList예 : 예) 는 처리합니다. [[HasProperty]]올바르게하지만 테스트하는 것이 중요합니다.)

답변

var length = arr.length,
    element = null;
for (var i = 0; i < length; i++) {
  element = arr[i];
  // Do something with element
}

$.each(yourArray, function(index, value) {
  // do your stuff here
});

var length = yourArray.length;
for (var i = 0; i < length; i++) {
  // Do something with yourArray[i].
}

for (var i = array.length; i--; ) {
     // process array[i]
}

for (var i = 0; i < array.length; i++) { ... }   // Forwards

for (var i = array.length; i--; )    { ... }   // Reverse

for (var i = array.length; i --> 0 ;) {

var index,
    value;
for (index in obj) {
    value = obj[index];
}

for (i in obj) {
    if (obj.hasOwnProperty(i)) {
        //do stuff
    }
}

arr.forEach(function (val, index, theArray) {
    //do stuff
});

for (var i = 0; i < myArray.length; i++) {
    var arrayItem = myArray[i];
}

var temp = [1, 2, 3];
angular.forEach(temp, function(item) {
    //item will be each element in the array
    //do something
});

var temp = [1, 2, 3];
var temp2 = [];
angular.forEach(temp, function(item) {
    this.push(item); //"this" refers to the array passed into the optional third parameter so, in this case, temp2.
}, temp2);

angular.forEach(temp, function(item) {
    temp2.push(item);
});

angular.forEach(obj1.results, function(result1) {
    angular.forEach(obj2.results, function(result2) {
        if (result1.Value === result2.Value) {
            //do something
        }
    });
});

//exact same with a for loop
for (var i = 0; i < obj1.results.length; i++) {
    for (var j = 0; j < obj2.results.length; j++) {
        if (obj1.results[i].Value === obj2.results[j].Value) {
            //do something
        }
    }
}