> 웹 프론트엔드 > JS 튜토리얼 > JavaScript에서 for..in 루프의 함정

JavaScript에서 for..in 루프의 함정

高洛峰
풀어 주다: 2016-11-28 13:33:39
원래의
1310명이 탐색했습니다.

                                                                                                           >                                       🎜>

(2) for..in loop;

for 루프를 사용하여 배열 객체를 반복하는 것은 모든 사람에게 일반적입니다. 하지만 for..in 루프를 사용할 때는 모두가 주의해야 합니다. 왜 이렇게 말하는 걸까요? 여러분, 제 말을 들어보세요...

Javascript는 객체나 배열의 속성을 반복하는 데 사용되는 특수 루프(즉, for..in 루프)를 제공합니다. for...in 루프의 루프 카운터인 각 요소는 숫자가 아닌 문자열입니다. 여기에는 현재 속성의 이름이나 현재 배열 요소의 인덱스가 포함됩니다.

사례 1:

실행 결과:

               //使用for..in循环遍历对象属性
 
               varperson={
 
                       name: "Admin",
 
                       age: 21,
 
                       address:"shandong"
 
               };
 
              
 
               for(vari in person){
 
                       console.log(i);
 
               }
로그인 후 복사
이름

age

address

객체를 순회할 때 루프 카운터인 변수 i , 개체 속성 이름입니다

실행 결과:

               //使用for..in循环遍历数组
 
               vararray = ["admin","manager","db"]
 
               for(vari in array){
 
                       console.log(i);
 
               }
로그인 후 복사

0

1

2

배열을 순회할 때 루프 카운터인 변수 i는 현재 배열 요소

사례 2:

그러나 이제 for.. in 루프는 매우 유용합니다. 하지만 너무 일찍 기뻐하지는 마세요. 다음 예를 살펴보세요.

실행 결과:

                 var array =["admin","manager","db"];
 
                 //给Array的原型添加一个name属性
 
                 Array.prototype.name= "zhangsan";
 
                 for(var i in array){
 
                    alert(array[i]);
 
                 }
로그인 후 복사
관리자

관리자

db

zhangsan

와 신기하네요 자, 장산은 왜 갑자기 나타난 걸까요?

이제 for 루프를 사용하면 어떻게 되는지 볼까요? ?

실행 결과:

               vararray = ["admin","manager","db"];
 
                //给Array的原型添加一个name属性
 
               Array.prototype.name = "zhangsan";
 
               for(var i =0 ; i<array.length; i++){
 
                      alert(array[i]);
               };
로그인 후 복사
admin

manager

db

아, 이제 for..in 루프가 특정 유형의 프로토타입에 있는 메소드와 속성을 순회한다는 것을 이해했습니다. 코드에 오류가 있습니다. 이 문제를 방지하려면 객체의 hasOwnProperty() 메서드를 사용하여 객체의 속성이나 메서드가 상속되지 않으면 hasOwnProperty() 메서드가 true를 반환합니다. 즉, 여기서 검사에는 다른 개체에서 상속된 속성 및 메서드가 포함되지 않고 특정 개체 자체에서 직접 생성된 속성만 포함됩니다.

사례 3:

실행 결과:

               vararray = ["admin","manager","db"];
 
               Array.prototype.name= "zhangshan";
 
               for(vari in array){
 
                      //如果不是该对象自身直接创建的属性(也就是该属//性是原型中的属性),则跳过显示
 
                       if(!array.hasOwnProperty(i)){
 
                               continue;
 
                        }
 
                        alert(array[i]);
 
               }
로그인 후 복사
admin

매니저

db

또 다 멀건 없구나, 야, 모르겠어. 동지들 보세요~ "구름을 걷어내고 맑은 하늘을 보는 기분"이 느껴지시나요? ㅎㅎ

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿