it-swarm-ko.tech

각 배열에 대한 JavaScript?

JavaScript를 사용하여 배열의 모든 항목을 반복하는 방법은 무엇입니까?

나는 그것이 다음과 같다고 생각했다.

forEach(instance in theArray)

어디 theArray 내 배열이지만 잘못된 것으로 보입니다.

4194
Dante1986

TL; DR

  • 안전 장치와 함께 사용하거나 적어도 왜 물릴 수 있는지 알지 않는 한 for-in를 사용하지 마십시오.
  • 가장 좋은 건은 보통

    • for-of 루프 (ES2015 + 만 해당)
    • Array#forEach ( specNAME_ | MDNNAME_ ) (또는 해당 친척 some등) (ES5 + 만 해당),
    • 간단한 구식 for루프
    • 또는 보호 기능이있는 for-in.

그러나 lots 더 많은 것을 탐험하고 읽을 수 있습니다 ...


JavaScript에는 배열 및 배열과 유사한 객체를 반복하는 강력한 의미가 있습니다. 정답 배열과 arguments객체, 기타 반복 가능한 객체 (ES2015 +)와 같이 array- like 옵션에 대한 옵션을 두 부분으로 나눕니다. , DOM 컬렉션 등.

ES5 엔진에서도 ES2015 옵션 now 을 사용하여 transpiling ES2015에서 ES5까지 사용할 수 있습니다. 자세한 내용은 "ES2015 transpiling"/ "ES6 transpiling"을 검색하십시오.

자, 우리의 옵션을 보자.

실제 배열의 경우

현재 가장 광범위하게 지원되는 버전 인 ECMAScript 5 ( "ES5")에는 세 가지 옵션이 있으며 ECMAScript 2015 ( "ES2015", "ES6")에는 두 가지 옵션이 추가되었습니다 :

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

세부:

1. forEach및 관련 사용

ES5 (직접 또는 폴리 필 사용)에 의해 추가 된 Array기능에 액세스 할 수있는 모호한 현대적인 환경 (IE8이 아님)에서 forEach( specNAME_ } _ | MDNNAME_ ) :

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

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

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

forEachname__은 반복 함수에 인수로 제공되므로 해당 반복에 대한 범위가 지정되므로 포함 범위에서 인덱싱 및 값 변수를 선언 할 필요가 없다는 이점이 있습니다.

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

또한 forEachname__은 "모두 반복"기능이지만 ES5는 다음과 같은 몇 가지 유용한 "배열을 통해 작업하고 수행"기능을 정의했습니다.

  • everyNAME_ (콜백에서 false또는 뭔가 잘못된 것을 처음 반환하면 루핑을 중지합니다)
  • someNAME_ (콜백에서 true또는 다른 항목을 처음 반환하면 루핑이 중지됩니다)
  • filterNAME_ (필터 함수가 truename__을 반환하고 falsename__을 반환하는 요소는 생략하는 요소를 포함하여 새 배열을 만듭니다)
  • mapNAME_ (콜백에서 반환 된 값에서 새 배열을 만듭니다)
  • reduceNAME_ (콜백을 반복해서 호출하여 이전 값을 전달하여 값을 작성합니다. 세부 사항에 대한 스펙을 참조하십시오. 배열의 내용 및 기타 여러 항목을 합산하는 데 유용합니다)
  • reduceRightNAME_ (reducename__과 같지만 오름차순이 아닌 내림차순으로 작동)

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

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

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

루프 길이 동안 배열의 길이가 변경되지 않고 성능에 민감한 코드 인 경우 (앞의 경우) 약간 더 복잡한 버전은 앞쪽의 길이를 잡는 것이 tiny 조금 더 빠름 :

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"
}

그리고 그렇게 할 때 valuename__뿐만 아니라 indexname__도 각 루프 반복에 대해 다시 만들어집니다. 즉, 루프 본문에서 생성 된 클로저는 해당 특정 반복에 대해 생성 된 indexname __ (및 valuename__)에 대한 참조를 유지합니다.

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가있는 경우 첫 번째를 클릭하면 "색인 : 0"이 표시되고 마지막을 클릭하면 "색인 : 4"가 표시됩니다. var대신 letname__을 사용하면 not ​​작동합니다.

for-in correctly 사용

사람들에게 for-in를 사용하라고 말하게하지만 for-in가 아닙니다 . for-in는 배열의 인덱스가 아닌 열거 가능한 속성 을 반복합니다. 주문이 보장되지 않음, ES2015 (ES6)에서도 마찬가지입니다. ES2015 +는 [[OwnPropertyKeys]] , [[Enumerate]]Object.getOwnPropertyKeys )와 같은 속성을 사용하는 속성을 거부하는 순서를 정의하지만 하지 않습니다for-in가 그 순서를 따르도록 정의하십시오. ( 이 다른 답변 에 자세히 설명되어 있습니다.)

배열에서 for-in의 실제 사용 사례는 다음과 같습니다.

  • massive 간격이있는 sparse 배열 또는
  • 요소가 아닌 속성을 사용하고 있으며 루프에 포함하려는 경우

첫 번째 예만 살펴보십시오. 적절한 보호 조치를 사용하는 경우 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. 객체는 그 이름에 따라 own 속성 (프로토 타입에서 상속 된 속성이 아님)을 가지며

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

  3. 숫자로 강제 변환 될 때 키의 값은 <= 2 ^ 32-2 (4,294,967,294)입니다. 그 번호는 어디에서 왔습니까? 배열 인덱스 사양의 정의의 일부입니다. 다른 숫자 (정수가 아닌 숫자, 음수, 2 ^ 32-2보다 큰 숫자)는 배열 인덱스가 아닙니다. 이것이 2 ^ 32-2 인 이유는 가장 큰 인덱스 값을 2 ^ 32-1보다 낮게하기 때문입니다. 이는 배열의 lengthname__이 가질 수있는 최대 값입니다. (예를 들어, 배열의 길이는 부호없는 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는 iterators 를 JavaScript에 추가합니다. 반복자를 사용하는 가장 쉬운 방법은 새로운 for-of 문입니다. 다음과 같이 보입니다 :

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

덮개 아래에서 배열에서 iterator 를 가져 와서 루프를 통해 값을 가져옵니다. for-in를 사용하면 객체 (배열)에 의해 정의 된 반복자를 사용하기 때문에 문제가 없으며 배열은 반복자가 entries ( 그들의 속성). ES5의 for-in와 달리 항목 방문 순서는 색인의 숫자 순서입니다.

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

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

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

반복자는 사양의 반복자 정의와 일치하는 객체입니다. next메소드는 호출 할 때마다 새로운 result object 을 반환합니다. 결과 객체에는 done속성이 있으며 완료 여부를 알려주는 속성과 해당 반복 값을 가진 value속성이 있습니다. (donename__은 falsename__이면 선택적이며, valuename__은 undefined인 경우 선택적입니다.)

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

  • values() : 위에서 사용한 것입니다. 각 valuename__이 해당 반복에 대한 배열 항목 인 반복자를 리턴합니다 (이 예제에서는 "a", "b""c").
  • keys() : 각 valuename__이 해당 반복에 대한 키인 반복자를 반환합니다 (위의 aname__의 경우 "0", "1", "2").
  • entries() : 각 valuename__이 해당 반복에 대한 [key, value] 형식의 배열 인 반복자를 반환합니다.

배열과 같은 객체

실제 배열 외에, array-like length속성이있는 객체와 숫자 이름이있는 속성 : NodeList인스턴스, arguments객체 등이 있습니다. 내용?

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

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

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

    Array.prototype의 다양한 함수는 "의도적으로 일반적"이며 일반적으로 Function#call 또는 Function#apply 을 통해 배열과 유사한 객체에서 사용할 수 있습니다. (이 답변 끝에 Caveat for Host-provided objects 을 참조하십시오. 그러나 드문 문제입니다.)

    forEachname__의 Node속성에 childNodesname__을 사용하려고한다고 가정합니다. 당신은 이것을 할 것입니다 :

    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는 객체가 제공하는 반복자를 사용합니다 (있는 경우). 우리는 이것이 다양한 배열과 같은 객체, 특히 호스트 제공 객체와 어떻게 작동하는지 확인해야합니다. 예를 들어 NodeListname__의 querySelectorAll사양이 반복을 지원하도록 업데이트되었습니다. HTMLCollectionname__의 getElementsByTagNamename__에 대한 사양이 아닙니다.

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

    # 4를 보시면 반복자가 어떻게 진행되는지 살펴 봐야합니다.

진정한 배열 만들기

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

  1. sliceNAME_ 배열의 방법 사용

    배열의 slice메소드를 사용할 수 있습니다. 위에서 언급 한 다른 메소드와 마찬가지로 "의도적으로 일반적"이므로 다음과 같이 배열과 유사한 객체와 함께 사용할 수 있습니다.

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

    예를 들어 NodeListname__을 실제 배열로 변환하려면 다음을 수행하십시오.

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

    아래의 Caveat for Host-provided objects 를 참조하십시오. 특히, 이것은 IE8 및 이전 버전에서 실패하므로 호스트 제공 객체를 thisname__과 같은 NodeListname__으로 사용할 수 없습니다.

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

    이 기능을 지원하는 JavaScript 엔진과 함께 ES2015의 spread syntax 을 사용할 수도 있습니다.

    var trueArray = [...iterableObject];
    

    예를 들어 NodeListname__을 실제 배열로 변환하려면 확산 구문을 사용하면 매우 간결 해집니다.

    var divs = [...document.querySelectorAll("div")];
    
  3. 사용 Array.from(spec) | (MDN)

    Array.from (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;
    });
    

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

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

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

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

6662
T.J. Crowder

편집 :이 대답은 절망적으로 구식입니다. 보다 현대적인 접근 방법은 배열에서 사용 가능한 방법 을 참조하십시오. 관심있는 방법은 다음과 같습니다.

  • 각각
  • 지도
  • 필터
  • 지퍼
  • 줄이다
  • ...마다
  • 약간

JavaScript 에서 배열을 반복하는 표준 방법은 바닐라 for- loop입니다.

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

그러나이 방법은 밀도가 높은 배열이 있고 각 인덱스가 요소에 의해 점유 된 경우에만 유용합니다. 배열이 희소 한 경우이 접근 방식에서 성능 문제가 발생할 수 있습니다. 왜냐하면 배열에 실제로 존재하지 않는 많은 인덱스를 반복하기 때문입니다. 이 경우 for .. in- 루프가 더 좋습니다. 그러나 그러나 적절한 안전 장치를 사용하여 원하는 배열 속성 (즉, 배열 요소) 만 적용되도록해야합니다. for..in- loop는 레거시 브라우저에서 또는 추가 속성이 enumerable로 정의 된 경우에도 열거됩니다.

ECMAScript 5 에는 배열 프로토 타입에 forEach 메소드가 있지만 레거시 브라우저에서는 지원되지 않습니다. 일관성있게 사용하려면이를 지원하는 환경 (예 : 서버 측 JavaScript의 경우 Node.js )이 있거나 "폴리 필"을 사용해야합니다. 그러나이 기능에 대한 Polyfill은 사소한 것이며 코드를 읽기 쉽게 만들기 때문에 포함하기에 좋은 polyfill입니다.

485
PatrikAkerstrand

- jQuery 라이브러리를 사용하는 경우 - jQuery.each 를 사용할 수 있습니다.

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

EDIT :  

질문에 따라 사용자가 jquery 대신 javascript 코드를 사용하여 편집 할 수 있습니다.

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

일부 C - 스타일 언어는 foreach을 사용하여 열거 형을 반복합니다. JavaScript에서는 for..in 루프 구조로 완료됩니다. :

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

캐치가 있습니다. for..in는 객체의 열거 가능한 멤버와 프로토 타입의 멤버를 반복합니다. 객체의 프로토 타입을 통해 상속 된 값을 읽지 않으려면 객체가 객체에 속하는지 확인하기 만하면됩니다.

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

또한 ECMAScript 5Array.prototypeforEach 메소드를 추가했습니다. calback을 사용하여 배열을 열거하는 데 사용할 수 있습니다 (polyfill은 문서에 있으므로 이전 브라우저에서도 사용할 수 있습니다).

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

콜백이 false을 반환하면 Array.prototype.forEach가 중단되지 않습니다. jQueryUnderscore.jseach에 자체 변형을 제공하여 단락 될 수있는 루프를 제공합니다.

75
zzzzBov

배열을 반복하려면 표준 3 부분 for 루프를 사용하십시오.

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

myArray.length를 캐싱하거나 역순으로 반복하여 성능 최적화를 얻을 수 있습니다.

34
Quentin

나는 이것이 오래된 게시물이라는 것을 알고 있으며 이미 많은 훌륭한 답변이 있습니다. 좀 더 완전성을 위해 AngularJS 를 사용하여 다른 것을 던질 것이라고 생각했습니다. 물론 이것은 Angular를 사용하는 경우에만 적용되지만 분명히 어쨌든 넣고 싶습니다.

angular.forEach은 2 개의 인수와 선택적인 세 번째 인수를 취합니다. 첫 번째 인수는 반복 할 객체 (배열)이고 두 번째 인수는 반복자 함수이며 선택적 세 번째 인수는 객체 컨텍스트 (기본적으로 루프 내부에서 'this'라고 함)입니다.

각도의 forEach 루프를 사용하는 방법에는 여러 가지가 있습니다. 가장 단순하고 아마도 가장 많이 사용되는 것은

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

내장 된 바닐라 풍미 for 루프와 반대로 angular.forEach 함수를 사용하는 장단점이 있습니다.

프로

  • 쉬운 가독성
  • 손쉬운 쓰기
  • 사용 가능한 경우 angular.forEach는 ES5 forEach 루프를 사용합니다. forEach 루프가 for 루프보다 훨씬 느리기 때문에 이제 cons 섹션에서 효율성을 얻을 것입니다. 일관성 있고 표준화 된 것이 좋기 때문에 이것을 전문가로 언급합니다.

정확히 같은 일을하는 다음 2 개의 중첩 루프를 고려하십시오. 두 개의 객체 배열이 있고 각 객체에 결과 배열이 포함되어 있다고 가정 해 봅시다. 각 배열에는 문자열 (또는 기타)의 Value 속성이 있습니다. 그리고 각각의 결과를 반복해야하고 같으면 같으면 몇 가지 조치를 수행하십시오.

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

이것은 매우 간단한 가상의 예이지만, 두 번째 접근 방식을 사용하여 루프 용 트리플 임베디드를 작성했으며 very 읽기가 어렵고 그 문제에 대해 쓰기가 어렵습니다.

단점

  • 능률. angular.forEach와 그 문제에 대한 기본 forEach은 둘 다 일반 for 루프보다 너무 느립니다 . 90 % 느림 . 따라서 큰 데이터 세트의 경우 기본 for 루프를 사용하는 것이 가장 좋습니다.
  • 휴식, 계속 또는 반환 지원이 없습니다. continue은 실제로 " accident "에 의해 지원되며, angular.forEach에서 계속하려면 angular.forEach(array, function(item) { if (someConditionIsTrue) return; });과 같은 함수에 return; 문을 추가하면됩니다. 해당 반복에 대한 기능을 계속 수행하십시오. 이것은 또한 기본 forEach이 중단 또는 계속을 지원하지 않기 때문입니다.

나는 다양한 다른 장단점이있을 것이라고 확신하며, 당신이 적합하다고 생각하는 것을 자유롭게 추가하십시오. 결론적으로, 효율성이 필요한 경우 루핑 요구에 맞는 기본 for 루프 만 사용하십시오. 그러나 데이터 세트가 더 작고 가독성 및 쓰기 가능성 대신에 약간의 효율성이 포기된다면, 그 나쁜 소년에게 반드시 angular.forEach를 던지십시오.

29
user2359695

배열을 비우는 것에 신경 쓰지 않는다면 :

var x;

while(x = y.pop()){ 

    alert(x); //do something 

}

xy의 마지막 값을 포함하며 배열에서 제거됩니다. y에서 첫 번째 항목을주고 제거하는 shift()을 사용할 수도 있습니다.

27
gaby de wilde

A forEach implementation ( jsFiddle에서보기 ) :

function forEach(list,callback) {
  var length = list.length;
  for (var n = 0; n < length; n++) {
    callback.call(list[n]);
  }
}

var myArray = ['hello','world'];

forEach(
  myArray,
  function(){
    alert(this); // do something
  }
);
27
nmoliveira

쉬운 해결책은 이제 underscore.js 라이브러리 를 사용하는 것입니다. each과 같은 유용한 도구를 많이 제공하며 작업이 가능한 경우 네이티브 forEach에 자동으로 위임합니다.

CodePen 예제 작동 원리는 다음과 같습니다.

var arr = ["elemA", "elemB", "elemC"];
_.each(arr, function(elem, index, ar)
{
...
});

또한보십시오

24
Micka

다음과 같이 jQuery 에 3 개의 foreach 구현이 있습니다.

var a = [3,2];

$(a).each(function(){console.log(this.valueOf())}); //Method 1
$.each(a, function(){console.log(this.valueOf())}); //Method 2
$.each($(a), function(){console.log(this.valueOf())}); //Method 3
24
Rajesh Paul

아마도 for(i = 0; i < array.length; i++) 루프가 최선의 선택이 아닙니다. 왜? 당신이 가지고있는 경우 :

var array = new Array();
array[1] = "Hello";
array[7] = "World";
array[11] = "!";

메서드는 array[0]에서 array[2]를 호출합니다. 첫째, 이것은 여러분이 가지고 있지 않은 변수를 먼저 참조 할 것이고 두 번째로 배열에 변수를 가지지 않을 것이고 세 번째는 코드를 더 굵게 만들 것입니다. 여기보세요, 제가 사용하는 것입니다 :

for(var i in array){
    var el = array[i];
    //If you want 'i' to be INT just put parseInt(i)
    //Do something with el
}

그리고 만약 당신이 그것을 기능으로 원한다면, 당신은 이것을 할 수 있습니다 :

function foreach(array, call){
    for(var i in array){
        call(array[i]);
    }
}

당신이 좀 더 많은 논리를 깨고 싶다면 :

function foreach(array, call){
    for(var i in array){
        if(call(array[i]) == false){
            break;
        }
    }
}

예:

foreach(array, function(el){
    if(el != "!"){
        console.log(el);
    } else {
        console.log(el+"!!");
    }
});

다음을 반환합니다.

//Hello
//World
//!!!
22
Federico Piragua

ES6 기준 :

list = [0, 1, 2, 3]
for (let obj of list) {
    console.log(obj)
}

ofin과 관련된 기이함을 피하고 다른 언어의 for 루프처럼 작동하게하고 let은 함수 내에서 루프 내에서 i을 바인드합니다.

명령이 하나 뿐인 경우 위의 예와 같이 중괄호 ({})를 생략 할 수 있습니다.

21
Zaz

이것은 색인이 0에서 시작하는 NON-sparse 목록에 대한 반복기이며 document.getElementsByTagName 또는 document.querySelectorAll을 처리 할 때 일반적인 시나리오입니다.

function each( fn, data ) {

    if(typeof fn == 'string')
        eval('fn = function(data, i){' + fn + '}');

    for(var i=0, L=this.length; i < L; i++) 
        fn.call( this[i], data, i );   

    return this;
}

Array.prototype.each = each;  

사용 예 :

예 # 1

var arr = [];
[1, 2, 3].each( function(a){ a.Push( this * this}, arr);
arr = [1, 4, 9]

예 # 2

each.call(document.getElementsByTagName('p'), "this.className = data;",'blue');

각 p 태그는 class="blue"을 얻습니다.

예 # 3

each.call(document.getElementsByTagName('p'), 
    "if( i % 2 == 0) this.className = data;",
    'red'
);

다른 모든 p 태그는 class="red">

예 # 4

each.call(document.querySelectorAll('p.blue'), 
    function(newClass, i) {
        if( i < 20 )
            this.className = newClass;
    }, 'green'
);

마지막으로 처음 20 개의 파란색 p 태그가 녹색으로 변경됩니다.

문자열을 함수로 사용할 때의주의 사항 : 함수는 컨텍스트 외부에서 생성되므로 변수 범위가 확실한 경우에만 사용해야합니다. 그렇지 않으면 범위 지정이보다 직관적 인 함수를 전달하는 것이 좋습니다.

17
Tim

네이티브 JavaScript 에는 for each 루프가 없습니다. 라이브러리를 사용하여이 기능을 사용할 수 있습니다 ( Underscore.js 권장), 간단한 for in 루프를 사용하십시오.

for (var instance in objects) {
   ...
}

그러나 더 간단한 for 루프를 사용해야하는 이유가있을 수 있습니다 (스택 오버플로 질문 참조 : 배열에 "for… in"을 사용하는 이유) 그런 나쁜 생각을 반복?)

var instance;
for (var i=0; i < objects.length; i++) {
    var instance = objects[i];
    ...
}
17
joidegn

몇 가지 방법이 있습니다 자바 스크립트에서 배열을 반복합니다.

for - 가장 일반적인 것입니다. 루핑을위한 전체 코드 블록

var languages = ["Java", "JavaScript", "C#", "Python"];
var i, len, text;
for (i = 0, len = languages.length, text = ""; i < len; i++) {
    text += languages[i] + "<br>";
}
document.getElementById("example").innerHTML = text;
<p id="example"></p>

while - 조건이 끝나는 동안 루프. 가장 빠른 루프 인 것 같습니다.

var text = "";
var i = 0;
while (i < 10) {
    text +=  i + ") something<br>";
    i++;
}
document.getElementById("example").innerHTML = text;
<p id="example"></p>

do/while - 조건이 참일 때 코드 블록을 반복하여 실행하면 적어도 한 번 실행됩니다

var text = ""
var i = 0;
do {
    text += i + ") something <br>";
    i++;
}
while (i < 10);
document.getElementById("example").innerHTML = text;
<p id="example"></p>

기능 루프 - forEach, map, filter, reduce함수를 순환합니다. 그러나 배열 등으로 뭔가를해야 할 경우에 사용합니다.

// For example, in this case we loop through the number and double them up using the map function
var numbers = [65, 44, 12, 4];
document.getElementById("example").innerHTML = numbers.map(function(num){return num * 2});
<p id="example"></p>

배열에 대한 함수 프로그래밍에 대한 자세한 내용과 예제는 블로그 게시물 _ ( JavaScript의 기능 프로그래밍 : map, filter 및 reduce)을 참조하십시오.

16
Alireza

배열을 사용하려면 ECMAScript5 (Javascript의 버전)가 필요합니다.

forEach - 배열의 모든 항목을 반복하고 각 항목에 필요한 모든 작업을 수행합니다.

['C', 'D', 'E'].forEach(function(element, index) {
  console.log(element + " is the #" + (index+1) + " in musical scale");
});

// Output
// C is the #1 in musical scale
// D is the #2 in musical scale
// E is the #3 in musical scale

경우에 더 많은 배열에 작업에 관심이 일부 inbuilt 기능을 사용합니다.

map - 콜백 함수의 결과로 새로운 배열을 생성합니다. 이 방법은 배열의 요소를 형식화해야 할 때 사용하는 것이 좋습니다.

// Let's upper case the items in the array
['bob', 'joe', 'jen'].map(function(elem) {
  return elem.toUpperCase();
});

// Output: ['BOB', 'JOE', 'JEN']

reduce - 이름에서 알 수 있듯이 currenct 요소에서 전달 된 주어진 함수와 이전 실행 결과를 호출하여 배열을 단일 값으로 줄입니다.

[1,2,3,4].reduce(function(previous, current) {
  return previous + current;
});
// Output: 10
// 1st iteration: previous=1, current=2 => result=3
// 2nd iteration: previous=3, current=3 => result=6
// 3rd iteration: previous=6, current=4 => result=10

every - 배열의 모든 요소가 콜백 함수에서 테스트를 통과하면 true 또는 false를 반환합니다.

// Check if everybody has 18 years old of more.
var ages = [30, 43, 18, 5];  
ages.every(function(elem) {  
  return elem >= 18;
});

// Output: false

filter - 필터가 해당 함수에 true를 반환하는 요소가있는 배열을 반환한다는 점을 제외하고는 모두 매우 비슷합니다.

// Finding the even numbers
[1,2,3,4,5,6].filter(function(elem){
  return (elem % 2 == 0)
});

// Output: [2,4,6]

희망이 유용 할 것입니다.

14
Anil Kumar Arya

forEach을 중단 할 수있는 inbuilt 기능은 없습니다. 실행을 중단하려면 다음과 같이 Array#some를 사용하십시오.

[1,2,3].some(function(number) {
    return number === 1;
});

이것은 some이 배열 순서대로 실행되는 콜백이 true를 반환하면 나머지를 실행하여 단락 시키므로 true를 반환하기 때문에 작동합니다. 원문 답변some some에 대한 배열 프로토 타입 참조.

14
Priyanshu Chauhan

나는 또한이 구문을 좋아할만한 누군가를 위해 역 루프와 위의 대답의 구성으로 이것을 추가하고 싶다.

var foo = [object,object,object];
for (var i = foo.length, item; item = foo[--i];) {
    console.log(item);
}

장점 :

이것에 대한 이점 : 나중에 다른 라인으로 선언 할 필요가없는 첫 번째 것과 같은 참조가 이미 있습니다. 객체 배열을 반복 할 때 유용합니다.

단점 :

참조가 false 일 때마다 중단됩니다 (false, undefined 등). 그것은 장점으로 사용할 수 있습니다. 그러나 읽는 것이 조금 더 어려워 질 것입니다. 또한 브라우저에 따라 원래의 것보다 빠르게 작동하도록 최적화되지 않을 수도 있습니다.

11

$.map를 사용하는 jQuery 방식 :

var data = [1, 2, 3, 4, 5, 6, 7];

var newData = $.map(data, function(element) {
    if (element % 2 == 0) {
        return element;
    }
});

// newData = [2, 4, 6];
10
DanFromGermany

아이디어에 가장 가까운 방법은 Array.forEach()을 사용하는 것입니다.이 함수는 배열의 각 요소에 대해 실행될 클로저 함수를 허용합니다.

myArray.forEach(
  (item) => {
    // do something 
    console.log(item);
  }
);

또 다른 가능한 방법은 Array.map()을 사용하는 것입니다.이 방법은 같은 방식으로 작동하지만 각 요소를 mutates하고 다음과 같이 반환합니다.

var myArray = [1, 2, 3];
myArray = myArray.map(
  (item) => {
    return item + 1;
  }
);

console.log(myArray); // [2, 3, 4]
6

ES6 destructuringspread 연산자 가있는 루프 사용

일부 자바 스크립트 베테랑들이 그것을 지저분하다고 생각할지 모르지만, 스프레드 연산자의 파괴와 사용은 ES6에 대한 새로운 사람들이 인간이 읽을 수있는/심미적 인 것으로 아주 유용하다는 것을 입증했습니다. 후배 또는 다른 사람들이 유용하다고 생각할 수도 있습니다.

다음 예제에서는 for...of 문과 .forEach 메서드를 사용합니다.

예제 6, 7 및 8.map, .filter, .reduce, .sort, .every, .some와 같은 기능 루프와 함께 사용할 수 있습니다. 이러한 메소드에 대한 자세한 내용은 Array 객체 를 참조하십시오.

예제 1 : 일반 for...of 루프 - 여기에 속임수가 없습니다.

let arrSimple = ['a', 'b', 'c'];

for (let letter of arrSimple) {
  console.log(letter);
}

예 2 : 단어를 문자로 나눕니다.

let arrFruits = ['Apple', 'orange', 'banana'];

for (let [firstLetter, ...restOfTheWord] of arrFruits) {
  // Create a shallow copy using the spread operator
  let [lastLetter] = [...restOfTheWord].reverse();
  console.log(firstLetter, lastLetter, restOfTheWord);

}

예 3 :keyvalue을 사용하여 반복 

// let arrSimple = ['a', 'b', 'c'];

// Instead of keeping an index in `i` as per example `for(let i = 0 ; i<arrSimple.length;i++)`
// this example will use a multi-dimensional array of the following format type: 
// `arrWithIndex: [number, string][]`

let arrWithIndex = [
  [0, 'a'],
  [1, 'b'],
  [2, 'c'],
];

// Same thing can be achieved using `.map` method
// let arrWithIndex = arrSimple.map((i, idx) => [idx, i]);

// Same thing can be achieved using `Object.entries`
// NOTE: `Object.entries` method doesn't work on internet Explorer unless it's polyfilled
// let arrWithIndex = Object.entries(arrSimple);

for (let [key, value] of arrWithIndex) {
  console.log(key, value);
}

예제 4 : 객체 속성을 인라인으로 가져 오기

let arrWithObjects = [{
    name: 'Jon',
    age: 32
  },
  {
    name: 'Elise',
    age: 33
  }
];

for (let { name, age: aliasForAge } of arrWithObjects) {
  console.log(name, aliasForAge);
}

예제 5 : 필요한 객체의 속성을 가져옵니다.

let arrWithObjectsWithArr = [{
    name: 'Jon',
    age: 32,
    tags: ['driver', 'chef', 'jogger']
  },
  {
    name: 'Elise',
    age: 33,
    tags: ['best chef', 'singer', 'dancer']
  }
];

for (let { name, tags: [firstItemFromTags, ...restOfTags] } of arrWithObjectsWithArr) {
  console.log(name, firstItemFromTags, restOfTags);
}

예 6 Is 예 3.forEach와 함께 사용됨

let arrWithIndex = [
  [0, 'a'],
  [1, 'b'],
  [2, 'c'],
];

// Not to be confused here, `forEachIndex` is the real index
// `mappedIndex` was created by "another user", so you can't really trust it

arrWithIndex.forEach(([mappedIndex, item], forEachIndex) => {
  console.log(forEachIndex, mappedIndex, item);
});

예제 7 Is 예제 4.forEach와 함께 사용됨

let arrWithObjects = [{
    name: 'Jon',
    age: 32
  },
  {
    name: 'Elise',
    age: 33
  }
];
// NOTE: Destructuring objects while using shorthand functions 
// are required to be surrounded by parenthesis
arrWithObjects.forEach( ({ name, age: aliasForAge }) => {
  console.log(name, aliasForAge)
});

예 8 Is 예 5.forEach와 함께 사용됩니다.

let arrWithObjectsWithArr = [{
    name: 'Jon',
    age: 32,
    tags: ['driver', 'chef', 'jogger']
  },
  {
    name: 'Elise',
    age: 33,
    tags: ['best chef', 'singer', 'dancer']
  }
];

arrWithObjectsWithArr.forEach(({
  name,
  tags: [firstItemFromTags, ...restOfTags]
}) => {
  console.log(name, firstItemFromTags, restOfTags);
});

6
darklightcode

람다 구문은 대개 IE 10 이하에서 작동하지 않습니다.

나는 보통

[].forEach.call(arrayName,function(value,index){
    console.log("value of the looped element" + value);
    console.log("index of the looped element" + index);
});


If you are a jQuery Fan and already have a jQuery file running, you should reverse the positions of the index and value parameters

$("#ul>li").each(function(**index,value**){
    console.log("value of the looped element" + value);
    console.log("index of the looped element" + index);
});
5
Murtuza Husain

ForEach는 다음과 같이 호출 할 수 있습니다.

let Array = [1,3,2];

theArray.forEach((element)=>{ 
  // use the element of the array
  console.log(element) 
}

요소는 0부터 배열의 길이까지의 각 인덱스의 값을가집니다.

산출:

1    
3    
2

설명 :

forEach는 프로토 타입 클래스입니다. 당신은 또한 thisArray.prototype.forEach (...);

프로토 타입 : https://hackernoon.com/prototypes-in-javascript-5bba2990e04b

다음과 같이 배열을 변경할 수도 있습니다.

for(let i=0;i<theArray.length;i++){
  console.log(i); //i will have the value of each index
}
4
Nouman Dilshad

화살표 함수를 사용하여 객체 배열을 반복하려는 경우 :

let arr=[{name:'john',age:50},{name:'clark',age:19},{name:'mohan',age:26}];

arr.forEach((person)=>{
  console.log('i am '+person.name+' and i am '+person.age+ ' old');
})
3
subhashish negi

개요:

배열을 반복 할 때 종종 다음 목표 중 하나를 달성 할 수 있습니다.

  1. 우리는 배열을 반복하고 새로운 배열을 생성하고자합니다 :

    Array.prototype.map 

  2. 우리는 배열을 반복하고 새로운 배열을 만들지 않기를 원합니다 :

    Array.prototype.forEach 

    for..of루프

JS에서는 이러한 두 가지 목표를 달성하는 여러 가지 방법이 있습니다. 그러나 어떤 것은 다른 것보다 conventient하다. 아래에서 자바 스크립트에서 배열 반복을 수행하기 위해 일반적으로 사용되는 메소드 (가장 conventient imo)를 찾을 수 있습니다.

새 배열 만들기 : Map

map()Array.prototype에있는 함수로, 배열의 모든 요소를 ​​변형 한 다음 new 배열을 반환합니다. map()은 콜백 함수를 인수로 사용하며 다음과 같은 방식으로 작동합니다.

let arr = [1, 2, 3, 4, 5];

let newArr = arr.map((element, index, array) => {
  return element * 2;
})

console.log(arr);
console.log(newArr);

인수로 map()에 전달한 콜백은 모든 요소에 대해 실행됩니다. 그런 다음 원래 배열과 길이가 같은 배열이 반환됩니다. 이 새로운 배열 요소는 map()에 인수로 전달 된 콜백 함수에 의해 변형됩니다.

mapforEachfor..of 루프와 같은 뚜렷한 차이점은 map은 새 배열을 반환하고 이전 배열은 그대로 둡니다 (splice과 같은 생각으로 명시 적으로 조작하는 경우는 예외입니다). 

또한 map 함수의 콜백은 현재 반복의 인덱스 번호를 두 번째 인수로 제공합니다. 또한 세 번째 인수는 map이 호출 된 배열을 제공합니다. 때때로 이러한 속성은 매우 유용 할 수 있습니다.

forEach을 사용하여 루프하기

forEach은 콜백 함수를 인수로 취하는 Array.prototype에있는 함수입니다. 그런 다음 배열의 모든 요소에 대해이 콜백 함수를 실행합니다. map() 함수와 달리 forEach 함수는 아무 것도 반환하지 않습니다 (undefined). 예 :

let arr = [1, 2, 3, 4, 5];

arr.forEach((element, index, array) => {

  console.log(element * 2);

  if (index === 4) {
    console.log(array)
  }
  // index, and oldArray are provided as 2nd and 3th argument by the callback

})

console.log(arr);

map 함수와 마찬가지로 forEach 콜백은 현재 반복의 인덱스 번호를 두 번째 인수로 제공합니다. 또한 세 번째 인수는 forEach이 호출 된 배열을 제공합니다. 

for..of를 사용하여 요소를 반복합니다.

for..of 루프는 배열 (또는 다른 반복 가능한 객체)의 모든 요소를 ​​반복합니다. 그것은 다음과 같은 방식으로 작동합니다 :

let arr = [1, 2, 3, 4, 5];

for(let element of arr) {
  console.log(element * 2);
}

위의 예에서 element은 배열 요소를 나타내고 arr은 반복 할 배열입니다. element이라는 이름이 임의적 인 것은 아니며 'el'과 같은 다른 이름을 선택하거나 적용 할 수있는 경우 더 선언적 일 수 있습니다. 

for..in 루프와 for..of 루프를 혼동하지 마십시오. for..in는 배열의 모든 열거 가능 속성을 반복하며 for..of 루프는 배열 요소를 반복합니다. 예 :

let arr = [1, 2, 3, 4, 5];

arr.foo = 'foo';

for(let element of arr) {
  console.log(element);
}

for(let element in arr) {
  console.log(element);
}

2

방대한 배열을 가지고 있다면 효율성을 높이기 위해 iterators 을 사용해야합니다. 반복자는 특정 JavaScript 콜렉션의 속성입니다 (예 : Map , Set , String , Array ). Even, for..ofiterator 후드를 사용합니다.

반복자는 마치 스트림 인 것처럼 목록의 항목을 한 번에 하나씩 소비함으로써 효율성을 향상시킵니다. 반복기를 특수하게 만드는 것은 컬렉션을 트래버스하는 방법입니다. 다른 루프는 반복을 위해 컬렉션 전체를 앞에 올려야하지만 반복자는 컬렉션의 현재 위치 만 알아야합니다. 

이터레이터의 next 메소드를 호출하여 현재 항목에 액세스합니다. 다음 메서드는 현재 항목의 valueboolean을 반환하여 컬렉션의 끝에 도달했음을 나타냅니다. 다음은 배열에서 반복자를 만드는 예제입니다. 

다음과 같이 values() 메소드를 사용하여 일반 배열을 반복자로 변환하십시오. 

    const myArr = [2,3,4]

let it = myArr.values();

console.log(it.next());
console.log(it.next());
console.log(it.next());
console.log(it.next());

다음과 같이 Symbol.iterator 를 사용하여 일반 배열을 반복자로 변형 할 수도 있습니다. 

const myArr = [2,3,4]

let it = myArr[Symbol.iterator]();

console.log(it.next());
console.log(it.next());
console.log(it.next());
console.log(it.next());

다음과 같이 정규 arrayiterator 으로 변환 할 수도 있습니다. 

let myArr = [8, 10, 12];

function makeIterator(array) {
    var nextIndex = 0;
    
    return {
       next: function() {
           return nextIndex < array.length ?
               {value: array[nextIndex++], done: false} :
               {done: true};
       }
    };
};

var it = makeIterator(myArr);

console.log(it.next().value);   // {value: 8, done: false}
console.log(it.next().value);   // {value: 10, done: false}
console.log(it.next().value);   // {value: 12, done: false}
console.log(it.next().value);   // {value: undefined, done: true}

노트

  • 반복자는 본질적으로 완벽하지 않습니다. 
  • 개체는 기본적으로 iterable이 아닙니다. 이 경우 값 대신 키와 함께 작동하기 때문에 for..in 를 사용하십시오.

iteration protocolhere 에 대한 자세한 내용을 볼 수 있습니다. 

1
BlackBeard
var a = ["car", "bus", "truck"]
a.forEach(function(item, index) {
    console.log("Index" + index);
    console.log("Element" + item);
})
1
John

// Looping through arrays using foreach  ES6 way

var data = new Array(1,2,3,4,5);
data.forEach((val,index) => {
    console.log("index :",index); // index
	console.log("value :", val); // value
});

0
arul prince

함수를 콜백으로 받아들이는 forEach () API (Javascript 제공)를 사용할 수 있으며 배열 내부에있는 각 요소에 대해 한 번만 실행됩니다.

https://fullstackgeek.blogspot.com/2019/01/arrays-in-javascript-part-2.html

0
Ayush Jain

나는 파이썬에서 왔고 나는이 방법을 훨씬 더 명확하게 발견했다.
theArray는 배열이고, instance는 배열의 요소입니다.

for(let instance of theArray)
{
    console.log("The instance",instance);
}

또는

for( instance in theArray)
{
  console.log("The instance",instance);
}

비교 대상 :

theArray.forEach(function(instance) {
    console.log(instance);
});

하지만 하루가 끝나면 모두 똑같은 일을합니다.

0
Peko Chan

기능적으로 코드를 유지하려면 map을 사용하십시오.

theArray.map(instance => do_something);

이 방법으로 새로운 어레이를 미래의 작동으로 생성하고 원하지 않는 부작용을 건너 뜁니다.

0
alejoko

forEach()을 사용하려면 - 

theArray.forEach ( element => {
    console.log(element);
});

for()을 사용하려면 - 

for(let idx = 0; idx < theArray.length; idx++){
    let element = theArray[idx];
    console.log(element);
}
0
Harunur Rashid