집 > 기사 > 웹 프론트엔드 > Javascript 배열 루프 순회(forEach 자세한 설명)

Javascript 배열 루프 순회(forEach 자세한 설명)

亚连원래의: 2018-05-19 14:17:089116검색

이 글에서는 forEach에 대한 Javascript 배열 루프 순회에 대한 자세한 설명을 주로 소개합니다. 필요한 경우 자세히 알아볼 수 있습니다.

1.js 배열 루프 탐색.

배열 루프 변수에서 가장 먼저 떠오르는 것은 for(var i=0;i

또한 더 간단한 forEach 메서드

2.forEach 함수를 사용할 수도 있습니다.

Firefox와 Chrome의 Array 유형에는 모두 forEach 기능이 있습니다. 다음을 사용하세요:

<!--Add by oscar999--> 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> 
<HTML> 
<HEAD> 
<TITLE> New Document </TITLE> 
<META NAME="Author" CONTENT="oscar999"> 
</HEAD> 
 
<BODY> 
<script> 
var arryAll = []; 
arryAll.push(1); 
arryAll.push(2); 
arryAll.push(3); 
arryAll.push(4); 

//匿名方式
arryAll.forEach(function(e){ 
  alert(e); 
}) 

function t1(arg){alert(arg);}
//非匿名方式
arryAll.forEach(t1,arryAll);

</script> 
</BODY> 
</HTML>

그러나 위의 코드는 IE에서 제대로 작동하지 않습니다.

IE의 배열에는 이 메서드가 없기 때문입니다

alert(Array.prototype.forEach);

위 문장을 실행하면 "정의되지 않음"이 표시됩니다. 이는 IE의 배열에 forEach 메서드가 없다는 의미입니다.

3. IE가 forEach 메서드와 호환되도록 만들기

IE의 배열에는 forEach 메서드가 없으므로 이 프로토타입 메서드를 수동으로 추가하겠습니다.

//Array.forEach implementation for IE support.. 
//https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Array/forEach 
if (!Array.prototype.forEach) { 
  Array.prototype.forEach = function(callback, thisArg) { 
    var T, k; 
    if (this == null) { 
      throw new TypeError(" this is null or not defined"); 
    } 
    var O = Object(this); 
    var len = O.length >>> 0; // Hack to convert O.length to a UInt32 
    if ({}.toString.call(callback) != "[object Function]") { 
      throw new TypeError(callback + " is not a function"); 
    } 
    if (thisArg) { 
      T = thisArg; 
    } 
    k = 0; 
    while (k < len) { 
      var kValue; 
      if (k in O) { 
        kValue = O[k]; 
        callback.call(T, kValue, k, O); 
      } 
      k++; 
    } 
  }; 
}

자세한 소개는 다음을 참고하세요:
https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Array/forEach

4. 고리?

이 상황에서는 forEach가 continue, break를 사용할 수 없습니다.

1. if 문 제어

2. return 문 제어(true 반환 또는 false 반환)
사실 Return은 Continue와 유사합니다. 다음 예는 배열에 있는 2의 배수와 3의 배수입니다. 현재 break와 유사한 효과를 작성하는 더 좋은 방법은 없습니다.

개인 의견: Java 구문이든 C# 구문이든 forEach는 모든 값을 순회하는 것입니다.

검색해 보니 return false를 얻을 수 있다고 하는 사람도 있었는데 시도해 보니 return false의 효과는 같습니다. return, return true도 마찬가지입니다.

아래 테스트 코드는 제가 직접 추가한 것입니다.

<!--Add by oscar999--> 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> 
<HTML> 
<HEAD> 
<TITLE> New Document </TITLE> 
<META NAME="Author" CONTENT="oscar999"> 
</HEAD> 
 
<BODY> 
<script> 
if (!Array.prototype.forEach) { 
  Array.prototype.forEach = function(callback, thisArg) { 
    var T, k; 
    if (this == null) { 
      throw new TypeError(" this is null or not defined"); 
    } 
    var O = Object(this); 
    var len = O.length >>> 0; // Hack to convert O.length to a UInt32 
    if ({}.toString.call(callback) != "[object Function]") { 
      throw new TypeError(callback + " is not a function"); 
    } 
    if (thisArg) { 
      T = thisArg; 
    } 
    k = 0; 
    while (k < len) { 
      var kValue; 
      if (k in O) { 
        kValue = O[k]; 
        callback.call(T, kValue, k, O); 
      } 
      k++; 
    } 
  }; 
} 
 
var arryAll = []; 
arryAll.push(1); 
arryAll.push(2); 
arryAll.push(3); 
arryAll.push(4); 
arryAll.push(5);
arryAll.push(6); 
arryAll.push(7); 
 
 
var arrySpecial = []; 
 
arryAll.forEach(function(e){ 
  if(e%2==0) 
  { 
    arrySpecial.push(e); 
  }else if(e%3==0) 
  { 
    arrySpecial.push(e); 
  } 
}) 
 
</script> 
</BODY> 
</HTML>

위 내용은 제가 여러분을 위해 정리한 내용입니다. 앞으로 도움이 되길 바랍니다.

Javascript 배열 루프 순회(forEach 자세한 설명)

관련 기사