Jquery에서 길이 속성을 사용하는 방법에 대한 자세한 설명

이 글에서는 object와 같은 배열을 통해 javascript의 길이 속성에 대한 몇 가지 비밀을 살펴보겠습니다. 예제 1:

var obj={0:'a',1:'b'} 
alert(obj.length); //undefined 
var arr=['a','b'] 
alert(arr.length); // 2

위 예에서 배열형 객체의 길이 속성은 저장하는 데이터의 양과 직접적으로 연결되지 않습니다. 인덱스 속성(0, 1)과 길이 속성은 모두 다음과 같이 간주됩니다. 객체의 일반적인 속성 사이에는 관계가 없습니다. js 엔진은 저장된 데이터의 양을 기반으로 배열과 같은 객체의 길이를 자동으로 계산하지 않습니다.

그런데 배열 같은 객체의 길이는 실제로 저장된 데이터의 양과 아무 관련이 없나요? 예제 2는 이것이 사실이 아님을 보여줍니다.

예 2:

function myarr(){} 
var m=new myarr(); 
Array.prototype.push.apply(m,['cson','lai','xiaoc']); 
alert(m.length);//IE8以下：undefined 其他浏览器：3 
alert(m[2]);//IE8以下：undefined 其他浏览器：‘xiaoc'

예 2에서 볼 수 있듯이 IE8 이하 버전을 제외하고 배열 메서드를 강제로 사용하여 배열 유사 객체에 요소를 추가할 때 길이는 객체의 속성도 계산됩니다. IE8 이하 버전에서는 배열 메소드를 사용하여 배열 유사 객체에 요소를 추가하는 기능을 강제로 지원하지 않는 것 같습니다.

예제 3:

이 예는 예 2의 myarr
constructor
에 초기화 작업을 추가하여 배열과 유사한 객체가 초기화될 때 요소를 추가합니다. 이상한 일이 발생했습니다.

function myarr(){this[0]='cc';} 
var m=new myarr(); 
Array.prototype.push.apply(m,['cson','lai','xiaoc']); 
alert(m.length);//ie8以下：undefined 其他：3 
alert(m[2]);//ie8以下：undefined 其他：xiaoc

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

function myarr(){this[0]='cc'; this.length=1;}//多加一个length的初始化 
var m=new myarr(); 
Array.prototype.push.apply(m,['cson','lai','xiaoc']); 
alert(m.length);//输出4 
alert(m[2]);//输出'lai‘

이번에도 이상한 일이 발생했습니다(ie6 7 포함). 그리고 인덱스는 The입니다. 2의 요소는 'lai'로 올바르게 출력됩니다. IE 6 및 7에서 길이 속성의 초기화를 추가한 후에는 배열 메소드를 정상적으로 사용할 수 있음을 알 수 있습니다.

이제 길이 속성을 잘못된 유형으로 초기화해 보세요.

예제 4:

function myarr(){this[0]='cc'; this.length="bo";}//length设置为不能转换为number的不合法类型 
var m=new myarr(); 
Array.prototype.push.apply(m,['cson','lai','xiaoc']); 
alert(m.length);//输出 3 
alert(m[2]);// 输出'xiaoc‘

function myarr(){this[0]='cc'; this.length="1";}//length设置为能转换为数字的不合法类型 
Array.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='undefined';//报错invalid array length

위의 예에서 우리는 결론을 내릴 수 있습니다: 배열을 사용할 때 -like 객체, 다양한 잘못된 길이 계산으로 인해 발생하는 이상한 문제를 피하기 위해 배열 유사 객체를 초기화할 때 길이 속성 값을 초기화해야 합니다. 초기화 중에 요소가 추가되었지만 길이 속성 값이 설정되지 않은 경우. , 배열 방법을 사용하십시오. 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‘

프로토타입

inheritance

배열을 사용할 때 길이는 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,[]); 메소드를 사용하고 길이 속성의 값을 올바르게 초기화하는 것을 기억하십시오.

Object 개체의 길이 가져오기

모든 JS 프로그래머(JS뿐만 아니라)는 배열(Array)에 길이가 있고 배열의 길이는 길이 속성을 통해 쉽게 얻을 수 있다는 것을 알고 있습니다. 배열을 사용하는 한 해당 길이 속성이 사용된다고 할 수 있습니다.

　Object 객체에는 길이 속성이나 메소드가 없습니다. 왜냐하면 사람들은 객체가 제공할 수 있는 메소드에만 관심이 있을 뿐 얼마나 많은 메소드가 있는지 알 필요가 없기 때문입니다. 실제로 이것은 실제로 보편적인 요구 사항이 아니므로 ECMAScript는 자체적으로 추가 부담을 추가하지 않습니다.

저는 이 문제를 한 번도 생각해 본 적이 없습니다. CGI를 통해 데이터를 하나씩 가져오는데, 백그라운드에서는 이를 배열로 만들어서 json으로 반환합니다. 아래와 같이:

 try{callback({   
 data:[{a:1},{a:2}]    
 }); 
}catch(e){}

　这是非常合理的，因为我在前端可以用length得到数据的长度，并逐条将其插入表格，或者是通过其他的方式表现出来。但是你永远也不能用一成不变的思维方式来解决所有问题。

　　某天写后台接口的同事决定换一种数据格式，改用object来表示数据，并为每个数据添加一个索引，如下所示：

try{callback({     
data:{1:{a:1},2:{a:2}}    
 });  
}catch(e){}

面对这样的数据，我就犯愁了，因为object不能获取对象长度。当然我可以叫后台同事改一下接口返回的格式，但是既然他可以写出以这样格式返回的代码，那其他的后台同事也同样

可以写出。为了不影响到更多的人，就需要我在前端来做处理了。其实要获取对象的长度也不难，用for in 语句就能实现，如下代码所示：

var a = {a:1,b:2,c:3,d:4};
function length(o) {
    var count = 0;
    for(var i in o){
        count ++;
    }
    return count;
};
alert(length(a));    //5

至于为什么是5而不是4那是因为每个对象都有一个内部属性（proto指向原型）。

　　为了更方便的使用这个方法，可以把它写到Object原型里面去，如下代码所示：

var a = {a:1,b:2,c:3,d:4};
Object.prototype.length = function() {
    var count = 0;
    for(var i in this){
        count ++;
    }
    return count;
};
alert(a.length());    //5

　　这样用起来会更直观，跟接近Array的使用习惯。

위 내용은 Jquery에서 길이 속성을 사용하는 방법에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!