Maison > interface Web > js tutoriel > Problèmes et solutions causés par l'extension de Array.prototype.indexOf pour les connaissances JS_Basic

Problèmes et solutions causés par l'extension de Array.prototype.indexOf pour les connaissances JS_Basic

WBOY
Libérer: 2016-05-16 16:18:36
original
1274 Les gens l'ont consulté

Array n'a pas de méthode indexOf, il est donc difficile de trouver l'index d'un élément dans un tableau. Pour faciliter l'appel, Array.prototype.indexOf() est étendu via le prototype, ce qui le rend plus. pratique à utiliser. Mais il y avait un problème avec cet indexOf personnalisé lors du parcours du tableau.

Copier le code Le code est le suivant :

Array.prototype.indexOf = function(item) {
pour (var i = 0; i < this.length; i ) {
if (this[i] == élément)
reviens-moi;
}
renvoie -1 ;
>

Directement lors de l'utilisation de

Copier le code Le code est le suivant :

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

Après l'agrandissement, il est très confortable et pratique à utiliser, créant une scène harmonieuse...

Mais une fois, lors du parcours des éléments du tableau, une boucle for..in.. a été utilisée, ce qui a provoqué d'autres problèmes et brisé l'atmosphère harmonieuse.

Copier le code Le code est le suivant :
var a=["Zhang Fei","Guan Yu","Liu Bei","Lü Bu"]
pour(var p dans a){
document.write(p "=" a[p] "
"); >


Au départ, je voulais afficher les noms de ces quatre personnes, mais qu'est-ce qui a été affiché ?

Le résultat est en fait :

//0=Zhang Fei
//1=Guan Yu
//2=Liu Bei
//3=Lu Bu
//indexOf=function(item) { for (var i = 0; i < this.length; i ) { if (this[i] == item) return i; } return -1 }


En plus de taper le nom, il génère également sa propre méthode étendue indexOf. Mais ce qui est fou, c'est que Firefox est "normal" et n'a que les noms de quatre personnes. Pourquoi ?

Sortie indexOf, qui peut être développé par lui-même, ce qui est compréhensible. Après tout, for..in parcourt tous les attributs définis par l'utilisateur d'un objet ou tous les éléments d'un tableau.

Alors pourquoi pas Firefox ?

Je l'ai découvert plus tard après avoir vérifié les informations,

Array prend déjà en charge Array.indexOf() dans la version javascript 1.6, et le Firefox que j'utilise est la version 3.5, qui prend déjà en charge javascript 1.8, qui est une méthode inhérente à Array lui-même.

Quant à IE, même si j'utilise IE8, il ne prend en charge que la version 1.3 de JavaScript.

Ainsi, IE8 considère indexOf comme un "attribut défini par l'utilisateur", tandis que Firefox le considère comme un attribut inhérent pris en charge par lui-même de manière native.

Est-ce vraiment le cas ?

Faites une expérience, renommez indexOf en myIndexOf et réessayez. En conséquence, IE et Firefox génèrent myIndexOf, ce qui prouve que le point précédent est correct.

Ensuite, voici un autre problème. J'ai étendu indexOf depuis longtemps. Maintenant, de nombreux codes de projet utilisent déjà cette méthode, mais maintenant je dois utiliser for..in pour afficher les éléments du tableau lui-même. Je ne veux pas le prolonger moi-même. Que dois-je faire si j'arrive en Russie ?

Heureusement, javascript fournit la méthode hasOwnProperty.

Regardez sa description :

Chaque objet descendant de Object hérite de la méthode hasOwnProperty. Cette méthode peut être utilisée pour déterminer si un objet a la propriété spécifiée comme propriété directe de cet objet ; contrairement à l'opérateur in, cette méthode ne vérifie pas la chaîne de prototypes de l'objet
.

En regardant la description, c’est ce que nous voulons.

Portez simplement un jugement pour...dans.. et c'est OK

if(a.hasOwnProperty(p)){
                  document.write(p "=" a[p] "
");
>


De plus, voici un exemple d'utilisation de hasOwnProperty, provenant d'Internet :

Copier le code Le code est le suivant :

function Livre(titre, auteur) { 
   this.title = titre ; 
   this.author = auteur ; 
  } 
   Livre.prototype.prix = 9,99 ; 
   Objet.prototype.copyright = "herongyang.com" ; 
   var monBook = new Book("Tutoriels JavaScript", "Herong Yang"); 
   // Vidage des propriétés intégrées au niveau du prototype de base 
   document.writeln("Propriétés intégrées de nObject.prototype :"); 
   dumpProperty(Object.prototype, "constructeur"); 
   dumpProperty(Object.prototype, "hasOwnProperty"); 
   dumpProperty(Object.prototype, "isPrototypeOf"); 
   dumpProperty(Object.prototype, "toString"); 
   dumpProperty(Object.prototype, "valueOf"); 
   dumpProperty(Object.prototype, "copyright"); 
   // Vidage des propriétés intégrées au niveau de mon prototype 
   document.writeln("/n==================/propriétés intégrées de nBook.prototype :"); 
   dumpProperty(Book.prototype, "constructeur"); 
   dumpProperty(Book.prototype, "hasOwnProperty"); 
   dumpProperty(Book.prototype, "isPrototypeOf"); 
   dumpProperty(Book.prototype, "toString"); 
   dumpProperty(Book.prototype, "valueOf"); 
   dumpProperty(Book.prototype, "copyright"); 
   // Vidage des propriétés intégrées au niveau de l'objet 
   document.writeln("/n==================/propriétés intégrées de nmyBook :"); 
   dumpProperty(myBook, "constructeur"); 
   dumpProperty(monLivre, "hasOwnProperty"); 
   dumpProperty(monLivre, "isPrototypeOf"); 
   dumpProperty(monLivre, "toString"); 
   dumpProperty(monLivre, "valueOf"); 
   dumpProperty(monLivre, "copyright"); 
function dumpProperty(objet, propriété) { 
   héritage var;  
   if (object.hasOwnProperty(property))  
      héritage = "Local" ; 
   autre 
      héritage = "Hérité" ; 
   document.writeln(property ": " héritage ": "
      objet[propriété]); 
>

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

复制代码 代码如下 :

http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
http://www.w3.org/1999/xhtml"> Test de prise en charge de la version JavaScript du navigateur //document.write("Type de votre navigateur :" navigator.appName "
");
//document.write("Version du navigateur :" navigator.appVersion "
");
//Les navigateurs prenant en charge JavaScript1.0 peuvent exécuter ce script
Document.write('Ce navigateur prend en charge JavaScript1.0
');
// Seuls les navigateurs prenant en charge JavaScript1.1 peuvent exécuter ce script
Document.write('Ce navigateur prend en charge JavaScript1.1
');
// Seuls les navigateurs prenant en charge JavaScript1.2 peuvent exécuter ce script
Document.write('Ce navigateur prend en charge JavaScript1.2
');
//Les navigateurs prenant en charge JavaScript1.3 peuvent exécuter ce script
Document.write('Ce navigateur prend en charge JavaScript1.3
');
//Les navigateurs prenant en charge JavaScript1.4 peuvent exécuter ce script
Document.write('Ce navigateur prend en charge JavaScript1.4
');
//Les navigateurs prenant en charge JavaScript1.5 peuvent exécuter ce script
Document.write('Ce navigateur prend en charge JavaScript1.5
');
//Les navigateurs prenant en charge JavaScript1.6 peuvent exécuter ce script
Document.write('Ce navigateur prend en charge JavaScript1.6
');
//Les navigateurs prenant en charge JavaScript1.7 peuvent exécuter ce script
Document.write('Ce navigateur prend en charge JavaScript1.7
'
// Seuls les navigateurs prenant en charge JavaScript 1.8 peuvent exécuter ce script
Document.write('Ce navigateur prend en charge JavaScript1.8
');
//Les navigateurs prenant en charge JavaScript1.9 peuvent exécuter ce script
Document.write('Ce navigateur prend en charge JavaScript1.9
'



Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal