Explication détaillée de la façon d'utiliser l'attribut length dans jquery

Dans cet article, nous explorerons quelques secrets de l'attribut length en javascript via un tableau comme object. Exemple 1 :

Dans l'exemple ci-dessus, l'attribut length dans l'objet de type tableau n'est pas directement lié à la quantité de données qu'il stocke, qu'il s'agisse de l'attribut index (0, 1 ) ou l'attribut length existent en tant qu'attributs ordinaires de l'objet, et il n'y a aucune relation entre eux. Le moteur js ne calculera pas automatiquement la longueur de l'objet de type tableau en fonction de la quantité de données stockées.

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

Mais la longueur d'un objet de type tableau n'a-t-elle vraiment rien à voir avec la quantité de données stockées ? L'exemple 2 montre que ce n'est pas le cas :

Exemple 2 :

Comme vous pouvez le voir dans l'exemple 2, sauf pour les versions inférieures à IE8, lors de l'ajout d'éléments à un objet de type tableau en forçant l'utilisation de méthodes matricielles, la longueur des propriétés de l'objet sont également calculées. Il semble que les versions inférieures à IE8 ne prennent pas en charge l'utilisation forcée de méthodes de tableau pour ajouter des éléments à des objets de type tableau.

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'

Exemple 3 :

Cet exemple ajoute une opération d'initialisation dans le constructeur myarr

dans l'exemple 2, en ajoutant un élément lorsque l'objet de type tableau est initialisé et que quelque chose de bizarre se produit :

Les navigateurs des versions inférieures à IE8 continuent de ne pas prendre en charge l'utilisation forcée des méthodes de tableau. Cela sera discuté dans l'exemple suivant. Pour les autres navigateurs, la sortie de l'attribut length est 3 et l'élément avec l'index 2 est « xiaoc ». Évidemment, le moteur js ignore complètement l'élément « cc » avec l'index 0 qui existait à l'origine dans l'objet de type tableau ! Regardons maintenant l'exemple suivant. Cet exemple ajoute une initialisation supplémentaire à l'attribut length basée sur l'exemple 3 :

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

Des choses étranges se sont produites à nouveau, cette fois, tous les navigateurs (y compris ie6 7) 4 sont correctement affichés. , et l'élément avec l'index 2 est correctement affiché comme 'lai'. On peut voir qu'après que IE 6 et 7 ont ajouté l'initialisation de l'attribut length, la méthode array peut être utilisée normalement.

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‘

Essayez maintenant d'initialiser l'attribut length à un type illégal :

Exemple 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‘

De tous les exemples ci-dessus, nous pouvons déduire que lors de l'utilisation de méthode array (prenez push comme exemple ici), le processus est à peu près comme ceci :

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‘

IE6 7 :

On peut voir que IE6 7 ne force pas l'utilisation de la méthode array pour ajouter des éléments, mais cela le fera Déterminez d'abord si l'attribut length existe. Sinon, s'il existe, il sera renvoyé sans aucune opération. Si l'attribut length est une valeur illégale, essayez de le convertir en type numérique. Si la conversion échoue, la longueur est définie sur 0. Cela peut analyser la sortie non définie dans les exemples 2 et 3 et la sortie correcte dans l'exemple 4.

Autres navigateurs :
D'autres navigateurs effectueront différentes opérations en fonction de l'attribut de longueur. Si l'attribut de longueur n'existe pas, définissez la longueur sur 0. Si l'attribut de longueur est une valeur illégale, essayez de convertir au type de nombre, si la conversion échoue, la longueur est également définie sur 0.

Parce que l'attribut length joue un rôle si décisif dans les méthodes de tableau, le moteur js interdit d'écrire des valeurs illégales​​dans l'attribut length :

À partir de l'exemple ci-dessus, nous peut arriver à une conclusion : lorsque nous utilisons des objets de type tableau, afin d'éviter des problèmes étranges causés par divers calculs de longueur incorrects, nous devons initialiser la valeur de l'attribut length lors de l'initialisation de l'objet de type tableau si des éléments sont ajoutés lors de l'initialisation. mais pas Définir la valeur de l'attribut length. Lors de l'utilisation de la méthode array, IE6 7 ignorera toutes les opérations et les autres navigateurs ignoreront les éléments ajoutés lors de l'initialisation.

var arr=['1','2','3']; 
arr.length='undefined';//报错invalid array length

De plus, un autre problème causé par l'attribut length :
Veuillez voir l'exemple 5 :

Lors de l'utilisation du prototype

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‘

pour hériter du tableau

, IE 6 7La longueur sera toujours 0, peu importe le nombre d'éléments dont vous disposez, les autres navigateurs conviendront. Même si l'attribut length est défini de force, il sera toujours 0 sous IE6 7 :

On peut donc conclure que lorsque le prototype d'objet hérite d'un tableau sous IE6 7, la longueur l'attribut sera toujours 0, donc si l'objet de type tableau Si vous devez utiliser la méthode tableau, n'héritez pas du tableau. Utilisez plutôt la méthode Array.prototype.xxx.apply(obj,[]); pour initialiser correctement la valeur de l'attribut length.

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

Obtenir la longueur de l'objet

Object

Tous les programmeurs JS (même pas seulement JS) savent que les tableaux (Array) ont une longueur, et grâce à l'attribut length, vous peut facilement Obtenir commodément la longueur d'un tableau. On peut dire que tant qu'un tableau est utilisé, son attribut length sera utilisé.

L'objet Object n'a pas d'attribut ou de méthode de longueur. Il n'est vraiment pas nécessaire qu'il existe, car les gens se soucieront uniquement des méthodes que l'objet peut fournir, mais il n'est pas nécessaire de savoir combien. méthodes dont il dispose. En effet, ce n'est en effet pas une exigence universelle,

donc ECMAScript ne s'ajoutera pas de charge supplémentaire.

Je n'ai jamais envisagé ce problème auparavant. Nous obtenons les données via CGI pour les données une par une, l'arrière-plan en fait un tableau et les renvoie au format json. Comme indiqué ci-dessous :

 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的使用习惯。

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!