JS_Basic 지식에 대한 Array.prototype.indexOf 확장으로 인해 발생하는 문제 및 해결 방법

Array에는 indexOf 메소드가 없기 때문에 배열에서 요소의 인덱스를 찾는 것이 번거롭습니다. 호출의 편의를 위해 프로토타입 프로토타입을 통해 Array.prototype.indexOf()를 확장하여 좀 더 편리하게 만듭니다. 사용하기 편리합니다. 그러나 배열을 순회할 때 이 사용자 정의 indexOf에 문제가 있었습니다.

코드 복사 코드는 다음과 같습니다.

Array.prototype.indexOf = 함수(항목) {
for (var i = 0; i < this.length; i ) {
if (this[i] == 항목)
내가
}
-1을 반환
}

사용 시 직접

코드 복사 코드는 다음과 같습니다.

var arr=[1,2,3,4,5]
var index=arr.indexOf(1); //index==0

확장 후 매우 편안하고 사용하기 편리하여 조화로운 장면을 연출합니다...

그런데 배열 요소를 순회할 때 for..in.. 루프를 사용하여 또 다른 문제를 일으키고 조화로운 분위기를 깨뜨린 적이 있었습니다.

코드 복사 코드는 다음과 같습니다.

var a=["장비","관우","유비","여포"]
for(var p in a){
document.write(p "=" a[p] "
")
}

원래는 이 4명의 이름을 출력하고 싶었는데, 뭐가 출력됐나요?

실제 출력은 다음과 같습니다.

코드 복사 코드는 다음과 같습니다.

//0=장페이
//1=관우
//2=유비
//3=루부
//indexOf=function(item) { for (var i = 0; i < this.length; i ) { if (this[i] == item) return i } return -1;

이름을 입력하는 것 외에도 자체 확장 메서드인 indexOf도 출력합니다. 그런데 이상한 점은 Firefox가 "정상"이고 이름이 4명뿐이라는 것입니다.

자체적으로 확장할 수 있는 출력 indexOf는 결국 for..in이 객체의 모든 사용자 정의 속성이나 배열의 모든 요소를 ​​탐색합니다.

그렇다면 파이어폭스는 어떨까요?

나중에 정보를 확인하다가 알게 되었는데

Array는 이미 javascript 버전 1.6에서 Array.indexOf()를 지원하고 있고, 제가 사용하는 Firefox는 버전 3.5인데, 이는 이미 javascript 1.8을 지원하고 있습니다. IndexOf는 Array 자체의 고유 메서드입니다.

IE의 경우 IE8을 사용하고 있음에도 불구하고 JavaScript 버전 1.3만 지원합니다.

따라서 IE8은 indexOf를 "사용자 정의 속성"으로 간주하는 반면 Firefox는 기본적으로 자체적으로 지원되는 고유 속성으로 간주합니다.

정말 그런가요?

실험을 수행하고 indexOf의 이름을 myIndexOf로 바꾸고 다시 시도하십시오. 결과적으로 IE와 Firefox 모두 myIndexOf를 출력하여 이전 점이 정확하다는 것을 증명합니다.

그리고 또 다른 문제가 발생합니다. 오랫동안 indexOf를 확장해 왔습니다. 이제 많은 프로젝트 코드에서 이미 이 방법을 사용하고 있지만 이제는 배열 자체의 요소를 출력하기 위해 for..in을 사용해야 합니다. 직접 연장하고 싶지 않아요. 러시아에 가면 어떻게 해야 하나요?

다행히 자바스크립트에서는 hasOwnProperty 메소드를 제공합니다.

설명 보기:

코드 복사 코드는 다음과 같습니다.

Object의 자손인 모든 객체는 hasOwnProperty 메소드를 상속합니다. 이 메소드는 객체가 해당 객체의 직접 속성으로 지정된 속성을 가지고 있는지 확인하는 데 사용할 수 있습니다. 이 메소드는 객체의 프로토타입 체인을 확인하지 않습니다.

설명을 보니 저희가 원하는 내용이네요.

for...in..에서 판단만 하면 괜찮습니다

코드 복사 코드는 다음과 같습니다.

if(a.hasOwnProperty(p)){

                 document.write(p "=" a[p] "
")
}

또한 다음은 인터넷에서 가져온 hasOwnProperty 사용 방법의 예입니다.

코드 복사 코드는 다음과 같습니다.

기능도서(제목, 저자) { 
   this.제목 = 제목; 
   this.author = 저자; 
  } 
   Book.prototype.price = 9.99; 
   Object.prototype.copyright = "herongyang.com"; 
   var myBook = new Book("JavaScript 튜토리얼", "양헤롱"); 
   // 기본 프로토타입 수준에서 내장 속성 덤프
   document.writeln("/nObject.prototype의 내장 속성:"); 
   dumpProperty(Object.prototype, "생성자"); 
   dumpProperty(Object.prototype, "hasOwnProperty"); 
   dumpProperty(Object.prototype, "isPrototypeOf"); 
   dumpProperty(Object.prototype, "toString"); 
   dumpProperty(Object.prototype, "valueOf"); 
   dumpProperty(Object.prototype, "저작권"); 
   // 내 프로토타입 수준에서 내장 속성 덤프
   document.writeln("/n==================/nBook.prototype의 내장 속성:"); 
   dumpProperty(Book.prototype, "생성자"); 
   dumpProperty(Book.prototype, "hasOwnProperty"); 
   dumpProperty(Book.prototype, "isPrototypeOf"); 
   dumpProperty(Book.prototype, "toString"); 
   dumpProperty(Book.prototype, "valueOf"); 
   dumpProperty(Book.prototype, "저작권"); 
   // 객체 수준에서 내장 속성 덤프
   document.writeln("/n==================/nmyBook의 내장 속성:"); 
   dumpProperty(myBook, "생성자"); 
   dumpProperty(myBook, "hasOwnProperty"); 
   dumpProperty(myBook, "isPrototypeOf"); 
   dumpProperty(myBook, "toString"); 
   dumpProperty(myBook, "valueOf"); 
   dumpProperty(myBook, "저작권"); 
function dumpProperty(객체, 속성) { 
   var 상속;  
   if (object.hasOwnProperty(property))  
      상속 = "로컬"; 
   그렇지 않으면
      상속 = "상속됨"; 
   document.writeln(property ": " 상속 ": "
      객체[속성]); 
}

查看浏览器支持javascript到哪个版本：

复主代码 代码如下:

http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" > "> <스크립트 언어="자바스크립트"> //document.write("브라우저 유형:" navigator.appName "
")
//document.write("브라우저 버전:" navigator.appVersion "
")
//JavaScript1.0을 지원하는 브라우저에서는 이 스크립트를 실행할 수 있습니다.
Document.write('이 브라우저는 JavaScript1.0을 지원합니다
'); 스크립트>
<스크립트 언어="JavaScript1.1"> // JavaScript1.1을 지원하는 브라우저에서만 이 스크립트를 실행할 수 있습니다.
Document.write('이 브라우저는 JavaScript1.1을 지원합니다
'); 스크립트>
<스크립트 언어="JavaScript1.2"> // JavaScript1.2를 지원하는 브라우저에서만 이 스크립트를 실행할 수 있습니다
Document.write('이 브라우저는 JavaScript1.2를 지원합니다
'); 스크립트>
<스크립트 언어="JavaScript1.3"> //JavaScript1.3을 지원하는 브라우저에서는 이 스크립트를 실행할 수 있습니다.
Document.write('이 브라우저는 JavaScript1.3을 지원합니다
'); 스크립트>
<스크립트 언어="JavaScript1.4"> //JavaScript1.4를 지원하는 브라우저에서 이 스크립트를 실행할 수 있습니다.
Document.write('이 브라우저는 JavaScript1.4를 지원합니다
'); 스크립트>
<스크립트 언어="JavaScript1.5"> //JavaScript1.5를 지원하는 브라우저에서 이 스크립트를 실행할 수 있습니다.
Document.write('이 브라우저는 JavaScript1.5를 지원합니다
'); 스크립트>
<스크립트 언어="JavaScript1.6"> //JavaScript1.6을 지원하는 브라우저에서는 이 스크립트를 실행할 수 있습니다.
Document.write('이 브라우저는 JavaScript1.6을 지원합니다
'); 스크립트>
<스크립트 언어="JavaScript1.7"> //JavaScript1.7을 지원하는 브라우저에서 이 스크립트를 실행할 수 있습니다.
Document.write('이 브라우저는 JavaScript1.7을 지원합니다
'); 스크립트>
<스크립트 언어="JavaScript1.8"> // JavaScript 1.8을 지원하는 브라우저에서만 이 스크립트를 실행할 수 있습니다.
Document.write('이 브라우저는 JavaScript1.8을 지원합니다
'); 스크립트>
<스크립트 언어="JavaScript1.9"> //JavaScript1.9를 지원하는 브라우저에서는 이 스크립트를 실행할 수 있습니다.
Document.write('이 브라우저는 JavaScript1.9를 지원합니다
'); 스크립트>