Heim > Web-Frontend > js-Tutorial > Hauptteil

Ausführliche Erklärung zur Verwendung des Längenattributs in jquery

伊谢尔伦
Freigeben: 2017-06-17 13:16:28
Original
3159 Leute haben es durchsucht

In diesem Artikel werden wir einige Geheimnisse des Längenattributs in Javascript durch Arrays wie Objekt erforschen. Beispiel 1:

Aus dem obigen Beispiel ist das Längenattribut im Array-ähnlichen Objekt nicht direkt mit der Menge der gespeicherten Daten verknüpft, unabhängig davon, ob es sich um das Indexattribut handelt (0, 1) oder das Längenattribut existieren als gewöhnliche Attribute des Objekts und es besteht keine Beziehung zwischen ihnen. Die js-Engine berechnet die Länge des Array-ähnlichen Objekts nicht automatisch basierend auf der Menge der gespeicherten Daten.
var obj={0:'a',1:'b'} 
alert(obj.length); //undefined 
var arr=['a','b'] 
alert(arr.length); // 2
Nach dem Login kopieren
Aber hat die Länge eines Array-ähnlichen Objekts wirklich nichts mit der gespeicherten Datenmenge zu tun? Beispiel 2 zeigt, dass dies nicht der Fall ist:

Beispiel 2:

Wie Sie aus Beispiel 2 sehen können, mit Ausnahme von Versionen unter IE8, wenn Elemente zu einem Array-ähnlichen Objekt durch Erzwingen hinzugefügt werden Durch die Verwendung von Array-Methoden wird auch die Länge der Objekteigenschaften berechnet. Es scheint, dass Versionen unter IE8 das Erzwingen der Verwendung von Array-Methoden zum Hinzufügen von Elementen zu Array-ähnlichen Objekten nicht unterstützen.
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'
Nach dem Login kopieren
Beispiel 3:

Dieses Beispiel fügt eine Initialisierungsoperation im myarr
-Konstruktor
in Beispiel 2 hinzu und fügt ein Element hinzu, wenn das Array-ähnliche Objekt initialisiert wird, und etwas Seltsames passiert:

Browser der Versionen unter IE8 unterstützen weiterhin nicht die erzwungene Verwendung von Array-Methoden. Dies wird im nächsten Beispiel besprochen. Bei anderen Browsern ist die Ausgabe des Längenattributs 3 und das Element mit Index 2 ist „xiaoc“. Offensichtlich ignoriert die js-Engine das Element „cc“ mit Index 0, das ursprünglich im Array-ähnlichen Objekt vorhanden war, vollständig! Schauen wir uns nun das nächste Beispiel an. Dieses Beispiel fügt eine zusätzliche Initialisierung zum Längenattribut basierend auf Beispiel 3 hinzu:
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
Nach dem Login kopieren

Es sind wieder seltsame Dinge passiert, dieses Mal werden alle Browser (einschließlich ie6 7) 4 korrekt ausgegeben , und das Element mit Index 2 wird korrekt als „lai“ ausgegeben. Es ist ersichtlich, dass die Array-Methode normal verwendet werden kann, nachdem IE 6 und 7 die Initialisierung des Längenattributs hinzugefügt haben.
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‘
Nach dem Login kopieren
Versuchen Sie nun, das Längenattribut auf einen unzulässigen Typ zu initialisieren:

Beispiel 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‘
Nach dem Login kopieren
Aus allen oben genannten Beispielen können wir schließen, dass bei Verwendung von Array-Methode (nehmen Sie hier Push als Beispiel), der Prozess sieht ungefähr so ​​aus:
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‘
Nach dem Login kopieren
IE6 7:

Es ist ersichtlich, dass IE6 7 die Verwendung der Array-Methode zum Hinzufügen von Elementen nicht erzwingt, dies jedoch tun wird Stellen Sie zunächst fest, ob das Längenattribut vorhanden ist. Wenn nicht, wird es ohne Operation zurückgegeben. Wenn das Längenattribut ein unzulässiger Wert ist, versuchen Sie, es in den Zahlentyp zu konvertieren. Wenn die Konvertierung fehlschlägt, wird die Länge auf 0 gesetzt. Dadurch kann die undefinierte Ausgabe in den Beispielen 2 und 3 und die korrekte Ausgabe in Beispiel 4 analysiert werden.

Andere Browser:
Andere Browser führen basierend auf dem Längenattribut unterschiedliche Vorgänge aus. Wenn das Längenattribut nicht vorhanden ist, setzen Sie die Länge auf 0. Wenn das Längenattribut ein unzulässiger Wert ist, versuchen Sie es zu konvertieren Wenn die Konvertierung fehlschlägt, wird die Länge ebenfalls auf 0 gesetzt.

Da das Längenattribut in Array-Methoden eine so entscheidende Rolle spielt, verbietet die js-Engine das Schreiben unzulässiger Werte in das Längenattribut:

Aus dem obigen Beispiel haben wir Wir kommen zu dem Schluss: Wenn wir Array-ähnliche Objekte verwenden, sollten wir den Wert des Längenattributs bei der Initialisierung des Array-ähnlichen Objekts initialisieren, um seltsame Probleme zu vermeiden, die durch verschiedene falsche Längenberechnungen verursacht werden aber nicht Legen Sie den Wert des Längenattributs fest. Bei Verwendung der Array-Methode ignoriert IE6 7 alle Vorgänge und andere Browser ignorieren die während der Initialisierung hinzugefügten Elemente.
var arr=['1','2','3']; 
arr.length='undefined';//报错invalid array length
Nach dem Login kopieren

Außerdem ein weiteres Problem, das durch das Längenattribut verursacht wird:
Siehe Beispiel 5:

Bei Verwendung des Prototyps
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‘
Nach dem Login kopieren
zum Erben des

-Arrays, IE 6 7Die Länge ist immer 0, egal wie viele Elemente Sie haben, andere Browser sind in Ordnung. Selbst wenn das Längenattribut zwangsweise festgelegt wird, ist es unter IE6 7 immer 0:

Daher kann gefolgert werden, dass, wenn der Objektprototyp unter IE6 7 ein Array erbt, die Länge Das Attribut ist immer 0. Wenn Sie also die Array-Methode verwenden müssen, verwenden Sie stattdessen die Array.prototype.xxx.apply(obj,[]); um den Wert des Längenattributs korrekt zu initialisieren.
function myarr(){} 
myarr.prototype=new Array(); 
var m=new myarr(); 
m.length=10; 
alert(m.length);//IE6 7:0 其他:10
Nach dem Login kopieren

Ermitteln Sie die Länge des

Object-Objekts

Alle JS-Programmierer (auch nicht nur JS) wissen, dass Arrays (Array) eine Länge haben, und durch das Längenattribut wissen Sie kann leicht und bequem die Länge eines Arrays ermitteln. Man kann sagen, dass, solange ein Array verwendet wird, auch dessen Längenattribut verwendet wird.

Das Object-Objekt hat kein Längenattribut oder eine Längenmethode. Es besteht eigentlich keine Notwendigkeit, dass es existiert, da sich die Leute nur darum kümmern, welche Methoden das Objekt bereitstellen kann, aber es besteht keine Notwendigkeit zu wissen, wie viele welche Methoden es hat. Dies ist in der Tat keine universelle Anforderung,

sodass ECMAScript sich selbst keine zusätzliche Belastung darstellt.

Ich habe dieses Problem noch nie in Betracht gezogen. Wir erhalten Daten einzeln über CGI, der Hintergrund erstellt sie in einem Array und gibt sie als JSON zurück. Wie unten gezeigt:

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

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

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

try{callback({     
data:{1:{a:1},2:{a:2}}    
 });  
}catch(e){}
Nach dem Login kopieren

面对这样的数据,我就犯愁了,因为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
Nach dem Login kopieren

至于为什么是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
Nach dem Login kopieren

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

Das obige ist der detaillierte Inhalt vonAusführliche Erklärung zur Verwendung des Längenattributs in jquery. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage