JavaScript détecte les valeurs d'origine, les valeurs de référence et les attributs

Dans JavaScript, nous voyons souvent du code comme celui-ci: une comparaison des variables à NULL (cette utilisation est très problématique), utilisée pour déterminer si une variable a une valeur raisonnable. Par exemple:

 var contrôleur = {process: function (items) {if (items! == null) {// Méthode d'écriture de mauvais élément.Sort (); items.ForEach (item) {// Exécuter une logique});}}}

Dans ce code, la méthode Process () s'attend évidemment à ce que les éléments soient un tableau, car nous voyons que les éléments ont Sort () et ForEach (). L'intention de ce code est très évidente: si les éléments des paramètres ne sont pas un numéro de groupe, la prochaine opération sera arrêtée. Le problème avec cette méthode d'écriture est que la comparaison avec NULL ne peut pas vraiment empêcher les erreurs. La valeur des éléments peut être 1, une chaîne ou même n'importe quel objet. Ces valeurs ne sont pas égales à NULL, ce qui entraînera à son tour une erreur lorsque la méthode Process () est exécutée pour Trie ().

La comparaison avec NULL seule ne fournit pas suffisamment d'informations pour déterminer si l'exécution de code ultérieure est vraiment sûre. Heureusement, JavaScript nous fournit de nombreuses façons de détecter la vraie valeur d'une variable.

Détecter la valeur d'origine

Il existe 5 types primitifs (également connus sous le nom de types de données simples) dans JavaScript: String, Number, Boolean, Undefined et Null. Si vous voulez qu'une valeur soit une chaîne, un numéro, un booléen ou un non-défini, la meilleure option consiste à utiliser l'opérateur de type, qui renvoie une chaîne représentant le type.

Pour les chaînes, le type de renvoie "String".

Pour les nombres, le type de renvoie "numéro".

Pour Boolean, le type de renvoie "booléen".

Pour un non-défini, le type de renvoie "Undefined".

La syntaxe de base du typeof est: TypeOf Variable, vous pouvez également utiliser le typeof (variable), bien qu'il s'agisse de la syntaxe JavaScript légale, ce qui fait ressembler à une fonction plutôt qu'à un opérateur. Compte tenu de cela, nous vous recommandons d'écrire sans supports.

L'utilisation de typeof pour détecter ces 4 types primitives est très sûr. Jetons un coup d'œil aux exemples suivants.

 // détecter "String" if (typeof name === "String") {autrement Name = name.SubString (3);} // détection "numéro" if (typeof count === "nombre") {updateCount (count);} //tect "booléen" if (typeof fondé === "Boolean" && trouver) {if ("trouvé!"); (typeof myApp === "Undefined") {myApp = {// autre code};}

L'opérateur Typeof est unique en ce qu'il ne rapportera pas d'erreur lorsqu'il est utilisé avec une variable non déclarée. Les variables et variables non définies avec une valeur non définie rendront toutes deux "non définies" via le typeof.

Le dernier type primitif null, via le typeof, renverra "objet", qui a l'air bizarre et est considéré comme un bug sérieux dans la spécification standard, donc lors de la programmation, vous devez empêcher l'utilisation du typeof pour détecter les types nuls.

 console.log (typeof null); // "objet"

Le simple fait de comparer NULL ne contient généralement pas suffisamment d'informations pour déterminer si le type de valeur est légal, donc NULL n'est généralement pas utilisé dans les instructions de détection.

Mais il y a une exception, si la valeur attendue est vraiment nul, vous pouvez comparer directement avec NULL. Par exemple:

 // Si vous avez besoin de détecter null, utilisez cette méthode var element = document.getElementById ("My-div"); if (élément! == NULL) {élément.classname = "Found";}

Si l'élément DOM n'existe pas, la valeur obtenue par document.getElementById () est nul. Cette méthode renvoie un nœud ou renvoie NULL. Étant donné que NULL est une sortie prévisible pour le moment, le résultat de retour peut être détecté en utilisant l'opérateur d'identité === ou l'opérateur de non-identité! ==.

En plus de la chaîne, du nombre, du booléen, des non définis et de l'objet mentionné ci-dessus, la valeur de retour de l'opérateur type a également une fonction. Du point de vue technique, les fonctions sont également des objets en JavaScript, pas des types de données. Cependant, les fonctions ont des propriétés spéciales, il est donc nécessaire de distinguer les fonctions des autres objets par l'opérateur de type. Cette fonction sera utilisée dans la fonction de détection plus tard.

Détecter les valeurs de référence

Dans JavaScript, à l'exception des valeurs d'origine, toutes les valeurs de référence (également appelées objets). Les types de référence couramment utilisés sont les suivants: objet, tableau, date et regexp. Ces types de référence sont des objets intégrés en JavaScript. L'opérateur TypeOf Renvoie "Objet" lors de la jugement de ces types de référence.

 console.log (typeof {}); // "objet" console.log (typeof []); // "objet" console.log (typeof new Date ()); // "objet" console.log (typeof new regexp ()); // "objet" console.log (typeof new regexp ()); // "objet"

La meilleure façon de détecter un type de valeur référencé est d'utiliser l'opérateur d'instance. La syntaxe de base de l'instance est:

 Valeur Instance de constructeur // Datect Date if (valeur instanceof date) {console.log (value.getlyear);} // détecter errorIF (valeur de valeur de l'erreur) {thord value;} // détecter une expression régulière if (valeur instanceof regexp) {if (value.test (un autrevalue)) {console.log ("correspond");}}

Une caractéristique intéressante de l'instance est qu'elle détecte non seulement le constructeur qui construit cet objet, mais détecte également la chaîne prototype. La chaîne prototype contient beaucoup d'informations, y compris le modèle d'héritage utilisé pour définir l'objet. Par exemple, par défaut, chaque objet hérite de l'objet, donc l'instance de valeur de l'objet de chaque objet renvoie. Par exemple:

 var now = new Date (); console.log (maintenant instanceOf objet); // natureconSole.log (maintenant instance de date); // L'opérateur NatureInstanceOf peut également détecter des types personnalisés, tels que: fonction de fonction (nom) {this.name = name;} var me = new personne ("Nicholas"); console.log (ME instanceOf objet); // le natureconsole.log (moi instance de personne); // la nature

Le type de personne est créé dans cet exemple de code. La variable moi est une instance de personne, donc moi l'instance de personne est vraie. Comme mentionné ci-dessus, tous les objets sont considérés comme des instances d'objet, donc ME instance Of objet est également une ture.

Lors de la détection de types intégrés et personnalisés en JavaScript, la meilleure façon de le faire est d'utiliser l'opérateur d'instance OFF, qui est la seule façon de le faire.

Mais il y a une sérieuse limitation. En supposant que les deux cadres de navigateur (cadres) ont une personne constructeur et que l'instance de personne frameapononInstance dans le cadre A est transmise dans le cadre B, les résultats suivants seront:

Console.log (FrameapersonInstance instance of Frameaperson) // ure

Console.log (FrameApersonInstance instanceof framebperson) // false

Bien que les définitions des deux personnes soient exactement les mêmes, elles sont considérées comme des types différents dans différents trames. Il existe deux types intégrés très importants qui ont également ce problème: le tableau et la fonction, donc les détecter généralement n'utilise pas d'instance.

Fonction de détection

Techniquement parlant, les fonctions dans JavaScript sont des types de référence, et il existe également un constructeur de fonction. Chaque fonction est un exemple, par exemple:

 fonction myfunc () {} // Bad Writing Method Console.log (Fonction MyFunc InstanceOf); // vrai

Cependant, cette méthode ne peut pas être utilisée sur les trames, car chaque trame a son propre constructeur de fonction. Heureusement, l'opérateur Typeof peut également être utilisé pour les fonctions, renvoyant la "fonction".

 fonction myfunc () {} // bonne méthode d'écriture console.log (typeof myfunc === "function"); // vrai

La meilleure façon de détecter une fonction consiste à utiliser le type de type car il peut être utilisé entre les trames.

Il y a une limitation à l'utilisation de typeof pour détecter les fonctions. Dans IE 8 et plus tôt, les navigateurs IE, le typeof est utilisé pour détecter que les fonctions dans les nœuds DOM renvoient "objet" au lieu de "fonction". Par exemple:

 // ieConsole.log (typeof document.CreateElement); // "objet" console.log (typeof document.getElementById); // "objet" console.log (typeof document.getElementByTagName); // "objet" console.log (typeof document.getElementByTagName); // "objet"

Ce phénomène étrange se produit car les navigateurs ont des différences dans la mise en œuvre de DOM. En bref, ces versions antérieures d'IE n'ont pas implémenté le DOM en tant que méthode JavaScript intégrée, ce qui a entraîné l'opérateur de type intégré identifiant ces fonctions comme des objets. Parce que le DOM est clairement défini, sachant qu'un membre d'objet existe signifie qu'il s'agit d'une méthode, les développeurs utilisent souvent l'opérateur in pour détecter les méthodes DOM, telles que:

 // détection de la méthode DOM if ("queySelectorall" dans le document) {var images = document.QuerySelectorall ("img");}

Ce code vérifie si QueySelectorall est défini dans le document et, dans l'affirmative, utilisez cette méthode. Bien que ce ne soit pas la méthode idéale, c'est le moyen le plus sûr de détecter si la méthode DOM existe dans IE 8 et les navigateurs antérieurs. Dans tous les autres cas, l'opérateur type est le meilleur choix pour détecter les fonctions JavaScript.

Détecter le tableau

L'un des problèmes de domaine croisé les plus anciens de JavaScript est de passer des tableaux entre les cadres. Le développeur a rapidement découvert que le tableau d'instruction ne peut pas renvoyer le résultat correct dans ce scénario. Comme mentionné ci-dessus, chaque trame a son propre constructeur de tableau, donc les instances dans un cadre ne seront pas reconnues dans un autre cadre.

Il y a eu beaucoup de recherches sur la façon de détecter les types de tableaux en JavaScript, et finalement Kangax a donné une solution élégante:

 fonction isArray (value) {return object.prototype.tostring.call (valeur) === "[Array d'objet]";}

Kangax a constaté que l'appel de la méthode TOSTRING () intégrée d'une valeur renvoie les résultats de la chaîne standard dans tous les navigateurs. Pour les tableaux, la chaîne renvoyée est "[Array d'objets]", et il n'est pas nécessaire de considérer la trame L'instance de tableau est construite. Cette méthode est souvent très utile lors de l'identification d'objets intégrés, mais veuillez ne pas utiliser cette méthode pour les objets personnalisés.

Ecmascript5 présente officiellement array.isArray () en javascript. Le seul but est de détecter avec précision si une valeur est un tableau. Comme les fonctions de Kangax, array.isArray () peut également détecter les valeurs transmises sur les trames, de sorte que de nombreuses bibliothèques de classe JavaScript implémentent actuellement cette méthode de manière similaire.

 fonction isArray (value) {if (typeof array.isArray === "fonction") {return array.isArray (valeur);} else {return object.prototype.tostring.call (valeur) === "[objet Array]";}}

IE 9+, Firefox 4+, Safari 5+, Opera 10.5+ et Chrome implémentent tous la méthode array.isArray ().

Détecter les propriétés

Un autre scénario où null (et indéfini) est lors de la détection si un attribut existe dans un objet, comme:

 // Bad Writing: Detect Faux Valeurs if (Object [PropertyName]) {// Quelque code} // Bad Writing: Comparez avec null if (objet [propriétéName]! = NULL) {// Quelque code} // Bad Writing: Comparez avec un non-défini if ​​(objet [propriétéName]! = Undefined) {// un code} Undefined if (objet [PropertyName]! = UNDEFINE

Chaque jugement du code ci-dessus vérifie en fait la valeur de l'attribut par le nom donné, plutôt que de juger si l'attribut mentionné par le nom donné existe. Dans le premier jugement, le résultat sera erroné lorsque la valeur de la propriété est une fausse valeur, telle que: 0, "" (chaîne vide), fausse, nul et indéfinie, après tout, ce sont les valeurs juridiques de la propriété.

La meilleure façon de déterminer si un attribut existe est d'utiliser l'opérateur in. L'opérateur in juge simplement si la propriété existe sans lire la valeur de la propriété. Si la propriété de l'objet d'instance existe ou hérite du prototype de l'objet, l'opérateur in rendra vrai. Par exemple:

 var objet = {count: 0, lié: null}; // bonne écriture if ("count" dans objet) {// le code ici sera exécuté} // mauvaise écriture: détecter les fausses valeurs if (objet ["count"]) {// Le code ici ne sera pas exécuté} // bonne écriture si ("lié" dans l'objet) {// le code ici sera exécuté} // BAD WRIDIN {// Le code ici ne sera pas exécuté}

Si vous souhaitez simplement vérifier si une certaine propriété de l'objet d'instance existe, utilisez la méthode HasownProperty (). Tous les objets JavaScript hérités de l'objet ont cette méthode. Si cette propriété existe dans l'instance, elle renvoie True (si cette propriété existe uniquement dans le prototype, elle renvoie False). Il convient de noter que dans IE 8 et les versions antérieures de IE, les objets DOM n'héritent pas de l'objet, donc cette méthode ne comprend pas. Autrement dit, vous devez vérifier si la méthode HasownProperty () de l'objet DOM existe avant de l'appeler.

 // C'est un bon moyen d'écrire si (object.hasownproperty ("lié")) {// Exécuter le code ici} // si vous n'êtes pas sûr s'il s'agit d'un objet DOM, alors écrivez if ("HasownProperty" dans Object && object.hasownproperty ("lié")) {// Exécuter le code ici}

Parce qu'il y a IE 8 et des versions antérieures de IE, lorsqu'ils jugent si les attributs de l'objet d'instance existent, je préfère utiliser l'opérateur in. HasownProperty () ne sera utilisé que lors de la jugement des propriétés d'instance.

Quelle que soit le moment où vous devez détecter l'existence d'une propriété, utilisez l'opérateur in ou HasownProperty (). Cela peut éviter de nombreux bogues.

Ce qui précède est la détection JavaScript des valeurs d'origine, des valeurs de référence et des attributs introduits par l'éditeur. J'espère que ce sera utile à tout le monde. Si vous avez des questions, veuillez me laisser un message et l'éditeur répondra à tout le monde à temps. Merci beaucoup pour votre soutien au site Web Wulin.com!