javascript_javascript 기술의 길이 속성 탐색

예시 1:

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

var obj={0: 'a' ,1:'b'}
alert(obj.length); //정의되지 않음
var arr=['a','b']
alert(arr.length); 2

위의 예에서 배열형 객체의 길이 속성은 저장하는 데이터의 양과 직접 연결되지 않습니다. 인덱스 속성(0, 1)과 길이 속성이 모두 존재합니다. 객체의 일반적인 속성과 마찬가지로 js 엔진은 저장된 데이터의 양을 기반으로 배열과 같은 객체의 길이를 자동으로 계산하지 않습니다.
그런데 배열 같은 객체의 길이는 실제로 저장된 데이터의 양과 아무 관련이 없나요? 예 2는 그렇지 않음을 보여줍니다.
예 2:

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

함수 myarr(){}
var m=new myarr()
Array.prototype.push.apply(m,['cson','lai','xiaoc' ]);
alert( m.length);//IE8 미만: 정의되지 않음 기타 브라우저: 3
alert(m[2]);//IE8 미만: 정의되지 않음 기타 브라우저: 'xiaoc'

예제 2에서 볼 수 있듯이 IE8 이하 버전을 제외하면 배열 메소드를 강제로 사용하여 배열류 객체에 요소를 추가할 때 객체의 길이 속성도 계산됩니다. IE8 이하 버전에서는 배열 메소드를 사용하여 배열과 유사한 객체에 요소를 추가하는 기능을 강제로 지원하지 않는 것 같습니다.
예 3:
이 예는 예 2의 myarr 생성자에 초기화 작업을 추가하여 배열과 유사한 객체가 초기화될 때 요소를 추가합니다.

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

function myarr(){this[0]='cc';}
var m =new myarr();
Array.prototype.push.apply(m,['cson','lai','xiaoc'])
alert(m.length);//ie8 이하: 정의되지 않음 기타: 3
alert(m[2]);//ie8 이하: 정의되지 않음 기타: xiaoc

ie8 이하의 브라우저는 계속해서 배열 메소드의 강제 사용을 지원하지 않습니다. 다음 예가 있을 것입니다. 다른 브라우저의 경우 길이 속성 출력은 3이고 인덱스 2의 요소는 'xiaoc'입니다. 분명히 js 엔진은 배열 유사 객체에 원래 존재했던 인덱스 0의 'cc' 요소를 완전히 무시합니다! 이제 다음 예제를 살펴보겠습니다. 이 예제는 예제 3을 기반으로 길이 속성에 추가 초기화를 추가합니다.

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

function myarr(){this[0]='cc'; this.length=1;}//길이 초기화를 하나 더 추가합니다
var m=new myarr () ;
Array.prototype.push.apply(m,['cson','lai','xiaoc'])
alert(m.length);//출력 4
alert( m[ 2]);//'lai' 출력

이번에는 모든 브라우저(ie6 7 포함)가 올바르게 4를 출력했고, 인덱스 2를 가진 요소는 '로 올바르게 출력되었습니다. lai'를 보면, IE 6, 7에서 길이 속성의 초기화를 추가한 이후부터 배열 방식을 정상적으로 사용할 수 있음을 알 수 있다.
이제 길이 속성을 잘못된 유형으로 초기화해 보십시오.
예 4:

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

function myarr(){this[0]='cc'; this.length="bo";}//length가 숫자로 변환할 수 없는 잘못된 유형으로 설정되었습니다.
var m=new myarr();
Array.prototype.push.apply(m,['cson','lai','xiaoc'])
alert(m.length);/ /output 3
alert(m[2]);// 'xiaoc' 출력

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

function myarr(){this[0]='cc';}//length가 잘못된 유형으로 설정되었습니다. 숫자로 변환 가능
배열 .prototype.push.apply(m,['cson','lai','xiaoc'])
alert(m.length);//출력 4
alert(m[2]);/ /'lai' 출력

위의 모든 예에서 배열 방법을 사용할 때(여기서는 push를 예로 들어) 프로세스가 대략 다음과 같다고 추론할 수 있습니다.
IE6 7:
다음과 같이 볼 수 있습니다. IE6 7은 지원되지 않습니다. 요소를 추가하려면 배열 방법을 사용해야 하지만, 길이 속성이 존재하지 않는지 먼저 확인하여 아무런 작업 없이 반환됩니다. 길이 속성이 잘못된 값인 경우 숫자 유형으로 변환을 시도합니다. 변환에 실패하면 길이가 0으로 설정됩니다. 이렇게 하면 예제 2와 3의 정의되지 않은 출력과 예제 4의 올바른 출력을 구문 분석할 수 있습니다.

다른 브라우저:
다른 브라우저는 길이 속성에 따라 다른 작업을 수행합니다. 길이 속성이 없으면 길이를 0으로 설정합니다. 길이 속성이 잘못된 값인 경우 변환을 시도합니다. 변환에 실패하면 길이도 0으로 설정됩니다.

길이 속성은 배열 방법에서 결정적인 역할을 하기 때문에 js 엔진은 길이 속성에 잘못된 값을 쓰는 것을 금지합니다.

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

var arr=['1','2','3']
arr.length= 'undefine';/ /잘못된 배열 길이 보고 오류

위의 예에서 결론을 내릴 수 있습니다. 배열과 유사한 객체를 사용할 때 다양한 잘못된 길이로 인해 발생하는 이상한 문제를 피하기 위해 계산을 위해 배열형 객체를 초기화할 때 길이 속성 값을 초기화해야 합니다. 초기화 중에 요소가 추가되었지만 길이 속성 값이 설정되지 않은 경우 배열 메서드를 사용할 때 IE6 7은 모든 작업을 무시합니다. 다른 브라우저는 초기화 중에 추가를 무시합니다.

또한 길이 속성으로 인해 발생하는 또 다른 문제:
예제 5 참조:

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

function myarr(){}
myarr.prototype=new Array()
var m=new myarr()
m. push( 'cson','lai','xiaoc');
alert(m.length);//IE6 7: 0 기타: 3
alert(m[2]);//모든 브라우저: ' xiaoc'

배열에 프로토타입 상속을 사용하는 경우 IE 6 및 7에서는 길이가 항상 0입니다. 요소 수에 관계없이 다른 브라우저에서는 정상적으로 작동합니다.
길이 속성을 강제로 설정해도 IE6 7 이하에서는 생사가 0이다:

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

function myarr(){}
myarr.prototype=new Array()
var m=new myarr()
m.length= 10;
alert(m.length );//IE6 7:0 기타: 10

따라서 결론을 내릴 수 있습니다. 객체 프로토타입이 IE6 7에서 배열을 상속할 때 길이 속성은 항상 0이어야 합니다. 따라서 배열 유사 객체가 배열 메서드를 사용해야 하는 경우 배열을 상속하지 말고 Array.prototype.xxx.apply(obj,[]) 메서드를 사용해야 하며, 올바르게 초기화해야 합니다. 길이 속성의 값입니다.