Resumo de notas gráficas de JavaScript de 10.000 palavras

Variável

• Uma variável é apenas definida, mas não recebe um valor inicial. O valor padrão é indefinido.
• Ao definir uma variável, você deve escrever var (não defina-a com var, mas atribua diretamente o valor a ela, o que não causará um erro. , mas causará problemas de escopo).

Melhoria da declaração de variáveis

• ​​Você pode usar uma variável declarada posteriormente sem causar uma exceção
• Antes de executar todo o código, js tem uma fase de pré-análise e irá pré-ler as definições de todas as variáveis.
• Nota: A promoção da declaração de variável promove apenas a definição, mas não o valor

• console.log

  • • (

    a

); // Primeiro use a variável var a = 12

;

• • • grande ou pequeno, independentemente de inteiro ou flutuante, e independentemente de positivo ou negativo. Todos são
    • números maiores ou menores do tipo numérico (o valor absoluto é menor). Pode ser escrito como notação científica 3e8 é 3^8
    • . o valor binário começa com 0b , o octal começa com 0 , e o hexadecimal começa com 0x
    • NaN , não é um número, ou seja, "não é um número", mas é um valor do tipo numérico (em operações matemáticas, se for o resultado. não pode ser um número, o resultado geralmente é NaN, NaN == NaN, o resultado é falso)
    • Infinito Infinito ou infinitesimal

  • String

    • string métodos comuns método

    função	charAt
    ()	obtém o caractere de posição especificado (fora dos limites) é uma string vazia)
    substring ()	extrai a substring
    substr()	extrai a string
    slice()	extrai a substring
    toUpperCase()	altera a string para maiúscula
    toLowerCase()	altera a string para minúscula
    indexOf()	recupera a string (correspondência de padrão)

    • substring(a, b) A substring começando em a e terminando em b, excluindo b; se o segundo parâmetro for omitido, a substring retornada irá para o final da string. Se a > b, ela será automaticamente ajustada para um decimal na frente de
    • substr(a. , b), uma substring de comprimento b começa em a; se o segundo parâmetro for omitido, a substring retornada irá para o final da string a pode ser um número negativo, indicando a posição recíproca
    • slice(a, b ) A; substring começando em a e terminando em b, excluindo b; ambos os parâmetros podem ser negativos; a deve ser menor que b, caso contrário não haverá resultado (string vazia)

  • Booleano

  • Indefinido

    • indefinido é um valor e um tipo. apenas um valor próprio:

  • Nulo

    • Quando precisamos destruir objetos, destruir matrizes ou excluir ouvintes de eventos, geralmente os definimos como nulos

• :

  • Objeto
  • Array
  • Função
  • RegExp
  • Date
  • Map
  • Set
  • ...

O operador Typeof

pode ser

usado para detectar valores ou variáveis. Tipo

typeof 5; // numbertypeof 'niubi'; //

a conversão de tipo de dados

usa **Number ()**Function

// String --> Number Number('123'); ('2e3'); // 2000Number(''); // 0Number('1 + 1'); // NaN// Valor booleano --> Number(true); // indefinido e nulo - -> Number Number(undefined); // NaNNumber(null); // 0

A função **parseInt()** converte uma string em um número inteiro

e truncará automaticamente todos os caracteres após o primeiro não numérico caractere

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

; converte a string em números de ponto flutuante

trunca automaticamente o primeiro caractere não numérico e todos os caracteres após o ponto não decimal

parseFloat('3.14'); // 3.14parseFloat('3.14 is pi'); é 3,14'); // NaNparseFloat('3.99'); // 3,99// converterá automaticamente verdadeiro e falso em strings, e o resultado será

NaN

. corda. Notação científica e números não decimais serão convertidos em valores decimais

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

**Boolean()** function

// Números --> Valores booleanos 0 e NaN são convertidos para false, e outros são convertidos para trueBoolean(123) ; // trueBoolean(0); // falseBoolean(NaN); // falseBoolean(Infinity); // trueBoolean(-Infinity); valores são convertidos para true; Boolean(''); // falseBoolean('abc'); // trueBoolean('false'); undefined); // falseBoolean(null) ; // false

**

a função exibe a caixa de entrada

var num = prompt('Por favor, insira o primeiro número');

conversão de tipo implícito

do operador

se estiver envolvido em operações matemáticas Se um operando não for um tipo numérico, o JavaScript converterá automaticamente o operando em um tipo numérico.

A essência da conversão implícita é chamar internamente a função Number()

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

O método NaN toFixed(a) retém uma casa decimal

Math.pow(2, 3) // 2^3Math.sqrt(81) // 9Math. ceil() // Arredondamento Math.floor () // Arredondamento para baixo

operador relacional

=== // Todos iguais!== // Nem todos iguais // Dois sinais de igual == operador não compara o tipo do valor, ele irá comparar o valor após a conversão implícita É igual a 1 == true // true1===true // false0 == false // true0 === false // false0 == indefinido // false0 === indefinido // falseundefinido == nulo // trueundefinido == = nulo // falso

**isNaN()** A função determina se o valor da variável é NaN,

mas isNaN() não é fácil de usar Seu mecanismo é: contanto que. o resultado da execução da variável passada para Number() é NaN, então a função isNaN() obterá

uma avaliação de curto-circuito

a && ba é verdadeiro, o valor é b é falso, o valor é a

a||ba é; verdadeiro, o valor é a, a é falso, o valor é b

Prioridade da operação lógica : não--> e- -> Ou

sequência de operação de operação abrangente : não--> Operação matemática -> Operação relacional ->

Fluxo

instrução de controle

Função de número aleatório Math.random()

um

número inteiro no intervalo [a, b], a 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 comprimento 4, cada item é indefinido

Quando o subscrito é acessado fora dos limites, indefinido é retornado

. desta vez, o subscrito está fora dos limites, nenhum erro será relatado, mas o array será expandido, o subscrito 6 é 4 e o meio está vazio.

O método Array.isArray() pode ser usado para detectar

a definição da função

da função

// função regular diversão() {
    //Instrução do corpo da função}//Função anônima var fun = function () {
    // Instrução do corpo da função}

Promoção da declaração da função

fun(); function fun() { // Será promovida na fase de pré-análise alert("A função é executada");}// Se a função for definida com uma função expressão, não há recurso de promoção fun() // um erro é gerado var fun = function () {
    alert("A função é executada");}

Promoção de prioridade de função

// Promoção de prioridade de função // Promoção após promoção de declaração de variável de função, não pode substituir a função promovida fun();
    alert('A');}função fun() {
    alert('B');}fun(); // Pop up A.

O número real de parâmetros formais é diferente

1. O número de parâmetros reais é maior que os parâmetros formais
2. .

menor

1. que os parâmetros formais. Nenhum parâmetro real é recebido. O valor do parâmetro formal do parâmetro é undefined

1. :
2. todos os atributos são.

para

1. acessar um determinado valor de atributo de um objeto, mas não pode chamar o método da matriz.

e a omissão

estão fora da função. As variáveis ​​declaradas com var são variáveis ​​globais, e as variáveis ​​declaradas sem var são variáveis ​​globais

na função, as variáveis ​​declaradas com var são variáveis ​​locais, as variáveis ​​declaradas sem var são variáveis ​​globais

, ambas são variáveis ​​globais. , e ambos são um dos atributos do objeto window. Variáveis ​​declaradas com var não podem ser excluídas e variáveis ​​declaradas sem var podem ser excluídas!

valor de retorno

soma (a, b) {
    

b

;}var result = sum(3, 5); // O valor de retorno pode ser recebido por uma variável

Se a função não retornar um valor, o resultado impresso nela será indefinido.

) método

a nesta função, b representa os itens da frente e de trás na matriz, respectivamente. Se eles precisarem ser trocados, qualquer número positivo será retornado, caso contrário, um número negativo será retornado

. 55]; arr.sort(função (a, b) {
    se (a > b) {
        retornar 1;
    }
    return -1;})

;

array clone profundo

var arr1. = [1, 2, 3, [4, 5]]; função deepClone (arr) {
    var resultado = [];
    for (var i = 0; i < arr.length; i++) {
        if (Array.isArray(arr[i])) {
            resultado.push(deepClone(arr[i]));
        } outro {
            resultado.push(arr[i]);
        }
    }
    return result;}

Uma função local

definida dentro de uma função é uma função local e

só pode ser chamada dentro da função

fun() {
    função interna() {
        console.log('Olá');
    }
    inner(); // Chama a função interna} fun();

Cadeia de escopo

No aninhamento da função, a variável procurará sua definição camada por camada de dentro para fora

var a = 10 var b = 20; () {
    varc = 30;
    função interna() {
        var a = 40;
        var d = 50;
        console.log(a, b, c, d); // Ao usar variáveis, js iniciará a partir da camada atual e procurará definições camada por camada}
    inner();}fun();

encerramento

encerramento é uma combinação da própria função e do estado do ambiente em que a função foi declarada.

A função pode "lembrar" o ambiente em que foi definida, mesmo que a função não esteja. o ambiente em que foi definido. Quando chamado, você também pode acessar as variáveis ​​​​do ambiente em que foi definido.

Em js, um fechamento é criado toda vez que uma função é criada, mas o recurso de fechamento geralmente exige que a função seja. executado "em um local diferente" para poder observar

a função do fechamento:

1. Memória: Quando um fechamento é gerado, o estado do ambiente onde a função está localizada será sempre mantido na memória e não será automaticamente. limpo após a função externa ser chamada.

   função diversão() {
       var nome = 'niubi';
       função funFun() {
           alerta(nome);
       }
       return innerFun;}var inn = fun();inn() // A função interna foi movida para a execução externa

2. para simular a variável privada

   function fun() {
       var a = 0;
       função de retorno() {
           alerta(a);
       }}var getA = fun();getA()

;
    var a = 0;
    retornar {
        getA:função(){
            retornar um;
        },
        adicionar: função () {
            um++;
        }, 
        pow: função () {
            uma *= 2;
        }
    };}var obj = fun();console.log(obj.getA());obj.add();

Nota : Closures não podem ser abusados, caso contrário causarão problemas de desempenho na página web e, em casos graves, poderão levar a vazamentos de memória.

Chame imediatamente o

método de escrita especial da função IIFE. Uma vez definida, a função imediatamente chamada

deve ser convertida em uma expressão de função antes de poder ser chamada

(function () { // Transforme a função em uma expressão através de parênteses // instruções})() ;+ função() {
    alerta(1);}();-function() {
    alert(1);}();

1. pode ser usado para atribuir valores às variáveis

   ​​var age = 12;
       se (idade <18) {
           retornar 'filhos';
       } outro {
           if (sexo == 'masculino') {
               retornar 'Sr.';
           } outro {
               retornar 'Sra';
           }
       

(

1. como

2. em um loop for), variáveis ​​globais são transformadas em variáveis ​​locais e a sintaxe é mais compacta.

e++) {
    arr.push(função(){
        alerta(eu);     
    });}arr[2](); // Solução pop-up 5

:

var arr = [];for (var i = 0; i < 5; i++) {
    (função (eu) {
        arr.push(função() {
            alerta(eu);
        });
    })(i);}arr[2](); // Pop up 2

DOM

nodeType valor de atributo comum

nó nodeType atributo pode exibir o tipo específico deste nó

O objeto de documento

acessa o nó do elemento dependendo principalmente do objeto de documento.

Quase todas as funções do DOM são encapsuladas no objeto de documento.

O objeto de documento também representa todo o documento HTML. árvore de nós.

Métodos e funções comuns

document.getElementById()

Se houver elementos com o mesmo id na página, você só poderá obter a primeira

caixa <p id = " ">Eu sou uma caixa</p><p id = "para">Eu sou um parágrafo</p>

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

O array getElementsByTagName()

é conveniente para travessia, de modo que os nós do elemento podem ser manipulados em lotes,

mesmo se houver apenas um nome de tag especificado no nó da página, você também obterá um array com comprimento de 1.

Qualquer elemento do nó também pode chame o método getElementsByTagName() para obter o nó do elemento de uma determinada classe dentro dele

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

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

getElementsByClassName()

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

document.getElementsByClassName

('spec');

este método Você só pode obter um elemento na página se houver vários elementos que se encontrem. as condições, você só pode obter o primeiro elemento

<p id = "box1">
    <p>Parágrafo</p>
    <p class = "spec">Parágrafo</p>
    <p>Parágrafo</p>
    <p>Parágrafo</p></p>

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

querySelectAll()

matriz

de comprimento 1 mesmo se houver apenas um nó na página que corresponda ao seletor.

Para executar,

use o evento window.onload = function() {} (adicione um ouvinte de evento ao objeto de janela, onload indica que a página foi carregada), para que após o carregamento da página, o código especificado seja executado

.

​Os nós de texto também pertencem aos nós, portanto, geralmente excluímos a interferência do nó de texto (usando apenas nós de elementos)

para escrever funções de relacionamento de nós comuns

<body>
    <p id = "caixa1">
        <p>Parágrafo</p>
        <p class = "spec">Parágrafo</p>
        <p>Parágrafo</p>
        <p>Parágrafo</p>
	</p>
    <roteiro>
        var box = document.getElementById('box1');
        var especificação = document.getElementsByClassName('especificação');
        // Encapsula uma função que retorna todos os nós do elemento filho do elemento, semelhante à função infantil getChildren(node) {
            var filhos = [];
            // Percorre todos os nós filhos do nó e determina se o atributo nodeType de cada byte é 1
            // Se for 1, envia o array de resultados for (var i = 0; i < node.childNodes.length; i++) {
                if (node.childNodes[i] == 1) {
                    filhos.push(node.childNodes[i]);
                }
            }
            devolver os filhos;
        }
       
        // Encapsula uma função que pode retornar o nó irmão do elemento anterior do elemento, semelhante a previousElementSibling function getElementPrevSibling(node) {
            var o = nó;
            while (o.previousSibling! = null) {
                if (o.prebiousSibling.nodeType == 1) {
                    // Finaliza o loop e encontra return o.previousSibling;
                }
                o = o.irmão anterior;
            }
            retornar nulo;
        }
        
        // Encapsula uma função que pode retornar todos os nós irmãos do elemento function getAllElementSibling(node) {
            var anteriores = [];
            var próximos = [];
            var o = nó;
            while (o.previousSibling! = null) {
                if (o.anteriorSibling.nodeType == 1) {
                    prevs.unshift(o.previousSibling);
                }
                o = o.irmão anterior;
            }
            o = nó;
            while (o.nextSibling! = null) {
                if (o.nextSibling.nodeType == 1) {
                    nexts.push(o.nextSibling);
                }
                o = o.próximoIrmão;
            }
            return anterior.concat(próximos);
        }
    </script></body>

Alterar o conteúdo no nó do elemento

Você pode usar dois atributos relacionados para alterar o conteúdo no nó do elemento

pode definir

• o

  conteúdo

• no

  nó na sintaxe HTML.

• o nó na forma de texto simples

<body >

    <p id = "caixa"></p>
    <roteiro>
        var oBox = document.getElementById('caixa');
        oBox.innerHTML = '<ul><li>Leite</li><li>Café</li></ul>'; // Pode analisar a sintaxe HTML // oBox.innerText = 'niub' // Somente pode; ser texto simples</script></body>

Alterar o estilo CSS de um nó de elemento

é equivalente a definir o atributo de estilo inline

oBox.style.backgroundColor = 'red' // Os atributos CSS devem ser escritos em camel case oBox.style; .backgroundImage = ' url(images/1.jpg)';oBox.style.fontSize = '32px';

Altere os

atributos HTML dos nós dos elementos para atributos padrão do W3C, como src, href, etc., basta clicar diretamente para fazer alterações

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

Para atributos que não atendem aos padrões W3C, use setAttribute() e getAttribute() para definir e ler

<body>
    <p id = "caixa"></p>
    <roteiro>
        var box = document.getElementById('caixa');
        box.setAttribute('data-n', 10); // Adiciona o atributo data-n com valor 10);
        var n = box.getAttribute('data-n');
        alerta(n);
    </script></body>

de criação de nó

é

usado para criar um elemento HTML com um nome de tag especificado

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

e Não está montado na árvore DOM e não pode ser visto. Você

deve continuar a usar o método appendChild() ou insertBefore() para inserir o nó órfão na árvore DOM

. método appendChild(), que pode montar o nó órfão dentro dele e se tornar seu último nó filho

pai node.appendChild (nó órfão);

qualquer nó que já esteja na árvore DOM pode chamar o método insertBefore(), que pode montar o órfão);

-

se o nó pai do nó antes de seu "nó filho de benchmark"

.insertBefore(nó órfão, nó de benchmark)

; () Parâmetros, este nó será movido para

o novo pai node.appendChild (nó que já possui um pai); que um nó não pode ser localizado na árvore DOM ao mesmo tempo 
Exclua nós
 em dois locais

nó filho nó pai

do DOM.removeChild

nó

cloneNode()

O método pode clonar o nó. O nó clonado é um "nó órfão".

Se for falso, apenas o nó será clonado. em si será clonado.

var nó órfão = antigo Node.cloneNode (true

)

• ;

onmouseenter não borbulha, onmouseover borbulha

• monitoramento de evento de teclado comum

• de escuta de evento de formulário comum

• ouvintes de eventos de página comum

quando a caixa Ordem de execução do evento escutando quando aninhado

<p id = "box1">
    <p id = "caixa2">
        <p id = "caixa3"></p>
    </p></p><script>
    var oBox1 = document.getElementById('caixa1');
    var oBox2 = document.getElementById('box2');
    var oBox3 = document.getElementById('box3');
    
    oBox1.onclick=função(){
        console.log('caixa1');
    };
    
    oBox2.onclick=função(){
        console.log('caixa2');
    };
    
    oBox3.onclick=função(){
        console.log('caixa3');
    };
    // Clique na caixa mais interna, a direção de propagação é de dentro para fora</script>

Propagação do evento

A propagação dos eventos é: primeiro de fora para dentro e depois de dentro para fora (a camada mais interna não é capturada primeiro e depois borbulhada, mas é determinada com base na ordem de escrita do código. Caixas com o mesmo nome estão relacionados ao mesmo estágio e ordem. Se o mesmo elemento for definido Se houver dois ou mais eventos com o mesmo nome, o que for escrito posteriormente no nível DOM0 substituirá o que foi escrito primeiro e o nível DOM2 será executado em ordem).

onxxxx (monitoramento de eventos de nível DOM0) pode monitorar apenas o estágio de bolha, portanto, os resultados observados são de dentro para fora

do método addEventListener() (monitoramento de eventos de nível DOM 2)

oBox.addEventListener('click', function() {
 // Aqui está a função de processamento de eventos}, true); // Se o terceiro parâmetro for verdadeiro, ele escutará a fase de captura. Se for falso, ele escutará a fase de bolha

fornecida pela função de processamento de eventos

do objeto de evento

um parâmetro formal, que é um objeto que encapsula Os detalhes deste evento

Este parâmetro geralmente é representado pela palavra evento ou pela letra e

oBox.onmousemove = function (e) {
 //Objeto e é o "objeto de evento" deste evento};

Atributos relacionados ao objeto

• Atributos relacionados à posição do mouse

Atributos da posição do mouse quando este evento é acionado Atributo

• Atributos e .charCode e e.keyCode

O atributo e.charCode é geralmente usado no evento onkeypress para representar o "código do caractere" do caractere inserido pelo usuário .

Código	do caractere
número 0 ~ número 9	48 ~ 57
letras maiúsculas A ~ Z	65 ~ 90
letras minúsculas a ~ z	97 ~ 122

O atributo e.keyCode geralmente é usado em eventos onkeydown e onkeyup para representar o "código de tecla" da tecla pressionada. pelo usuário.

40

Código	de tecla
número 0 ~ número 9	48 ~ 57
letras maiúsculas e minúsculas a ~ z	65 ~ 90
Quatro teclas de direção ← ↑ → ↓	37, 38, 39,
Tecla Enter	13
Tecla de espaço	32

Evita o evento padrão

e O método .preventDefault() é usado para evitar a "ação padrão" gerada pelo evento.

O método e.stopPropagation() é usado para evitar que os eventos continuem a se propagar

• consumirá uma certa quantidade de problemas de desempenho de escuta de eventos

.

• memória do sistema. Adicionar eventos em lotes resultará em muitos monitores e um grande consumo de memória.

evento

consumirá uma certa quantidade de memória do sistema, e adicionar eventos em lotes resultará em muitos ouvintes e em uma grande quantidade. consumo de memória (quando há um grande número de elementos semelhantes que precisam ser adicionados em lotes, a delegação de eventos pode reduzir a sobrecarga de memória. Use

o mecanismo de bolha de eventos para delegar eventos de elementos descendentes para elementos ancestrais

: você não pode delegar elementos não-

ancestrais).

borbulhando eventos para elementos ancestrais

Quando um nó de elemento dinâmico é adicionado à árvore, a delegação de evento pode ser usada para fazer com que os elementos recém-adicionados à árvore tenham

de

A

função do temporizador setInterval() pode chamar uma função repetidamente, com um intervalo fixo entre cada chamada

setInterval(function () {
    // Esta função será chamada automaticamente em um intervalo fixo}, 2000); // O segundo parâmetro é o intervalo, em milissegundos // Esta função pode receber o 3º, 4º... parâmetros, e eles serão passados ​​em ordem. Insira a função setInterval(function (a, b) {
    // O valor do parâmetro formal a é 88, e o valor do parâmetro formal b é 66}, 2000, 88, 66); // A partir do terceiro parâmetro, representa os parâmetros passados ​​para a função // Funções nomeadas podem). também ser passado em setIntervalvar a = 0;
    console.log(++a);};setInterval(fun, 1000);

Limpar o cronômetro

A função clearInterval() pode limpar um cronômetro

// Define o cronômetro e usa a variável timer para receber o cronômetro var timer = setInterval(function ( ) {
    }, 2000);//Quando o botão é clicado, limpa o timer oBtn.onclick = function () {
    clearInterval(timer);

A função do atraso

(

) pode definir um atraso. Quando o tempo especificado terminar, a função será executada uma vez e não será executada repetidamente.

    // Esta função será executada uma vez após 2 segundos}, 2000); clearTimeout(timer); // Limpa o atraso

de forma assíncrona

: não bloqueará a CPU para continuar executando outras instruções. " será executado. (retorno de chamada)

setInterval() e setTimeout() são duas instruções assíncronas

setTimeout(function () {
    console.log('A');}, 2000); // Instrução assíncrona console.log('B'); // A instrução assíncrona não bloqueará a execução normal do programa // A execução

da função BA do resultado acelera

a execução de uma função uma vez Finalmente, a segunda execução é permitida somente após o ciclo de execução ser maior que o período de execução definido

var lock = true function function que precisa de estrangulamento () {;
    // Se o lock for fechado, if(!lock) não será executado return;
    // Instrução principal da função // Lock lock = false;
    
    //Abre o bloqueio após o número especificado de milissegundos setTimeout(function () {
        bloqueio = verdadeiro;
    }, 2000);}

BOM

BOM (Browser Object Model, modelo de objeto do navegador) é a interface para JS interagir com a janela do navegador.

objeto

é a janela na qual o script js atual está sendo executado, e esta janela contém o DOM. estrutura, janela A propriedade .document é o objeto de documento

Em navegadores com funcionalidade de aba, cada aba tem seu próprio objeto de janela, ou seja, abas na mesma janela não compartilharão um objeto de janela

1. .

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

   Isso significa que vários arquivos js compartilham o escopo global, ou seja, os arquivos js não possuem função de isolamento de escopo

2. geralmente são do Windows

.

3. métodos

   como setInterval(), alert() e outras funções integradas são geralmente métodos de janela

Propriedades relacionadas ao tamanho da janela

Para obter a largura da janela sem barras de rolagem, use o document.documentElement.clientWidth

evento de redimensionamento

na janela Após a alteração do tamanho, o evento de redimensionamento será acionado. Você pode usar window.onresize ou window.addEventListener('resize') para vincular o manipulador de eventos.

propriedade window.scrollY

da altura de rolagem

document.documentElement que foi rolado na direção vertical A propriedade .scrollTop também representa a altura de rolagem da janela

. Para melhor compatibilidade do navegador, os dois geralmente são escritos juntos

var scrollTop = window.scrollY || document.documentElement.scrollTop

; documentElement.scrollTop não é somente leitura e window .scrollY é um

evento de rolagem somente leitura.

Depois que a janela for rolada, o evento de rolagem será acionado. vincular a função do manipulador de eventos

Objeto Navigator

A propriedade window.navigator pode recuperar o objeto navigator, que contém os atributos relevantes e

do objeto History

O objeto .history fornece uma interface para operar o histórico da sessão do navegador.

Uma operação comum é simular o botão Voltar do navegador

history.back(); history.go(-1); // Equivalente a Em history.back();

o objeto Location

window.location identifica o URL atual. Você pode comandar o navegador para ir para a página atribuindo um valor a este atributo

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

• Para recarregar a página atual,

  você pode chamar o método reload de localização para recarregar a página atual .

  ​

• ​

  ​

​

​Desse elemento para o

elemento

ancestral

posicionado

.

Uma coleção de "pares de valor-chave", que representa a relação de mapeamento entre atributos e valores

.
    Nome: 'Xiao Ming',
    Idade: 12,
    Sexo: 'masculino',
    

'

, 'programação']

• }

• ;

• O nome do atributo não está em conformidade com a Convenção de Nomeação do Identificador JS, você deve usar colchetes para

• acessar

  .

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

)

;
    A: 10}; obj.b

=

40

;

    A: 1,
    

}

excluir

obj.a

;

    Nome: 'Xiao Ming',
    Idade: 12,
    Sexo: 'masculino',
    Hobbies: ['futebol', 'natação', 'programação'],
    'Livro favorito': 'Shuke and Beta',
    Sayhello: function () {
        console.log ('hello');
    

}

}

;

​

    console.log ('o valor de' atributo ' + k +' é ' + obj [k]);}

clone profundo do objeto

var obj1 = {
    A: 1, 
    B: 2, 
    C: [33, 44, {
        M: 55,
        n: 66,
        P: [77, 88]
    }]}; função DeepClone (O) {
    if (Array.esArray (O)) {
        var resultado = [];
        for (var i = 0; i <o.length; i ++) {
            resultado.push (DeepClone (O [i]));
        }
    } else if (typeof o == 'objeto') {
        var resultado = {};
        para (var k em o) {
            resultado [k] = DeepClone (O [k]);
        }
    } outro {
        var resultado = o;
    }
    Resultado de retorno;}

função

de

contexto

da função

Função

é

chamada

)

;

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

(

1. isso
2. )

3. apontará
   

   para este objeto.

/ {} Isso aponta para este objeto vazio this.a = 3;
    this.b = 5;
    // Adicione automaticamente o retorno tê -lo;} var obj = new Fun (); console.log (

obj

)

;
    este.nome = nome;
    esta.idade = idade;
    this.sex = sexo;} var xiaoming = new People ('' ', 12,' masculino '); var xiaoming = new People (' '', 10, 'feminino'); var xiaogang = novas pessoas ('' ' 'Gangue', 'masculino'

• )
• ; Construa um novo objeto ", as declarações dentro de ele adicionarão várias propriedades e métodos ao novo objeto, completarão a inicialização do objeto

e adicionarão as

pessoas da função do método (nome, idade, sexo) {
    este.nome = nome;
    esta.idade = idade;
    this.sex = sexo;
    this.sayhello = function () {
        console.log ('eu sou' + this.name);
    };} var xiaoming = novas pessoas ('xiaoming', 12, 'masculino'); xiaoming.sayhello (

)

; Por padrão, o atributo do construtor aponta de volta à função

O protótipo do construtor é o protótipo da instância

de pesquisa em cadeia de protótipo

pode acessar as propriedades e métodos de seu protótipo

.
    este.nome = nome;
    esta.idade = idade;
    this.sex = sexo;} pessoas.prototype.nationality = 'China'; (Xiaoming. Nacionalidade);

HasownProperty ()

Este método pode verificar se o objeto realmente "possui" uma determinada propriedade ou método

xiaoming.HasownProperty ('nome');

/

(

'

);

/ true'age 'em xiaoming // true'sex' em xiaoming // true'nationality 'em xiaoming // true

Add métodos em protótipo

desvantagens de adição de métodos diretamente às instâncias: cada instância e a função do método de cada instância são diferentes de memória As funções no método causam um desperdício de memória, que pode ser resolvido escrevendo o método no protótipo.

função pessoas (nome, idade, sexo) {
    este.nome = nome;
    esta.idade = idade;
    this.sex = sexo;} People.prototype.sayhello = function () {
    console.log ('eu sou' + this.name);}; var xiaoming = new People ('xiaoming', 12, 'masculino'); xiaoming.sayhello ()

;

Cadeia de protótipo da matriz

A herança

1. é implementada com a ajuda da cadeia de protótipo,

permitindo que o atributo de protótipo do aluno aponte para a instância da classe pai e, em seguida, adicionando o método do aluno ao protótipo do aluno.

O problema da herança através da cadeia de

• protótipos
• . Muitos atributos definidos pela superclasse.

2. o construtor

com

• elegância.

geralmente

usado

.
    este.nome = nome;
    this.sex = sexo;
    esta.idade = idade;
    this.arr = [1, 2, 3];} Função Student (nome, sexo, idade, escola, sid) {
    People.CALL (isto, nome, sexo, idade);
    this.school = escola ';
    this.sid = sid;} var xiaoming = novo aluno ('xiao ming', 'masculino', 12, 'escola', 123456

3. )

; herança .

​

​

O protótipo herda

o método object.create (), que pode criar um novo objeto com base no objeto especificado como o protótipo (ie9)

var obj2 = object.create (obj1); , {// Não. Os dois parâmetros são um objeto, e os atributos a serem adicionados são escritos nele d: {// O valor do atributo ainda é um valor de objeto: 99 // O valor é 99
    } // você pode mascarar propriedades com o mesmo nome no protótipo});

Quando não há necessidade de "gastar muito esforço" para criar um construtor, mas você só deseja que o novo objeto seja "semelhante" ao objeto existente, você pode usar object.create (), que é chamado de compatibilidade de prototípica herança

object.create () o método de escrita exclusivo

implementa object.create () na versão inferior navegadores

// uma função escrita por Douglas Crockford // a função é usar o como protótipo para criar um novo objeto de função de objeto (o ) {
    // Crie uma função de construtor temporário f () {}
    // Deixe o protótipo deste construtor temporário apontar para O, de modo que o novo objeto que ele cria, __proto__ aponta para O
    F.Prototype = O;
    Retorne novo f ();}

herança parasitária

, que pode "aprimorar o objeto". Atribua novos objetos ao novo objeto

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

Desvantagens:

reduzida

métodos

não

são escritos no protótipo).

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

// pessoas da classe pai pessoas (nome, sexo, idade) {
    este.nome = nome;
    this.sex = sexo;
    esta.idade = idade;
}

Pessoas.prototype.sayhello = function () {
    console.log ("Hello");
}
Pessoas.prototype.sleep = function () {
    console.log ("sono");
}

// Estudante da função da subclasse (nome, sexo, idade, escola, SID) {
    People.CALL (isto, nome, sexo, idade);
    this.school = escola;
    this.sid = sid;
}

HeritPrototype (estudante, pessoas);
    console.log ("Exame");
};

var xiaoming = novo aluno ('xiao ming', 'masculino', 12, 'escola', 123456);

A instância do operador

é usada para detectar "se um objeto é uma instância de uma determinada classe"

Xiaoming Instância de Student // O mecanismo subjacente: verifique se o atributo de Student.Prototype está na cadeia de protótipos da Xiaoming (quantos níveis estão OK, desde que É

o

construtor interno

JavaScript possui muitos construtores internos.

Todos os métodos deste tipo são definidos em seu construtor interno.

A relação entre construtores internos:

objeto.Prototipo é o ponto final da cadeia de protótipo de todas as coisas.

Qualquer função pode ser considerada como função "novo".

Classe de wrapper

Math Object

Math.pow ()

a partir do protótipo de seu construtor

Math.sqrt ()
Math.ceil () // arredondar Math.floor () // redonde

// Calcule o valor máximo da matriz ARR VAR ARR = [3, 6, 9, 2];

math.max.apply

(

null, arr);

2020-12-01 ')

métodos comuns de métodos

Timestamp

.

Timestamp

.

​

​

​(Expressão regular) descreve o "padrão de construção" é frequentemente usado para verificar se uma string está em conformidade com um formato predeterminado. Crie uma expressão regular

1. usando o formulário /内容/ sintaxe

var str = '123456'; var regxp = /^ d {6} $/; if (regxp.text (str)) {
	alert ('conforme as regras');} else {
	alert ('não atende às regras');}

2. forma de novo regexp ('content')

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

metacharacter

. De um símbolo, se houver algum significado especial, você pode adicionar um antes dele para garantir que ele expresse o próprio

símbolo

. Suportes

^ -

​

Quantificador de

os modificadores,

também sinalizadores chamados são usados

regulares

.

a sequência nula.

Encontre

     
// O método search (), assim como o indexOf (), retorna o primeiro índice encontrado, ou -1 se não puder ser encontrado.
var result1 = str.search (/ d+/g);
var result2 = str.search (/m/g);
console.log (resultado1);
console.log (resultado2);

// O método Match () retorna a matriz encontrada.
var result3 = str.match (/ d+/g);
console.log (resultado3);

// Substituir () Método, substitua var result4 = str.Replace (/[AZ] +/G, '*'); ; //*123*4567*89

// Método Split (), divida a string em uma matriz var result5 = str.split (/ d+/g);
console.log (resultado5);