Résumé de notes JavaScript graphiques de 10 000 mots

Variable

• Une variable est uniquement définie mais aucune valeur initiale n'est affectée. La valeur par défaut est indéfinie.
• Lors de la définition d'une variable, vous devez écrire var (ne la définissez pas avec var, mais attribuez-lui directement la valeur, ce qui ne provoquera pas d'erreur. , mais entraînera des problèmes de portée).

Amélioration de la déclaration des variables

• Vous pouvez utiliser une variable déclarée plus tard à l'avance sans provoquer d'exception.
• Avant d'exécuter tout le code, js a une phase de pré-analyse et pré-lire les définitions de toutes les variables.
• Remarque : La promotion de la déclaration de variable ne favorise que la définition, mais pas la valeur

console.log (a); // Utilisez d'abord la variable var a = 12; // Ensuite, définissez le

type de données

• Number

  • Toutes

    • les parties numériques
    .
    • grand ou petit, qu'il soit entier ou flottant, et qu'il soit positif ou négatif. Ce sont tous
    des nombres plus ou moins grands de type
    • numérique
    • (la valeur absolue est plus petite). Il peut être écrit sous la forme de notation scientifique 3e8 3^8
    • la valeur binaire commence par 0b , l'octal commence par 0 et l'hexadécimal commence par 0x .
    • NaN , pas un nombre, c'est-à-dire "pas un nombre", mais c'est une valeur de type numérique (dans les opérations mathématiques, si le résultat ne peut pas être un nombre, le résultat est souvent NaN, NaN == NaN, le résultat est faux)
    • Infini Infini ou infinitésimal
  • Chaîne

    chaîne

    • méthodes courantes méthode

    fonction	charAt
    ()	obtient la position spécifiée le caractère (hors limites) est une chaîne vide)
    sous-chaîne ()	extrait la sous-chaîne
    substr()	extrait la chaîne
    slice()	extrait la sous-chaîne
    toUpperCase()	change la chaîne en majuscules
    toLowerCase()	change la chaîne en minuscules
    indexOf()	récupère la chaîne (correspondance de modèle)

    • substring(a, b) Le sous-chaîne commençant à a et se terminant à b, à l'exclusion de b ; si le deuxième paramètre est omis, la sous-chaîne renvoyée ira à la fin de la chaîne. Si a > b, elle sera automatiquement ajustée à une décimale devant
    • substr(a. , b), une sous-chaîne de longueur b commence à partir de a ; si le deuxième paramètre est omis, la sous-chaîne renvoyée ira à la fin de la chaîne ; a peut être un nombre négatif, indiquant la position réciproque
    • slice(a, b ) A. sous-chaîne commençant par a et se terminant par b, à l'exclusion de b ; les deux paramètres peuvent être négatifs ; a doit être inférieur à b, sinon il n'y aura aucun résultat (chaîne vide)

  • Booléen

  • Undéfini non

    • défini est à la fois une valeur et un type. une seule valeur propre :

  • Null.

    • Lorsque nous devons détruire des objets, détruire des tableaux ou supprimer des écouteurs d'événements, nous les définissons généralement sur null.

• Types de données complexes :

  • Object
  • Array
  • Function
  • RegExp
  • Date
  • Map
  • Set
  • ...

L'opérateur Typeof

peut être

utilisé pour détecter des valeurs ou des variables. Type

typeof 5; // numbertypeof 'niubi'; // chaîne

La conversion du type de données

utilise **Number ()**Function

// String --> Number Number('123'); // 123Number('123.4'); ('2e3'); / / 2000Number(''); // 0Number('1 + 1'); // NaN// Valeur booléenne --> Number(true); // 1Number(false); // non défini et null - -> Number Number(undefined); // NaNNumber(null); // 0

**parseInt()** la fonction convertit une chaîne en entier

et tronquera automatiquement tous les caractères après le premier non numérique caractère

parseInt('3.14 '); // 3parseInt('3.14 est pi'); // 3parseInt('Pi est 3.14'); // NaNparseInt('3.99')

; convertit la chaîne en nombres à virgule flottante

tronque automatiquement le premier caractère non numérique et tous les caractères après le point non décimal

parseFloat('3.14'); // 3.14parseFloat('3.14 is pi'); // 3.14parseFloat('Pi is 3.14'); / / NaNparseFloat('3.99'); // 3.99// convertira automatiquement true et false en chaînes, et le résultat est NaN

La fonction **String()**

devient une "même longueur"

chaîne. La notation scientifique et les nombres non décimaux seront convertis en valeurs décimales

String(123); // '123'String(123.4); // '123.4'String(2e3); // 'NaN'String(Infini); // 'Infinity'String(0xf); // '15'String(true); // 'true'String(false); // 'false'String(indéfini ); // 'undefined'String(null); // 'null'

**Boolean()** function

// Nombres --> Les valeurs booléennes 0 et NaN sont converties en false, et les autres sont converties en trueBoolean(123) ; // trueBoolean(0); // falseBoolean(NaN); // falseBoolean(Infinity); // trueBoolean(-Infinity); // true// La chaîne vide booléenne est convertie en false, et autre les valeurs sont converties en true ; Boolean(''); // falseBoolean('abc'); // trueBoolean('false'); // true// undefined et null --> La valeur booléenne est convertie en falseBoolean( undefined); // falseBoolean(null) ; //

la fonction false **prompt()** affiche la zone de saisie

var num = prompt('Veuillez entrer le premier nombre'); // La valeur de retour est une

expression de chaîne et

conversion de type implicite

de l'opérateur

s'il est impliqué dans des opérations mathématiques. Si un opérande n'est pas un type numérique, JavaScript convertira automatiquement l'opérande en un type numérique.

L'essence de la conversion implicite est d'appeler en interne la fonction Number()

3 * '4' //. 12true + true // 2false + 2 // 23 * '2 jours' //

La méthode NaN toFixed(a) conserve une décimale

Math.pow(2, 3) // 2^3Math.sqrt(81) // 9Math. ceil() // Arrondir Math.floor () //

Opérateur relationnel

=== // Tous égaux !== // Pas tous égaux // Deux signes égaux == L'opérateur ne compare pas le type de la valeur, il comparera la valeur après conversion implicite Est-ce égal ? 1 == true // true1===true // false0 == false // true0 === false // false0 == non défini // false0 === undefined // falseundefined == null // trueundefined == = null // false

La fonction **isNaN()** détermine si la valeur de la variable est NaN,

mais isNaN() n'est pas facile à utiliser. Son mécanisme est : tant que. le résultat de l'exécution de la variable passée dans Number() est NaN, alors la fonction isNaN( ) obtiendra une vraie

évaluation de court-circuit

a && ba est vrai, la valeur est b a est faux, la valeur est a

a||ba est vrai, la valeur est a, a est faux, la valeur est b

Priorité de l'opération logique : non--> et- -> Ou

séquence d'opérations complète : non--> Opération mathématique --> Opération relationnelle -->

Flux

instruction de contrôle

Fonction de nombre aléatoire Math.random()

formule

parseInt

(Math .random() * (b - a + 1)) + a;

A', 'B', 'C', 'D']; var arr = new Array('A', 'B ', 'C', 'D');var arr = new Array(4); de longueur 4, chaque élément est indéfini

Lorsque l'indice est accédé hors des limites, undefined est renvoyé

var arr = [2, 6, 7, 3 ];arr[6] = 4;console.log(arr); cette fois, l'indice est hors limites, aucune erreur ne sera signalée, mais le tableau sera développé, l'indice 6 est 4 et le milieu est vide

La méthode Array.isArray() peut être utilisée Pour détecter

la définition de la fonction

de

// fonction régulière fun() {
    //Instruction du corps de la fonction}//Fonction anonyme var fun = function () {
    // Instruction du corps de la fonction}

Promotion de la déclaration de fonction

fun(); function fun() { // Sera promu lors de l'étape de pré-analyse alert("La fonction est exécutée");}// Si la fonction est définie avec une fonction expression, il n'y a pas de fonctionnalité de promotion fun(); // une erreur est générée var fun = function () {
    alert("La fonction est exécutée");}

Promotion prioritaire de la fonction

// Promotion prioritaire de la fonction // Promotion après l'expression de la fonction ; promotion de la déclaration de variable, ne peut pas remplacer la fonction promue fun();
    alert('A');}fonction fun() {
    alert('B');}fun(); // Pop-up A.

Le nombre réel de paramètres formels est différent

1. du nombre de paramètres formels. Aucun
2. paramètre formel n'est reçu. est inférieur aux paramètres formels.Aucun paramètre réel n'est reçu.La valeur du paramètre formel est undefined

d'objet de tableau d'arguments

1. représentent la liste de paramètres réelle qu'il reçoit.C'est un
2. objet de type tableau : tous les attributs sont. des séquences de nombres naturels commençant à 0 et ayant un attribut de longueur et un tableau. De même, vous pouvez utiliser des crochets pour écrire des indices permettant d'accéder à une certaine valeur d'attribut d'un objet, mais vous ne pouvez pas appeler la méthode du tableau

. et l'omission

sont en dehors de la fonction. Les variables déclarées avec var sont des variables globales, et les variables déclarées sans var sont des variables globales

dans la fonction, les variables déclarées avec var sont des variables locales, les variables déclarées sans var sont des variables globales

, les deux sont des variables globales. , et les deux sont l'un des attributs de l'objet window. Les variables déclarées avec var ne peuvent pas être supprimées, et les variables déclarées sans var peuvent être supprimées !

de valeur de retour

sum(a, b) {
    

b

;}var result = sum(3, 5); // La valeur de retour peut être reçue par une variable.

Si la fonction ne renvoie pas de valeur, le résultat imprimé dessus est indéfini.

) méthode

a dans cette fonction, b représente respectivement les éléments avant et arrière du tableau S'ils doivent être échangés, tout nombre positif est renvoyé sinon, un nombre négatif est renvoyé

var arr = [33, 22, 11, 55]; arr.sort(fonction ( a, b) {
    si (a > b) {
        renvoyer 1 ;
    }
    return -1;});

Affectation de variables

clone profond

var arr1. = [1, 2, 3, [4, 5]]; fonction deepClone( arr) {
    var résultat = [];
    pour (var i = 0; i < arr.length; i++) {
        si (Array.isArray(arr[i])) {
            result.push(deepClone(arr[i]));
        } autre {
            result.push(arr[i]);
        }
    }
    return result;}

Une fonction locale

définie à l'intérieur d'une fonction est une fonction locale et

ne peut être appelée qu'à l'intérieur de la fonction

fun() {
    fonction interne() {
        console.log('Bonjour');
    }
    inner(); // Appeler la fonction interne} fun();

Scope chain

Dans l'imbrication de fonctions, la variable recherchera sa définition couche par couche de l'intérieur vers l'extérieur

var a = 10; var b = 20; () {
    var c = 30 ;
    fonction interne() {
        var a = 40 ;
        vard = 50 ;
        console.log(a, b, c, d); // Lors de l'utilisation de variables, js partira de la couche actuelle et recherchera les définitions couche par couche}
    inner();}fun();

Closure

Closure est une combinaison de la fonction elle-même et de l'état de l'environnement dans lequel la fonction a été déclarée.

La fonction peut "se souvenir" de l'environnement dans lequel elle a été définie, même si la fonction n'y est pas. l'environnement dans lequel il a été défini. Lorsqu'il est appelé, vous pouvez également accéder aux variables de l'environnement dans lequel il a été défini.

En js, une fermeture est créée à chaque fois qu'une fonction est créée, mais la fonctionnalité de fermeture nécessite souvent que la fonction soit créée. exécuté "à un endroit différent" afin de pouvoir observer

la fonction de la fermeture. :

1. Mémoire : Lorsqu'une fermeture est générée, l'état de l'environnement où se trouve la fonction sera toujours conservé en mémoire et ne sera pas automatiquement effacé après l’appel de la fonction externe.

   fonction amusante() {
       nom var = 'niubi';
       fonction innerFun() {
           alerte(nom);
       }
       return innerFun;}var inn = fun();inn(); // La fonction interne a été déplacée vers l'exécution externe

2. pour simuler la variable privée

   function fun() {
       var a = 0 ;
       fonction de retour() {
           alerte(a);
       }}var getA = fun();getA();

function fun() {
    var a = 0 ;
    retour {
        getA : fonction () {
            renvoyer un ;
        },
        ajouter : fonction () {
            un++;
        }, 
        pow : fonction () {
            une *= 2 ;
        }
    };}var obj = fun();console.log(obj.getA());obj.add();

Remarque : les fermetures ne peuvent pas être utilisées de manière abusive, sinon cela entraînerait des problèmes de performances sur la page Web et, dans des cas graves, pourrait conduire à des fuites de mémoire.

Appelez immédiatement la fonction IIFE

méthode d'écriture spéciale.Une fois définie, la

fonction immédiatement appelée doit être convertie en expression de fonction avant de pouvoir être appelée

(function () { // Transformer la fonction en expression via des parenthèses // instructions})() ;+ fonction() {
    alerte(1);}();-function() {
    alert(1);}();

1. peut être utilisé pour attribuer des valeurs aux variables

   var age = 12; var sex = 'Male'; var title = (function () {
       si (âge < 18) {
           renvoyer « enfants » ;
       } autre {
           si (sexe == 'mâle') {
               retournez « M. » ;
           } autre {
               renvoyer « Ms » ;
           }
       

(

1. comme

2. dans une boucle for), les variables globales sont transformées en variables locales et la syntaxe est plus compacte.

je++) {
    arr.push(fonction () {
        alerte(i);     
    });}arr[2](); //

Solution contextuelle 5 :

var arr = [];for (var i = 0; i < 5; i++) {
    (fonction (i) {
        arr.push(fonction() {
            alerte(i);
        });
    })(i);}arr[2](); // Pop-up 2

DOM

nodeType valeur d'attribut commun

nœud nodeType l'attribut peut afficher le type spécifique de ce nœud

L'objet document

accède au nœud d'élément en s'appuyant principalement sur l'objet document.

Presque toutes les fonctions DOM sont encapsulées dans l'objet document.

L'objet document représente également l'intégralité du document HTML. arbre de nœuds.

Méthodes

document.getElementById()

S'il y a des éléments avec le même identifiant sur la page, vous ne pouvez obtenir que le premier

<p id = "box ">Je suis une boîte</p><p id = "para">Je suis un paragraphe</p>

var box = document.getElementById('box'); var para = document.getElementById('para');

Le tableau getElementsByTagName()

est pratique pour le parcours, de sorte que les nœuds d'éléments peuvent être manipulés par lots

même s'il n'y a qu'un seul nom de balise spécifié sur la page Node, vous obtiendrez également un tableau d'une longueur de 1.

Tout élément de nœud peut également appelez la méthode getElementsByTagName() pour obtenir le nœud d'élément d'une certaine classe à l'intérieur

<p>Paragraphe</p> <p>Paragraphe</p> <p>Paragraphe</p><p>Paragraphe</p>

var ps = document.getElementsByTagName('p');

getElementsByClassName()

<p class ="spec">Boîte</p><p class ="spec ">Boîte</p><p class = "spec">Boîte< /p><p class = "spec">Box</p>

var spec_ps = document.getElementsByClassName('spec');

querySelector()

cette méthode Vous ne pouvez obtenir qu'un seul élément sur la page s'il y a plusieurs éléments qui se rencontrent. les conditions, vous ne pouvez obtenir que le premier élément

<p id = "box1">
    <p>Paragraphe</p>
    <p class = "spec">Paragraphe</p>
    <p>Paragraphe</p>
    <p>Paragraphe</p></p>

var the_p = document.querySelector('#box1 .spec');

querySelectAll()

tableau

de longueur 1 même s'il n'y a qu'un seul nœud sur la page qui correspond au sélecteur.

Pour exécuter,

utilisez l'événement window.onload = function() {} (ajoutez un écouteur d'événement à l'objet window, onload indique que la page a été chargée), de sorte qu'une fois la page chargée, le code spécifié soit exécuté

.

La

Les nœuds de texte appartiennent également aux nœuds, nous excluons donc généralement l'interférence des nœuds de texte (en utilisant uniquement les nœuds d'éléments)

pour écrire des fonctions de relation de nœud communes

<body>
    <pid = "box1">
        <p>Paragraphe</p>
        <p class = "spec">Paragraphe</p>
        <p>Paragraphe</p>
        <p>Paragraphe</p>
	</p>
    <script>
        var box = document.getElementById('box1');
        var spec = document.getElementsByClassName('spec');
        // Encapsuler une fonction qui renvoie tous les nœuds d'élément enfant de l'élément, similaire à la fonction enfant getChildren(node) {
            var enfants = [];
            // Parcourez tous les nœuds enfants du nœud et déterminez si l'attribut nodeType de chaque octet est 1
            // S'il vaut 1, poussez le tableau de résultats pour (var i = 0; i < node.childNodes.length; i++) {
                if (node.childNodes[i] == 1) {
                    enfants.push(node.childNodes[i]);
                }
            }
            rendre les enfants ;
        }
       
        // Encapsuler une fonction qui peut renvoyer le nœud frère de l'élément précédent, similaire à la fonction previousElementSibling getElementPrevSibling(node) {
            var o = nœud ;
            while (o.previousSibling != null) {
                si (o.prebiousSibling.nodeType == 1) {
                    // Termine la boucle et trouve return o.previousSibling;
                }
                o = o.previousSibling;
            }
            renvoie null ;
        }
        
        // Encapsuler une fonction qui peut renvoyer tous les nœuds frères et sœurs de l'élément function getAllElementSibling(node) {
            var prév = [];
            var prochains = [];
            var o = nœud ;
            while (o.previousSibling != null) {
                if (o.previousSibling.nodeType == 1) {
                    prevs.unshift(o.previousSibling);
                }
                o = o.previousSibling;
            }
            o = nœud ;
            while (o.nextSibling != null) {
                si (o.nextSibling.nodeType == 1) {
                    nexts.push(o.nextSibling);
                }
                o = o.nextSibling;
            }
            return prevs.concat(nexts);
        }
    </script></body>

Modifier le contenu du nœud d'élément.

Vous pouvez utiliser deux attributs liés pour modifier le contenu du nœud d'élément.

• innerHTML

  peut

• définir

  le contenu du nœud dans la syntaxe HTML.

• le nœud sous forme de texte brut

<body>

    <p id = "boîte"></p>
    <script>
        var oBox = document.getElementById('box');
        oBox.innerHTML = '<ul><li>Lait</li><li>Café</li></ul>'; // Peut analyser la syntaxe HTML // oBox.innerText = 'niub' // Peut uniquement; être du texte brut</script></body>

Changer le style CSS d'un nœud d'élément

équivaut à définir l'attribut de style en ligne

oBox.style.backgroundColor = 'red'; // Les attributs CSS doivent être écrits en cas de chameau oBox.style .backgroundImage = ' url(images/1.jpg)';oBox.style.fontSize = '32px';

Remplacez les

attributs HTML des nœuds d'éléments par des attributs standard du W3C, tels que src, href, etc., cliquez simplement directement pour créer changes

oImg.src = 'images/2.jpg';

Pour les attributs qui ne sont pas conformes aux normes du W3C, utilisez setAttribute() et getAttribute() pour définir et lire

<body>
    <p id = "boîte"></p>
    <script>
        var box = document.getElementById('box');
        box.setAttribute('data-n', 10); // Ajout d'un attribut data-n avec une valeur de 10
        var n = box.getAttribute('date-n');
        alerte(n);
    </script></body>

La méthode document.createElement()

de création de nœud

var op = document.createElement('p');

Le nœud nouvellement créé est un "nœud orphelin", et Il n'est pas monté sur l'arborescence DOM et n'est pas visible. Vous

devez continuer à utiliser la méthode appendChild() ou insertBefore() pour insérer le nœud orphelin dans l'arborescence DOM.

Tout nœud déjà présent dans l'arborescence DOM peut appeler le nœud orphelin. appendChild(), qui peut monter le nœud orphelin à l'intérieur et devenir son dernier nœud enfant

parent node.appendChild (nœud orphelin) ;

tout nœud déjà présent dans l'arborescence DOM peut appeler la méthode insertBefore(), qui peut monter l'orphelin. node Allez à l'intérieur et devenez le nœud parent du nœud avant son "nœud enfant de référence"

.insertBefore (nœud orphelin, nœud de référence);

le nœud mobile

fait en sorte que le nœud qui a été monté sur l'arborescence DOM devienne appendChild() ou insertBefore () Paramètres, ce nœud sera déplacé vers

le nouveau nœud parent.appendChild (nœud qui a déjà un parent); nouveau nœud parent.insertBefore (nœud qui a déjà un nœud enfant de référence // Cela signifie); qu'un nœud ne peut pas être localisé dans l'arborescence DOM en même temps. 
Supprimez les nœuds
 à deux emplacements.

nœud parent

du DOM.removeChild

nœud

cloneNode()

La méthode peut cloner le nœud. Le nœud cloné est un « nœud orphelin ».

Le paramètre est booléen, indiquant s'il faut utiliser le clonage profond. Si c'est vrai, tous les nœuds descendants du nœud seront également clonés. lui-même sera cloné.

var orphan node = old node.cloneNode(); var orphan node = old Node.cloneNode(true);

événement

• commun de surveillance des événements de souris

onmouseenter ne fait pas de bulle, onmouseover bouillonne,

• événement de clavier commun,

• d'écoute d'événement de forme commune

• écouteurs d'événements de page communs

lorsque la case Ordre d'exécution de l'événement à l'écoute lorsqu'il est imbriqué

<p id = "box1">
    <pid = "box2">
        <p id = "box3"></p>
    </p></p><script>
    var oBox1 = document.getElementById('box1');
    var oBox2 = document.getElementById('box2');
    var oBox3 = document.getElementById('box3');
    
    oBox1.onclick = fonction () {
        console.log('box1');
    } ;
    
    oBox2.onclick = fonction () {
        console.log('box2');
    } ;
    
    oBox3.onclick = fonction () {
        console.log('box3');
    } ;
    // Cliquez sur la case la plus à l'intérieur, la direction de propagation est de l'intérieur vers l'extérieur</script>

Propagation de l'événement

La propagation des événements s'effectue : d'abord de l'extérieur vers l'intérieur, puis de l'intérieur vers l'extérieur (la couche la plus interne n'est pas d'abord capturée puis bullée, mais est déterminée en fonction de l'ordre d'écriture du code. Boîtes du même nom sont liés à la même étape et au même ordre. Si le même élément est défini. S'il y a deux événements ou plus portant le même nom, celui écrit plus tard dans le niveau DOM0 écrasera celui écrit en premier et le niveau DOM2 sera exécuté dans l'ordre.

onxxxx (surveillance des événements au niveau DOM0) ne peut surveiller que la phase de bouillonnement, les résultats observés sont donc de l'intérieur vers l'extérieur

de la méthode addEventListener() (surveillance des événements DOM niveau 2)

oBox.addEventListener('click', function() {
 // Voici la fonction de traitement des événements}, true); // Si le troisième paramètre est vrai, il écoutera la phase de capture. S'il est faux, il écoutera la phase de bouillonnement

fournie par la fonction de traitement des événements

de l'objet événement

un paramètre formel, qui est un objet qui encapsule les détails de cet événement.

Ce paramètre est généralement représenté par le mot événement ou la lettre e

oBox.onmousemove = function (e) {
 //L'objet e est "l'objet événement" de cet événement};

Attributs liés à l'objet

• Attributs liés à la position de la souris

Attributs de la position de la souris lorsque cet événement est déclenché Attribut

• Attributs e .charCode et e.keyCode

L'attribut e.charCode est généralement utilisé dans l'événement onkeypress pour représenter le "code de caractère" du caractère saisi par l'utilisateur .

9 48 ~ 57 lettre majuscule A ~ Z 65 ~ 90 lettre minuscule a ~ z 97 ~ 122

Numéro	de
code	de
caractère	0
~	chiffre

L'attribut e.keyCode est généralement utilisé dans les événements onkeydown et onkeyup pour représenter le "code clé" de la touche enfoncée. par l'utilisateur.

Numéro 40

de code	de touche
0 ~ chiffre 9	48 ~ 57
partie de lettre majuscule et minuscule a ~ z	65 ~ 90
Quatre touches de direction ← ↑ → ↓	37, 38, 39,
Touche Entrée	13
Touche Espace	32

Empêcher l'événement par défaut

e. La méthode .preventDefault() est utilisée pour empêcher "l'action par défaut" générée par l'événement.

La méthode e.stopPropagation() est utilisée pour empêcher les événements de continuer à se propager

. Ajout par lots de problèmes de performances d'écoute d'événements.

• Chaque enregistrement d'événement consomme une certaine quantité. mémoire système. L'ajout d'événements par lots entraînera un trop grand nombre de moniteurs et une consommation de mémoire importante.

,

et l'ajout d'événements par lots entraînera un trop grand nombre d'écouteurs et une grande quantité. consommation de mémoire (lorsqu'un grand nombre d'éléments similaires doivent être ajoutés par lots, la délégation d'événements peut réduire la surcharge de mémoire. Utilisez

le mécanisme de bouillonnement d'événements pour déléguer les événements des éléments descendants à Remarque pour les éléments ancêtres

: Vous ne pouvez pas déléguer des éléments non-

).

Événements bouillonnants vers les éléments ancêtres.

Lorsqu'un noeud d'élément dynamique est ajouté à l'arborescence, la délégation d'événements peut être utilisée pour que les éléments nouvellement ajoutés à l'arborescence aient

liés

La

fonction timer setInterval() peut appeler une fonction à plusieurs reprises, avec un intervalle fixe entre chaque appel

setInterval(function () {
    // Cette fonction sera automatiquement appelée à intervalle fixe}, 2000); // Le deuxième paramètre est l'intervalle, en millisecondes // Cette fonction peut recevoir les 3ème, 4ème... paramètres, et ils seront passés dans l'ordre Entrez la fonction setInterval(function (a, b) {
    // La valeur du paramètre formel a est 88 et la valeur du paramètre formel b est 66}, 2000, 88, 66); // À partir du troisième paramètre, il représente les paramètres passés dans la fonction // Les fonctions nommées peuvent également être passé dans setIntervalvar a = 0; function fun() {
    console.log(++a);};setInterval(fun, 1000);

Effacer le timer

La fonction clearInterval() peut effacer un timer

// Définir le timer et utiliser la variable timer pour recevoir le timer var timer = setInterval(function ( ) {
    }, 2000);//Lorsque vous cliquez sur le bouton, effacez le minuteur oBtn.onclick = function () {
    clearInterval(timer);

La fonction delayer

(

) peut définir un retardateur Lorsque le temps spécifié est écoulé, la fonction sera exécutée une fois et ne sera pas exécutée à plusieurs reprises.

    // Cette fonction sera exécutée une fois après 2 secondes}, 2000); clearTimeout(timer); // Efface le retardateur

de manière asynchrone

 : cela ne bloquera pas le CPU pour continuer à exécuter d'autres instructions lorsque l'exécution asynchrone est terminée, la "fonction de rappel. " sera exécuté. (rappel)

setInterval() et setTimeout() sont deux instructions asynchrones

setTimeout(function () {
    console.log('A');}, 2000); // Instruction asynchrone console.log('B'); // L'instruction asynchrone ne bloquera pas l'exécution normale du programme // L'exécution de

la fonction BA ralentit

l'exécution de une fonction une fois Enfin, la deuxième exécution n'est autorisée qu'une fois que le cycle d'exécution est supérieur à la période d'exécution définie

var lock = true function function qui nécessite une limitation () {;
    // Si le verrou est fermé, alors if(!lock) ne sera pas exécuté return;
    // Instruction principale de la fonction // Lock lock = false;
    
    //Ouvre le verrou après le nombre de millisecondes spécifié setTimeout(function () {
        verrouiller = vrai ;
    }, 2000);}

BOM

BOM (Browser Object Model, modèle d'objet de navigateur) est l'interface permettant à JS d'interagir avec la fenêtre du navigateur.

objet

est la fenêtre dans laquelle le script js actuel est exécuté, et cette fenêtre contient le DOM. structure, window La propriété .document est l'objet document.

Dans les navigateurs dotés de fonctionnalités d'onglet, chaque onglet a son propre objet fenêtre ; c'est-à-dire que les onglets de la même fenêtre ne partageront pas un objet fenêtre.

1. Les variables globales deviendront des objets fenêtre.

   var a = 10; console.log(window.a == a); // true

   Cela signifie que plusieurs fichiers js partagent la portée globale, c'est-à-dire que les fichiers js n'ont pas de fonction d'isolation de portée

2. sont généralement celles de Windows

.

3. les méthodes

   telles que setInterval(), alert() et d'autres fonctions intégrées sont généralement des méthodes de fenêtre

Propriétés liées à la taille de la fenêtre

(

Événement resize

dans la fenêtre Après les changements de taille, l'événement resize sera déclenché. Vous pouvez utiliser window.onresize ou window.addEventListener('resize') pour lier le gestionnaire d'événement.

de hauteur de défilement

représente la valeur en pixels de.

document.documentElement qui a été défilé dans le sens vertical. La propriété .scrollTop représente également la hauteur de défilement de la fenêtre

.

Pour une meilleure compatibilité avec le navigateur, les deux sont généralement écrits ensemble

var scrollTop = window.scrollY ||

documentElement.scrollTop n'est pas en lecture seule et window .scrollY est un

événement de défilement en lecture seule.

Une fois la fenêtre défilée, l'événement de défilement sera déclenché. Vous pouvez utiliser window.onscroll ou window.addEventListener('scroll') pour. lier la fonction de gestionnaire d'événements

Navigator objet.

La propriété window.navigator peut récupérer l'objet navigateur, qui contient les attributs pertinents et les

l'objet History

L'objet .history fournit une interface pour exploiter l'historique des sessions du navigateur.

Une opération courante consiste à simuler le bouton Précédent

du navigateur history.back(); history.go(-1); // Equivalent à In history.back();

l'objet Location

window.location identifie l'URL actuelle. Vous pouvez commander au navigateur d'accéder à la page en attribuant une valeur à cet attribut

window.location. = 'http://www.baidu.com';window.location. href = 'http://www.baidu.com';

• Pour recharger la page actuelle,

  vous pouvez appeler la méthode de rechargement de location pour recharger la page actuelle.

paramètre

True

• signifie

  que

• Window.Location

  .

De cet élément à l'élément

d'

ancêtre

positionné

.

Une collection de «paires de valeurs clés», qui représentent la relation de mappage entre les attributs et les valeurs

.
    Nom: «Xiao Ming»,
    Âge: 12 ans,
    Sexe: «homme»,
    

• Hobbies

• :

'

, «Programmation»]};

• Le nom d'attribut ne se conforme pas à

• la

  convention

de dénomination de l'identification JS, vous devez utiliser les crochets pour accéder.

•     A: 1,
      B: 2,
      C: 3}; var key = 'b'; console.log (obj.key

)

;
    A: 10}; obj.b

=

40

;

    A: 1,
    

}

;

obj.a

;

    Nom: «Xiao Ming»,
    Âge: 12 ans,
    Sexe: «homme»,
    Hobbies: [«football», «natation», «programmation»],
    «Favoris-Book»: «Shuke and Beta»,
    sayhello: function () {
        Console.log ('Hello');
    

}

}

;

​

    console.log ('la valeur de' attribut '+ k +' est '+ obj [k]);}

clone profond de l'objet

var obj1 = {
    A: 1, 
    B: 2, 
    c: [33, 44, {
        M: 55,
        N: 66,
        P: [77, 88]
    }]}; fonction DeepClone (o) {
    if (array.isArray (o)) {
        var result = [];
        pour (var i = 0; i <o.length; i ++) {
            result.push (deepclone (o [i]));
        }
    } else if (typeof o == 'objet') {
        var result = {};
        pour (var k dans o) {
            résultat [k] = deepclone (o [k]);
        }
    } autre {
        var résultat = o;
    }
    Retour Résultat;}

fonction

de contexte

de la fonction

.

La

fonction

est

)

;

​
    alert (this.c + this.m + this.e + b1 + b2);} sum.call (xiaoMing, 5, 3); 3];

(

1. Ceci
2. )

3. pointera
   

   vers cet objet.

/ {} Cela pointe vers cet objet vide this.a = 3;
    this.b = 5; // {a: 3, b: 5}
    // Ajouter automatiquement Retour;} var obj = new fun (); console.log (

obj

)

;

    this.name = nom ;
    this.age = âge;
    this.sex = sexe;} var xiaoMing = new People ('小明', 12, 'masculin'); var xiaoMing = new People ('小红', 10, 'femelle'); var xiaogang = news de personnes ('小红 红 红 gang ', «mâle»

• )
• ; Construisez un nouvel objet ", les instructions à l'intérieur ajouteront plusieurs propriétés et méthodes au nouvel objet, compléteront l'initialisation de l'objet

et ajoutera la

fonction de méthode des gens (nom, âge, sexe) {
    this.name = nom ;
    this.age = âge;
    this.sex = sexe;
    this.sayhello = function () {
        console.log ('je suis' + this.name);
    

=

New People (xiaoMing ', «Male»); xiaoMing.SayHello ()

; Il est par défaut, l'attribut de constructeur repose sur la fonction

Le prototype du constructeur est le prototype de l'instance

de recherche de chaîne prototype

aux

méthodes de son prototype.

    this.name = nom ;
    this.age = âge;
    this.sex = sexe;} peuple.prototype.nationalité = 'Chine'; (xiaoMing. Nationalité);

HasownProperty ()

Cette méthode peut vérifier si l'objet "possède vraiment" une certaine propriété ou méthode

XiaoMing.Hasownproperty ('name');

(

nationalité

»

);

/ true'age 'dans xiaoMing // true'sex' dans xiaoMing // true'nationality 'dans xiaoMing // true

ajouter des méthodes sur le prototype

d'inconvénients de l'ajout de méthodes directement aux instances: chaque instance et la fonction de méthode de chaque instance sont une mémoire différente Les fonctions dans la méthode provoquent un gaspillage de mémoire, qui peut être résolu en écrivant la méthode sur le prototype.

fonction des gens (nom, âge, sexe) {
    this.name = nom ;
    this.age = âge;
    this.sex = sexe;} peuple.prototype.sayhello = function () {
    console.log ('je suis' + this.name);}; var XiaoMing = New People ('XiaoMing', 12, 'Male'); XiaoMing.SayHello ()

;

chaîne prototype de tableau

L'héritage

1. est mis en œuvre à l'aide de la chaîne prototype,

permettant à l'attribut prototype de l'élève pointer de l'instance de la classe parent, puis ajoutant la méthode de l'élève au prototype de l'élève.

• l'
• héritage

à travers la chaîne prototype.

• de nombreux attributs définis par la superclasse.

-à-dire que

2. le constructeur

• de la sous-classe n'est pas suffisamment écrit.

généralement

utilisé

.
    this.name = nom ;
    this.sex = sexe;
    this.age = âge;
    this.arr = [1, 2, 3];} fonction étudiant (nom, sexe, âge, école, sid) {
    People.Call (ceci, nom, sexe, âge);
    this.school = école ';
    

New

3. 12

, «école», 123456);

L' héritage

.

​

Le prototype hérite

de la méthode objet.create (), qui peut créer un nouvel objet basé sur l'objet spécifié comme prototype (ie9)

var obj2 = objet.Create (obj1); , {// Non.
    } // Vous pouvez masquer les propriétés avec le même nom sur le prototype});

Lorsqu'il n'est pas nécessaire de "dépenser beaucoup d'efforts" pour créer un constructeur, mais que vous voulez juste que le nouvel objet soit "similaire" à l'objet existant, vous pouvez utiliser Object.Create (), qui est appelé la compatibilité de Prototypal héritage

object.create () La méthode d'écriture unique

implémente object.create () dans les navigateurs de version inférieure

// une fonction écrite par Douglas Crockford // La fonction de fonction consiste à utiliser O comme prototype pour créer un nouvel objet de fonction d'objet (o ) {
    // Créer une fonction de constructeur temporaire f () {}
    // Laissez le prototype de ce constructeur temporaire pointer vers O, de sorte que le nouvel objet qu'il crée, __proto__ pointe vers O
    F.prototype = o;
    Renvoie un nouveau F ();}

un héritage parasite

, qui peut "améliorer l'objet". attribuer de nouveaux objets au nouvel objet

.
    var p = object.create (o);
    p.display = function () {
        console.log (111);
    }
    Retour P;}

Inconvénients:

l'

réduite

en raison de l'incapacité de réutiliser les fonctions (les méthodes ne sont pas écrites sur le prototype)

.

, supertype) {
    var prototype = object.create (supertype.prototype);
    sous-type.prototype = prototype;
}

// la classe parent fonctionne les gens (nom, sexe, âge) {
    this.name = nom ;
    this.sex = sexe;
    this.age = âge;
}

People.prototype.sayhello = function () {
    console.log ("bonjour");
}
People.prototype.Sleep = function () {
    console.log ("sommeil");
}

// Fonction de sous-classe Étudiant (nom, sexe, âge, école, sid) {
    People.Call (ceci, nom, sexe, âge);
    this.school = école;
    this.sid = sid;
}

INHÉRIGEMENTS (Étudiant, personnes);
    console.log ("examen");
} ;

var XiaoMing = New Student ('Xiao Ming', 'Male', 12, 'School', 123456);

L'opérateur d'instance

est utilisé pour détecter "si un objet est une instance d'une certaine classe"

XiaoMing instance of Student // Le mécanisme sous-jacent: vérifiez si l'attribut Student.prototype est sur la chaîne prototype de XiaoMing (combien de niveaux sont corrects, tant que longtemps que

Il

s'agit)

du constructeur intégré

JavaScript a de nombreux constructeurs intégrés.

. Toutes les méthodes de ce type sont définies dans son constructeur intégré.

La relation entre les constructeurs intégrés:

Object.Protype est le point final de la chaîne prototype de toutes choses.

Toute fonction peut être considérée comme une fonction "nouvelle".

Classe de wrapper

Math Object

Math.Pow ()

à partir du prototype de leur constructeur

Math.sqrt ()
Math.ceil () // arrondage math.floor () // rond down math.round () // arrondage math.max () // valeur maximale de la liste des paramètres math.min ()

// Calculez la valeur maximale du tableau ARR VAR ARR = [3, 6, 9, 2];
var max = math.max.apply (null, arr);

date de date

new () // obtenez l'objet de date de l'heure actuelle newdate (2020, 11, 1) // Le deuxième paramètre commence à partir de 0 nouvelle date (' 2020-12-01 ')

des méthodes communes

(

Timestamp.

TimeStamp

.

​

​

​(Expression régulière) décrit le "" modèle de construction "est souvent utilisé pour vérifier si une chaîne est conforme à un format prédéterminé. Créez une expression régulière

1. en utilisant le formulaire /内容/ syntaxe

var str = '123456'; var regxp = / ^  d {6} $ /; if (regxp.text (str)) {
	alert ('se conforme aux règles');} else {
	alert ('ne respecte pas les règles');}

2. forme de nouveau regexp ('contenu')

var regxp2 = new regexp ('^ \ d {6} $')

metacharacter

.

avant

pour vous assurer qu'il exprime le symbole lui-même

. crochets

.

^ -

quantificateur

précédent

des modificateurs de fois,

appelés drapeaux, sont utilisés pour implémenter des

régulières

.

la chaîne nul.

.
     
// La méthode Search (), un peu comme indexof (), renvoie le premier index trouvé, ou -1 s'il ne peut être trouvé.
var result1 = str.search (/  d + / g);
var result2 = str.search (/ m / g);
console.log (result1);
Console.log (result2);

// La méthode Match () renvoie le tableau trouvé.
var result3 = str.match (/  d + / g);
Console.log (Result3);

// Méthode remplace () REPLACE VAR RESTUSE4 = Str.replace (/ [az] + / g, '*'); ;

// Méthode Split (), divisez la chaîne en un tableau var result5 = str.split (/  d + / g);
console.log (result5);