Resumen de notas gráficas de JavaScript de 10.000 palabras

Variable

• Una variable solo se define pero no se le asigna un valor inicial. El valor predeterminado no está definido.
• Al definir una variable, debe escribir var (no la defina con var, sino que le asigne el valor directamente, lo que no provocará un error). , pero causará problemas de alcance).

Mejora de la declaración de variables

• Puede usar una variable declarada más tarde por adelantado sin causar una excepción.
• Antes de ejecutar todo el código, js tiene una fase de análisis previo y leerá previamente las definiciones de todas las variables.
• Nota: La promoción de declaración de variables solo promueve la definición pero no el valor

console.log (a); // Primero use la variable var a = 12 // Luego defina el

tipo de datos

• la

  • • variable

    .

    • grande o pequeño, independientemente de si es entero o flotante, y si es positivo o negativo. Todos son
    • números mayores o menores de tipo numérico (el valor absoluto es menor). Se puede escribir como notación científica 3e8 es 3^8
    • . El valor binario comienza con 0b , el octal comienza con 0 y el hexadecimal comienza con 0x ,
    • NaN es un número, es decir, "no es un número", pero es un valor de tipo numérico (en operaciones matemáticas, si el resultado. no puede ser un número, el resultado suele ser NaN, NaN == NaN, el resultado es falso)
    • Infinito Infinito o infinitesimal

  • Cadena

    • cadena métodos comunes método

    función	charAt
    ()	obtiene la posición especificada carácter (fuera de límites) es una cadena vacía)
    subcadena ()	extrae la subcadena
    substr()	extrae la cadena
    slice()	extrae la subcadena
    toUpperCase()	cambia la cadena a mayúsculas
    toLowerCase()	cambia la cadena a minúsculas
    indexOf()	recupera la cadena (coincidencia de patrones)

    • substring(a, b) subcadena que comienza en a y termina en b, excluyendo b; si se omite el segundo parámetro, la subcadena devuelta irá al final de la cadena. Si a> b, se ajustará automáticamente a un decimal delante de
    • substr (a)
    .
    • , b), una subcadena de longitud b comienza desde a; si se omite el segundo parámetro, la subcadena devuelta irá al final de la cadena; a puede ser un número negativo, lo que indica la posición recíproca
    • del segmento (a, b) A. subcadena que comienza en a y termina en b, excluyendo b; ambos parámetros pueden ser negativos; a debe ser menor que b, de lo contrario no habrá resultado (cadena vacía)

  • Booleano

  • Indefinido

    • indefinido es tanto un valor como un tipo. solo un valor propio:

  • Nulo

    • Cuando necesitamos destruir objetos, destruir matrices o eliminar detectores de eventos, generalmente los configuramos en

• tipos de datos complejos:

  • Objeto
  • Matriz
  • Función
  • RegExp
  • Fecha
  • Mapa
  • Conjunto
  • ...

El operador Typeof

puede ser

utilizado para detectar valores o variables. Tipo

tipo de 5; // tipo de cadena de 'niubi'; //

la conversión de tipo de datos

utiliza **Número ()**Función

// Cadena --> Número Número('123'); // 123Number('123.4'); // 123.4Number('123 año'); ('2e3'); // 2000Número(''); // 0Número('1 + 1'); // NaN// Valor booleano --> Número(verdadero); // 1Número(falso); // indefinido y nulo - -> Número Número(undefinido); // NaNNumber(null); // 0

**parseInt()** la función convierte una cadena en un número entero

y truncará automáticamente todos los caracteres después del primer no numérico. carácter

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

**parseFloat()** función convierte la cadena a números de punto flotante

trunca automáticamente el primer carácter no numérico y todos los caracteres después del punto no decimal

parseFloat('3.14'); // 3.14parseFloat('3.14 es pi'); es 3.14'); // NaNparseFloat('3.99'); // 3.99// convertirá automáticamente verdadero y falso en cadenas, y el resultado es NaN.

La función **String()**

se convierte en "la misma longitud". cadena. La notación científica y los números no decimales se convertirán a valores decimales

String(123); // '123'String(123.4); // '123.4'String(2e3); // '2000'String(NaN); // 'NaN'String(Infinity); // 'Infinity'String(0xf); // '15'String(true); // 'true'String(false); // 'false'String(indefinido); // 'undefinido'String(null); // función 'null'

**Boolean()**

// Números --> Los valores booleanos 0 y NaN se convierten a falso, y otros se convierten a trueBoolean(123) ; // trueBoolean(0); // falseBoolean(NaN); // falseBoolean(Infinity); // trueBoolean(-Infinity); // true// El valor booleano se convierte en falso y otro los valores se convierten a verdadero; // falseBoolean('abc'); // trueBoolean('false'); // true// indefinido y nulo --> el valor booleano se convierte a falseBoolean( undefinido); // falseBoolean(null); // la función false

**

muestra el cuadro de entrada

var num = Prompt('Ingrese el primer número');

conversión de tipo implícita

del operador

si está involucrado en operaciones matemáticas Si un operando no es un tipo numérico, JavaScript convertirá automáticamente el operando a un tipo numérico.

La esencia de la conversión implícita es llamar internamente a la función Number()

3 * '4' //. 12true + true // 2false + 2 // 23 * '2 días' //

El método NaN toFixed(a) retiene un lugar decimal

Math.pow(2, 3) // 2^3Math.sqrt(81) // 9Math. ceil() // Redondear hacia arriba Math.floor () // Redondear hacia abajo

operador relacional

=== // ¡Todos iguales!== // No todos iguales // Dos signos iguales == el operador no compara el tipo del valor, comparará el valor después de la conversión implícita. ¿Es igual? 1 == true // true1===true // false0 == false // true0 === false // false0 == indefinido // false0 === undefinido // falsoundefinido == nulo // verdaderoundefinido == = nulo // falso

La función **isNaN()** determina si el valor de la variable es NaN,

pero isNaN() no es fácil de usar. Su mecanismo es: siempre que. el resultado de la ejecución de la variable pasada a Number() es NaN, entonces la función isNaN() obtendrá

una evaluación de cortocircuito

a && ba es verdadero, el valor es b a es falso, el valor es a

a||ba es; verdadero, el valor es a, a es falso, el valor es b

Prioridad de operación lógica : no--> y- -> O

secuencia de operación de operación integral : no--> Operación matemática --> Operación relacional -->

Flujo

declaración de control

La función de número aleatorio Math.random()

fórmula

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 longitud 4, cada elemento no está definido.

Cuando se accede al subíndice fuera de los límites, se devuelve indefinido

var arr = [2, 6, 7, 3];arr[6] = 4;console.log(arr); Esta vez, el subíndice está fuera de los límites y no se informará ningún error, pero la matriz se expandirá, el subíndice 6 es 4 y el medio está vacío.

Se puede utilizar el método Array.isArray () Para detectar

la definición de la función

la función

// función regular diversión() {
    //Declaración del cuerpo de la función}//Función anónima var fun = function () {
    // Declaración del cuerpo de la función}

Promoción de la declaración de función

fun(); function fun() { // Se promoverá en la etapa de análisis previo alert("La función se ejecuta");}// Si la función está definida con una función expresión, no hay función de promoción fun(); // se genera un error var fun = function () {
    alert("La función se ejecuta");}

Promoción de prioridad de función

// Promoción de prioridad de función // Promoción después de la expresión de función; no se puede anular la función promocionada fun() // Aparece Bvar fun = function () {
    alerta('A');}función divertida() {
    alert('B');}fun(); // Aparece A.

El número real de parámetros formales es diferente.

1. El número de parámetros reales es mayor que el número
2. de parámetros formales
.
3. es menor que los parámetros formales. No se reciben parámetros reales. El valor del parámetro formal del parámetro no está undefined

de objeto de matriz de argumentos

representan la lista de
1. parámetros
2. real que recibe.
3. secuencias de números naturales que comienzan desde 0 y tienen un atributo de longitud y una matriz. De manera similar, puede usar corchetes para escribir subíndices para acceder a un determinado valor de atributo de un objeto, pero no puede llamar al método de la matriz

. y la omisión

están fuera de la función Las variables declaradas con var son variables globales, y las variables declaradas sin var son variables globales

en la función, las variables declaradas con var son variables locales, las variables declaradas sin var son variables globales

, ambas son variables globales. Y ambos son uno de los atributos del objeto de ventana. Las variables declaradas con var no se pueden eliminar y las variables declaradas sin var se pueden eliminar.

valor de retorno

suma (a, b) {
    

b

;}var result = sum(3, 5); // El valor de retorno puede ser recibido por una variable.

Si la función no devuelve un valor, el resultado impreso en ella no está definido.

) método

a en esta función, b representa los elementos frontal y posterior de la matriz respectivamente. Si es necesario intercambiarlos, se devuelve cualquier número positivo; de lo contrario, se devuelve un número negativo

var arr = [33, 22, 11, 55]; arr.sort(función (a, b) {
    si (a > b) {
        devolver 1;
    }
    devolver -1;});

asignación de variables

matriz de objetos clon profundo

var arr1. = [1, 2, 3, [4, 5]]; función deepClone(arr) {
    resultado var = [];
    for (var i = 0; i <arr.length; i++) {
        si (Array.isArray(arr[i])) {
            resultado.push(deepClone(arr[i]));
        } demás {
            resultado.push(arr[i]);
        }
    }
    devolver resultado;}

Una función local

definida dentro de una función es una función local y

solo se puede llamar dentro de la función

fun() {
    función interna() {
        console.log('Hola');
    }
    internal(); // Llama a la función interna} fun();

Cadena de alcance

En el anidamiento de funciones, la variable buscará su definición capa por capa desde adentro hacia afuera

var a = 10 var b = 20; () {
    var c = 30;
    función interna() {
        var a = 40;
        var d = 50;
        console.log(a, b, c, d); // Al usar variables, js comenzará desde la capa actual y buscará definiciones capa por capa}
    inside();}fun();

cierre El cierre

es una combinación de la función en sí y el estado del entorno en el que se declaró la función.

La función puede "recordar" el entorno en el que se definió, incluso si la función no está en él. el entorno en el que se definió. Cuando se llama, también puede acceder a las variables del entorno en el que se definió.

En js, se crea un cierre cada vez que se crea una función, pero la función de cierre a menudo requiere que la función sea. ejecutado "en un lugar diferente" para poder observar

la función del cierre:

1. Memoria: Cuando se genera un cierre, el estado del entorno donde se encuentra la función siempre se mantendrá en la memoria y no será automático. se borra después de llamar a la función externa.

   función divertida() {
       var nombre = 'niubi';
       función diversión interna() {
           alerta(nombre);
       }
       return insideFun;}var inn = fun();inn(); // La función interna se ha movido a la ejecución externa

2. para simular la

   función de variable privada fun() {
       var a = 0;
       función de retorno() {
           alerta(a);
       }}var getA = diversión();getA();

función diversión() {
    var a = 0;
    devolver {
        obtenerA: función () {
            devolver un;
        },
        agregar: función () {
            a++;
        }, 
        poder: función () {
            un *= 2;
        }
    };}var obj = fun();console.log(obj.getA());obj.add();

Nota : No se puede abusar de los cierres; de lo contrario, causará problemas de rendimiento en la página web y, en casos graves, puede provocar pérdidas de memoria.

Llame inmediatamente al

método de escritura especial IIFE de la función Una vez definida, la

función llamada inmediatamente debe convertirse en una expresión de función antes de poder llamarse

(función () { // Convertir la función en una expresión entre paréntesis // declaraciones})(). ;+ función() {
    alerta(1);}();-función() {
    alerta(1);}();

1. se puede utilizar para asignar valores a variables

   var edad = 12; var sexo = 'Var título = (función () {
       si (edad < 18) {
           devolver 'niños';
       } demás {
           si (sexo == 'masculino') {
               devolver 'Señor';
           } demás {
               devolver 'Señora';
           }
       

(

1. como

2. en un bucle for), las variables globales se cambian a variables locales y la sintaxis es más compacta.

yo++) {
    arr.push(función () {
        alerta(yo);     
    });}arr[2](); // Solución emergente 5

:

var arr = [];for (var i = 0; i < 5; i++) {
    (función (i) {
        arr.push(función() {
            alerta(i);
        });
    })(i);}arr[2](); // Aparece 2

DOM

nodeType valor de atributo común

nodo nodeType el atributo puede mostrar el tipo específico de este nodo

El objeto de documento

accede al nodo de elemento basándose principalmente en el objeto de documento.

Casi

todas

las funciones DOM están encapsuladas en el objeto de documento.

árbol de nodos.

Métodos

document.getElementById()

Si hay elementos con la misma identificación en la página, solo puede obtener el primer

cuadro <p id = " ">Soy una caja</p><p id = "para">Soy un párrafo</p>

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

La matriz getElementsByTagName()

es conveniente para el recorrido, de modo que los nodos de elementos se pueden manipular en lotes

incluso si solo hay un nombre de etiqueta especificado en el nodo de la página, también obtendrá una matriz con una longitud de 1.

Cualquier elemento de nodo también puede llame al método getElementsByTagName() para obtener el nodo de elemento de una determinada clase dentro de él

<p>Paragraph</p> <p>Paragraph</p> <p>Paragraph</p><p>Paragraph</p>

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

getElementsByClassName()

<p class ="spec">Caja</p><p class ="spec ">Caja</p><p class = "spec">Caja< /p><p class = "spec">Box</p>

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

querySelector()

este método solo puede obtener un elemento en la página si hay varios elementos que se cumplen. las condiciones, solo puedes obtener el primer elemento

<p id = "box1">
    <p>Párrafo</p>
    <p class = "spec">Párrafo</p>
    <p>Párrafo</p>
    <p>Párrafo</p></p>

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

querySelectAll()

matriz

de longitud 1 incluso si solo hay un nodo en la página que coincida con el selector

Para ejecutar,

use el evento window.onload = function() {} (agregue un detector de eventos al objeto de ventana, onload indica que la página se ha cargado), de modo que después de cargar la página, se mostrará el código especificado. ejecutado

La relación entre nodos

Nota: Los nodos de texto también pertenecen a nodos, por lo que generalmente excluimos la interferencia de nodos de texto (usando solo nodos de elementos)

para escribir funciones de relación de nodos comunes

<cuerpo>
    <p id = "cuadro1">
        <p>Párrafo</p>
        <p class = "spec">Párrafo</p>
        <p>Párrafo</p>
        <p>Párrafo</p>
	</p>
    <guión>
        var cuadro = document.getElementById('cuadro1');
        var especificación = document.getElementsByClassName('especificación');
        // Encapsula una función que devuelve todos los nodos de elementos secundarios del elemento, similar a la función infantil getChildren(node) {
            var niños = [];
            // Recorre todos los nodos secundarios del nodo y determina si el atributo nodeType de cada byte es 1
            // Si es 1, empuja la matriz de resultados para (var i = 0; i < node.childNodes.length; i++) {
                si (nodo.childNodes[i] == 1) {
                    niños.push(nodo.childNodes[i]);
                }
            }
            devolver niños;
        }
       
        // Encapsula una función que puede devolver el nodo hermano del elemento anterior del elemento, similar a la función anteriorElementSibling getElementPrevSibling(node) {
            var o = nodo;
            while (o.previousSibling! = nulo) {
                si (o.prebiousSibling.nodeType == 1) {
                    // Finaliza el ciclo y busca return o.previousSibling;
                }
                o = o.previousSibling;
            }
            devolver nulo;
        }
        
        // Encapsula una función que puede devolver todos los nodos hermanos del elemento de la función del elemento getAllElementSibling(node) {
            var anteriores = [];
            var siguiente = [];
            var o = nodo;
            while (o.previousSibling! = nulo) {
                if (o.previousSibling.nodeType == 1) {
                    prevs.unshift(o.previousSibling);
                }
                o = o.previousSibling;
            }
            o = nodo;
            mientras (o.nextSibling! = nulo) {
                si (o.nextSibling.nodeType == 1) {
                    nexts.push(o.nextSibling);
                }
                o = o.nextSibling;
            }
            devolver prevs.concat(siguientes);
        }
    </script></body>

Cambie el contenido en el nodo del elemento.

Puede usar dos atributos relacionados para cambiar el contenido en el nodo del elemento.

• InnerHTML

  puede

• configurar

  el contenido en el nodo en la sintaxis HTML.

• el nodo en forma de texto sin formato

.
    <p id = "cuadro"></p>
    <guión>
        var oBox = document.getElementById('cuadro');
        oBox.innerHTML = '<ul><li>Leche</li><li>Café</li></ul>'; // Puede analizar la sintaxis HTML // oBox.innerText = 'niub'; ser texto sin formato</script></body>

Cambiar el estilo CSS de un nodo de elemento

es equivalente a configurar el atributo de estilo en línea

oBox.style.backgroundColor = 'red' // Los atributos CSS deben escribirse en formato camel oBox.style; .backgroundImage = 'url(images/1.jpg)';oBox.style.fontSize = '32px';

Cambie los

atributos HTML de los nodos de elementos a atributos estándar W3C, como src, href, etc., simplemente haga clic directamente para crear cambios

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

Para atributos que no cumplen con los estándares W3C, use setAttribute() y getAttribute() para configurar y leer

<body>.
    <p id = "cuadro"></p>
    <guión>
        var cuadro = document.getElementById('cuadro');
        box.setAttribute('data-n', 10); // Agrega el atributo data-n con un valor de 10
        var n = box.getAttribute('fecha-n');
        alerta(n);
    </script></body>

El

de creación de nodos

se utiliza para crear un elemento HTML con un nombre de etiqueta especificado

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

y No está montado en el árbol DOM y no se puede ver.

Debe continuar usando el método appendChild() o insertBefore() para insertar el nodo huérfano en el árbol DOM.

Cualquier nodo que ya esté en el árbol DOM puede llamar. método appendChild(), que puede montar el nodo huérfano dentro de él y convertirse en su último nodo secundario,

node.appendChild (nodo huérfano)

que ya está en el árbol DOM puede llamar al método insertBefore(), que puede montar el nodo huérfano; nodo Vaya dentro de él y conviértase en el nodo padre del nodo antes de su "nodo secundario de referencia"

.insertBefore(nodo huérfano, nodo de referencia

el nodo móvil

hace que el nodo que se ha montado en el árbol DOM se convierta en appendChild() o insertBefore

() Parámetros, este nodo se moverá al

nuevo padre node.appendChild (nodo que ya tiene un padre); nuevo padre node.insertBefore (nodo que ya tiene un padre, nodo hijo de referencia); que un nodo no se puede ubicar en el árbol DOM al mismo tiempo. 
Eliminar nodos
 en dos ubicaciones.

nodo padre

de un nodo secundario de DOM.removeChild

nodo clonado

cloneNode()

El método puede clonar el nodo. El nodo clonado es un "nodo huérfano".

El tipo es booleano, lo que indica si se utiliza la clonación profunda. Si es verdadero, también se clonarán todos los nodos descendientes del nodo.

él

mismo

será

• clonado

onmouseenter no burbujea, onmouseover burbujea

• monitoreo de eventos de teclado común

• de escucha de eventos de forma común

• detectores de eventos de página común

cuando el cuadro Orden de ejecución de escucha de eventos cuando está anidado

<p id = "box1">
    <p id = "cuadro2">
        <p id = "caja3"></p>
    </p></p><script>
    var oBox1 = document.getElementById('cuadro1');
    var oBox2 = document.getElementById('cuadro2');
    var oBox3 = document.getElementById('cuadro3');
    
    oBox1.onclick = función () {
        console.log('caja1');
    };
    
    oBox2.onclick = función () {
        console.log('caja2');
    };
    
    oBox3.onclick = función () {
        console.log('caja3');
    };
    // Haga clic en el cuadro más interno, la dirección de propagación es de adentro hacia afuera</script>

Propagación de eventos

La propagación de eventos es: primero desde el exterior hacia el interior, y luego desde el interior hacia el exterior (la capa más interna no se captura primero y luego se burbujea, sino que se determina en función del orden de escritura del código. Cajas con el mismo nombre están relacionados con la misma etapa y orden Si se establece el mismo elemento Si hay dos o más eventos con el mismo nombre, el escrito más tarde en el nivel DOM0 sobrescribirá el escrito primero y el nivel DOM2 se ejecutará en orden;

onxxxx (monitoreo de eventos de nivel DOM0) solo puede monitorear la etapa de burbujeo, por lo que los resultados observados son de adentro hacia afuera

del método addEventListener() (monitoreo de eventos de nivel DOM 2)

oBox.addEventListener('click', function() {
 

procesamiento

de eventos}, verdadero); // Si el tercer parámetro es verdadero, escuchará la fase de captura. Si es falso, escuchará la fase de burbujeo

.

un parámetro formal, que es un objeto que encapsula los detalles de este evento.

Este parámetro generalmente está representado por la palabra evento o la letra e

oBox.onmousemove = function (e) {
 // El objeto e es el "objeto de evento" de este evento};

Atributos relacionados con el objeto

• Atributos relacionados con la posición del mouse

Atributos de la posición del mouse cuando se activa este evento

• Atributos e .charCode y e.keyCode

El atributo e.charCode generalmente se usa en el evento onkeypress para representar el "código de carácter" del carácter ingresado por el usuario

Número de código

de

carácter	0
~ número 9	48 ~ 57
letra mayúscula A ~ Z	65 ~ 90
letra minúscula a ~ z	97 ~ 122

El atributo e.keyCode se usa generalmente en eventos onkeydown y onkeyup para representar el "código clave" de la tecla presionada. por el usuario

número 40

de código	de tecla
0 ~ número 9	48 ~ 57
parte de letra mayúscula y minúscula a ~ z	65 ~ 90
Cuatro teclas de dirección ← ↑ → ↓	37, 38, 39,
Tecla Enter	13
Tecla espaciadora	32

Evitar el evento predeterminado

e. El método .preventDefault() se utiliza para evitar la "acción predeterminada" generada por el evento.

El método e.stopPropagation() se utiliza para evitar que los eventos continúen propagándose

. La adición por lotes de eventos de rendimiento de escucha

• consumirá una cierta cantidad de. Agregar eventos en lotes generará demasiados monitores y un gran consumo de memoria.

eventos

consumirá una cierta cantidad de memoria del sistema, y ​​agregar eventos en lotes generará demasiados oyentes. consumo de memoria (cuando hay una gran cantidad de elementos similares que deben agregarse en lotes, la delegación de eventos puede reducir la sobrecarga de memoria. Utilice

el mecanismo de distribución de eventos para delegar eventos de elementos descendientes a Nota para elementos ancestros

: no se pueden delegar no-

).

Burbuja de eventos a elementos ancestros

Cuando se agrega un nodo de elemento dinámico al árbol, la delegación de eventos se puede usar para hacer que los elementos recién agregados al árbol tengan

relacionados con

La

función del temporizador setInterval() puede llamar a una función repetidamente, con un intervalo fijo entre cada llamada

setInterval(function () {
    // Esta función se llamará automáticamente en un intervalo fijo}, 2000); // El segundo parámetro es el intervalo, en milisegundos // Esta función puede recibir el tercer, cuarto... parámetros, y se pasarán en orden. Ingrese la función setInterval(función (a, b) {
    // El valor del parámetro formal a es 88 y el valor del parámetro formal b es 66}, 2000, 88, 66); // A partir del tercer parámetro, representa los parámetros pasados ​​a la función // Las funciones nombradas pueden también se pasará en setIntervalvar a = 0; function fun() {
    console.log(++a);};setInterval(fun, 1000);

Borrar el temporizador La

función clearInterval() puede borrar un temporizador

// Configura el temporizador y usa la variable del temporizador para recibir el temporizador var timer = setInterval(function ( ) {
    }, 2000);//Cuando se hace clic en el botón, borre el temporizador oBtn.onclick = function () {
    clearInterval(timer); };

La función retardadora

setTimeout

() puede establecer un retardador. Cuando finalice el tiempo especificado, la función se ejecutará una vez y no se ejecutará repetidamente.

    // Esta función se ejecutará una vez después de 2 segundos}, 2000); clearTimeout(timer); // Borra el retardador

de forma asíncrona

: no bloqueará la CPU para continuar ejecutando otras declaraciones. Cuando se complete la función asíncrona, la "función de devolución de llamada". " se ejecutará. (devolución de llamada)

setInterval() y setTimeout() son dos declaraciones asincrónicas

setTimeout(function () {
    console.log('A');}, 2000); // Declaración asincrónica console.log('B'); // La declaración asincrónica no bloqueará la ejecución normal del programa // La ejecución de

la función BA del resultado acelera

la ejecución de una función una vez Finalmente, la segunda ejecución se permite solo después de que el ciclo de ejecución sea mayor que el período de ejecución establecido

var lock = true función que necesita limitación () {
    // Si el candado está cerrado, entonces if(!lock) no se ejecutará return;
    // Declaración principal de la función // Bloquear lock = false;
    
    //Abre el candado después del número especificado de milisegundos setTimeout(function () {
        bloquear = verdadero;
    }, 2000);}

BOM

BOM (Modelo de objetos del navegador, modelo de objetos del navegador) es la interfaz para que JS interactúe con la ventana del navegador.

objeto

es la ventana en la que se ejecuta el script js actual, y esta ventana contiene el DOM. estructura, ventana La propiedad .document es el objeto del documento.

En los navegadores con función de pestaña, cada pestaña tiene su propio objeto de ventana; es decir, las pestañas en la misma ventana no compartirán un objeto de ventana

1. .

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

   Esto significa que varios archivos js comparten el alcance global, es decir, los archivos js no tienen una función de aislamiento de alcance

2. que generalmente es de Windows

.

3. métodos

   como setInterval(), alert() y otras funciones integradas son generalmente métodos de ventana

Propiedades relacionadas con el tamaño de la ventana

.

evento de cambio de tamaño

en la ventana Después de que el tamaño cambie, se activará el evento de cambio de tamaño. Puede usar window.onresize o window.addEventListener('resize') para vincular el controlador de eventos.

de altura de desplazamiento

representa el valor de píxel de.

document.documentElement que se ha desplazado en dirección vertical. La propiedad .scrollTop también representa la altura de desplazamiento de la ventana

.

Para una mejor compatibilidad con el navegador, los dos generalmente se escriben juntos

var scrollTop = window.scrollY ||

evento de desplazamiento

de solo lectura

Después de desplazarse por la ventana, se activará el evento de desplazamiento. Puede usar window.onscroll o window.addEventListener('scroll') para. vincular la función del controlador de eventos

Objeto Navigator

La propiedad window.navigator puede recuperar el objeto navegador, que contiene los atributos relevantes y

del objeto Historial

El objeto .history proporciona una interfaz para operar el historial de sesiones del navegador.

Una operación común es simular el botón Atrás

del

History.go(-1); // Equivalente a In History.back();

el objeto Ubicación

window.location identifica la URL actual. Puede ordenar al navegador que salte a la página asignando un valor a este atributo

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

• Para recargar la página actual,

  puede llamar al método de recarga de ubicación para recargar la página actual .

  ​

• ​

  ​

​

​Desde este elemento hasta el elemento

del

ancestro

posicionado

.

Una colección de "pares de valor clave", que representa la relación de mapeo entre atributos y valores

.
    Nombre: 'Xiao Ming',
    Edad: 12,
    sexo: 'hombre',
    

'

, 'Programación']

• }

• ; El nombre del atributo no cumple con la convención de nombres de identificadores JS, debe usar soportes cuadrados para

• acceder

  .

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

)

;
    a: 10}; obj.b

=

40

;

    A: 1,
    

}

;

obj.a

;

    Nombre: 'Xiao Ming',
    Edad: 12,
    sexo: 'hombre',
    pasatiempos: ['fútbol', 'natación', 'programación'],
    'Libro favorito': 'Shuke and Beta',
    sayhello: function () {
        console.log ('hola');
    

}

}

;

​

    console.log ('El valor del' atributo ' + k +' es ' + obj [k]);}

clon profundo del objeto

var obj1 = {
    A: 1, 
    B: 2, 
    C: [33, 44, {
        M: 55,
        N: 66,
        P: [77, 88]
    }]}; function DeepClone (O) {
    if (array.isArray (o)) {
        resultado var = [];
        para (var i = 0; i <o.length; i ++) {
            resultado.push (DeepClone (o [i]));
        }
    } else if (typeof o == 'objeto') {
        resultado var = {};
        para (var k en o) {
            resultado [k] = profundo (o [k]);
        }
    } demás {
        resultado var = o;
    }
    Resultado de retorno;}

puede

contexto

de la función

.

La

función

se

)

;

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

(

1. esto

2. )
   

   señalará este objeto
3. .

/ {} Esto apunta a este objeto vacío este.a = 3;
    this.b = 5;
    // Agregar automáticamente esta;} var obj = new Fun (); console.log (

obj

)

;
    this.nombre = nombre;
    this.age = edad;
    this.sex = sex;} var xiaoming = New People ('小明', 12, 'masculino'); var xiaoming = New People ('小红', 10, 'femenino'); var xiaogang = New People ('小

• '
• )

;

• Construya un nuevo objeto ", las declaraciones dentro de él agregarán varias propiedades y métodos al nuevo objeto, completarán la inicialización del objeto

y agregarán

las personas de la función de método (nombre, edad, sexo) {
    this.nombre = nombre;
    this.age = edad;
    this.sex = sexo;
    this.sayhello = function () {
        console.log ('I Am' + this.name);
    };} var xiaoming = New People ('Xiaoming', 12, 'masculino'); xiaoming.sayhello (

)

; Por defecto, el atributo del constructor apunta a la función

El prototipo del constructor es el prototipo de la instancia

instancia

de búsqueda de cadena prototipo

a

    this.nombre = nombre;
    this.age = edad;
    this.sex = sex;} People.prototype.nationality = 'China'; (Xiaoming .nacionalidad);

ASOWNPROPERTY ()

Este método puede verificar si el objeto realmente "posee" una determinada propiedad o método

xiaoming.hasownproperty ('name');

(

nacionalidad

'

);

/ True'Ge 'en Xiaoming // True'Sex' en Xiaoming // True 'Nationality' en Xiaoming

//

Verdad Las funciones en el método causan un desperdicio de memoria, que se puede resolver escribiendo el método en el prototipo.

Funcion People (nombre, edad, sexo) {
    this.nombre = nombre;
    this.age = edad;
    this.sex = sex;} personas.prototype.sayhello = function () {
    

masculino

'); xiaoming.sayhello ();

cadena prototipo de matriz

La herencia

1. se implementa con la ayuda de la cadena prototipo,

permitiendo que el atributo prototipo del estudiante apunte a la instancia de la clase principal y luego agregue el método del estudiante al prototipo del estudiante.

El problema de la herencia a través de la cadena de

• prototipos
• . Muchos atributos definidos por la superclase.

2. el constructor

• de la subclase no se escribe con suficiente elegancia

.

generalmente

utilizado

.
    this.nombre = nombre;
    this.sex = sexo;
    this.age = edad;
    this.Arr = [1, 2, 3];} Función Estudiante (nombre, sexo, edad, escuela, sid) {
    Personas. Llame (esto, nombre, sexo, edad);
    this.school = School ';
    this.sid = sid;} var xiaoming = nuevo estudiante ('Xiao Ming', 'masculino', 12, 'escuela', 123456

3. )

; Herencia .

​

​

El prototipo hereda

el método Object.Create (), que puede crear un nuevo objeto basado en el objeto especificado como el prototipo (ie9)

var obj2 = object.create (obj1); , {// No. Los dos parámetros son un objeto, y los atributos a agregar se escriben en él d: {// El valor del atributo sigue siendo un valor de objeto: 99 // El valor es 99
    } // Puede enmascarar las propiedades con el mismo nombre en el prototipo});

Cuando no hay necesidad de "gastar mucho esfuerzo" para crear un constructor, pero solo desea que el nuevo objeto sea "similar" al objeto existente, puede usar Object.Create (), que se llama compatibilidad de Prototypal Heritance

Object.Create () El método de escritura único

implementa objeto.create () en los navegadores de versión inferior

// Una función escrita por Douglas Crockford // La función de la función es usar O como prototipo para crear un nuevo objeto de función de objeto (o ) {
    // Crear una función de constructor temporal f () {}
    // deja que el prototipo de este constructor temporal apunte a O, de modo que el nuevo objeto que crea, __proto__ señala O
    F.Prototype = O;
    return new f ();}

herencia parasitaria

, que puede "mejorar el objeto". Asignar nuevos objetos al nuevo objeto

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

Desventajas:

reduce

debido a la incapacidad de reutilizar las funciones (los métodos no se escriben en el prototipo

)

.

, supertype) {
    var prototype = object.create (supertype.prototype);
    subtype.prototype = prototipo;
}

// Función de clase principal personas (nombre, sexo, edad) {
    this.nombre = nombre;
    this.sex = sexo;
    this.age = edad;
}

People.prototype.sayhello = function () {
    console.log ("hola");
}
People.prototype.sleep = function () {
    console.log ("dormir");
}

// Estudiante de la función de subclase (nombre, sexo, edad, escuela, sid) {
    Personas. Llame (esto, nombre, sexo, edad);
    this.school = escuela;
    this.sid = sid;
}

herhheritprototype (estudiante, personas);
    console.log ("examen");
};

var xiaoming = nuevo estudiante ('xiao ming', 'masculino', 12, 'escuela', 123456);

La instancia del operador

se usa para detectar "si un objeto es una instancia de una determinada instancia de la clase"

Xiaoming de estudiante // El mecanismo subyacente: verifique si el atributo de studing.prototype está en la cadena prototipo de Xiaoming (cuántos niveles están bien, siempre que Es)

Constructor incorporado

muchos

constructores incorporados.

. Todos los métodos de este tipo se definen en su constructor incorporado.

La relación entre los constructores incorporados:

Object.Prototype es el punto final de la cadena prototipo de todas las cosas.

Cualquier función puede considerarse como la función "Nuevo".

Clase de

Math Object

Math.Pow ()

del prototipo de su constructor

Math.sqrt ()
Math.Ceil () // redondea Math.floor () // Round Math.round () // Round Math.max () // Valor máximo de la lista de parámetros Math.min ()

// Calcule el valor máximo de la matriz ARR var Arr = [3, 6, 9, 2];

math.max.apply

(

null, arr);

2020-12-01 ')

de métodos comunes

TimeStamp

.

marca

de

tiempo

.

​

(expresión regular) describe el "patrón de construcción" a menudo se usa para verificar si una cadena se ajusta a un formato predeterminado. Cree una expresión regular

utilizando

1. el /内容/ sintax

{6} $/; if (regxp.text (str)) {
	alerta ('conforma a las reglas');} else {
	alerta ('no cumple con las reglas');}

2. de la nueva regexp ('contenido')

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

Metacharacter

o

de un símbolo si hay algún significado especial, puede agregar un antes para asegurarse de que exprese el símbolo en

sí

. Brackets

cuadrados

^ -

Cuantificador

modificadores,

también

llamados

Flags, se utilizan para

.

la cadena de método regular.

​
     
// El método de búsqueda (), al igual que indexOf (), devuelve el primer índice encontrado, o -1 si no se puede encontrar.
VAR result1 = str.search (/ d+/g);
VAR result2 = str.search (/m/g);
console.log (resultado1);
console.log (resultado2);

// El método Match () devuelve la matriz encontrada.
VAR result3 = str.match (/ d+/g);
console.log (result3);

// Método reemplazar (), reemplazar VAR result4 = str.replace (/[AZ] +/G, '*'); ; / /*123*4567*89

// Método Split (), divide la cadena en una matriz var dulta5 = str.split (/ d+/g);
console.log (resultado5);