O Javascript em si pode ser considerado uma linguagem simples, mas estamos constantemente melhorando -a com sabedoria e padrões flexíveis. Ontem, aplicamos esses padrões à estrutura JavaScript e hoje essas estruturas direcionam nossos aplicativos da Web novamente. Muitos desenvolvedores iniciantes são atraídos por várias estruturas JavaScript poderosas, mas ignoram as habilidades práticas de JavaScript que são vastas e vastas por trás da estrutura. Este artigo fornecerá uma introdução abrangente aos pontos de conhecimento.
1. Operação de números inteiros JS
Use | 0 e ~~ para converter o ponto flutuante em números inteiros e é mais rápido que a parseint e a matemática semelhantes, o que será útil ao lidar com efeitos como pixels e deslocamentos de animação. Esta é a comparação de desempenho.
var foo = (12.4 / 4.13) | 0; // O resultado é 3VAR bar = ~~ (12.4/4.13); // o resultado é 3
Outro pequeno truque é! ! 2 marcas de exclamação, você pode falar sobre um valor e convertê -lo rapidamente em um valor booleano. Você pode testá -lo!
var eee = "eee"; alerta (!! eee)
O retorno é verdadeiro, o que significa que qualquer valor é precedido por ele! ! Tudo pode ser igual ao verdadeiro. A menos que esse valor seja originalmente um valor booleano, ou seja indefinido, nulo, 0, falso, nan, '', porque os indefinidos, nulos, 0, falsos, nan '' mencionados, estes são originalmente falsos, para que dois sejam adicionados! ! Depois disso, ainda é fasle.
2. Reescreva o alerta nativo e registre o número de caixas pop-up
(function () {var Oldalert = window.alert, count = 0; window.alert = function (a) {count ++; Oldalert (a + "/n você chamou de alerta" + contagem + "vezes agora. pare, é mal!");};}) (); alert ("hello Haorooms");3. Métodos de troca digital não declarando variáveis intermediárias
Ao trocar dois números, nossa abordagem geral é declarar uma variável intermediária, mas a abordagem de hoje é bastante estranha. Você não precisa declarar uma variável intermediária e ver como ela é implementada!
var a = 1, b = 2; a = [b, b = a] [0]; console.log ('a:'+a+', b:'+b); // Saída A: 2, B: 1Que tal isso, esse método tem um novo sentimento?
4. Tudo é um objeto
No mundo do JavaScript, tudo é um objeto. Além de nulos e indefinidos, outros tipos básicos de números, strings e booleanos têm objetos de wrapper correspondentes. Um recurso de um objeto é que você pode chamar métodos diretamente nele.
Para tipos básicos numéricos, ele falhará ao tentar chamar o método da tostragem nele, mas não falhará após ser fechado entre colchetes e depois chamado. A implementação interna é converter o tipo básico em um objeto com o objeto Wrapper correspondente. Então (1) .ToString () é equivalente a um novo número (1) .ToString (). Portanto, você pode realmente usar tipos básicos de números, cordas, booleanos, etc. Como objetos, basta prestar atenção à sintaxe para ser apropriada.
Ao mesmo tempo, notamos que os números em JavaScript não são divididos em ponto flutuante e modelagem. Todos os números são na verdade tipos de pontos flutuantes, apenas omitindo o ponto decimal. Por exemplo, o 1 que você vê pode ser escrito como 1. É por isso que um erro é relatado quando você tenta 1. O objetivo dos colchetes aqui é corrigir o analisador JS e não considerar o ponto após 1 como um ponto decimal. A implementação interna é como mencionado acima, convertendo 1. Para um objeto com um objeto de wrapper e chamando o método.
5. Deformação da declaração if
Quando você precisar escrever uma instrução IF, tente outro método mais fácil, usando operadores lógicos no JavaScript.
var dia = (nova data) .Getday () === 0; // Declaração IF tradicional if (dia) {alert ('hoje é domingo!');}; // use a lógica e substitua o ifday && alert ('hoje é domingo!Por exemplo, o código acima recebe a data de hoje, se for domingo, janela pop-up, caso contrário, nada será feito. Sabemos que há um curto -circuito em operações lógicas. Para lógica e expressões, apenas se ambas forem verdadeiras, o resultado pode ser verdadeiro. Se a variável do dia anterior for considerada falsa, o resultado será falso para toda a expressão; portanto, o alerta subsequente não será continuado. Se o dia anterior for verdadeiro, o código subsequente deve continuar executando o seguinte código para determinar a autenticidade de toda a expressão. Usando esse ponto, o efeito do IF é alcançado.
Para as declarações IF tradicionais, se o código do corpo da execução exceder 1 declaração, os aparelhos encaracolados serão necessários e, usando expressões de vírgula, qualquer barra de código poderá ser executada sem aparelhos encaracolados.
if (conditoína) alerta (1), alerta (2), console.log (3);
6. Use ===, não ==
O operador == (ou! =) Executará automaticamente a conversão do tipo quando necessário. A operação === (ou! ==) não realiza nenhuma conversão. Ele comparará valores e tipos e também é considerado melhor que == em termos de velocidade.
[10] === 10 // é falso [10] == 10 // é true'10 '== 10 // é verdadeiro '10' == 10 // é falso [] == 0 // é verdadeiro [] === 0 // é false '' == false // é verdadeiro, mas verdadeiro == "a" é false '' === // é falso
7. Use o fechamento para implementar variáveis privadas
função pessoa (nome, idade) {this.getName = function () {retorna nome; }; this.setName = function (newName) {name = newName; }; this.getage = function () {retorna idade; }; this.setage = function (newage) {Age = newage; }; // atributos que não são inicializados na ocupação do construtor var; this.getoccupation = function () {return ocupação; }; this.setoccupation = function (newCoc) {ocupação = newocc; };}8. Crie um construtor de objeto
Função Pessoa (FirstName, LastName) {this.firstName = FirstName; this.LastName = LastName;} var saad = new Pessoa ("Saad", "Mousliki");9. Tenha cuidado para usar o tipo de, instância e construtor
var arr = ["a", "b", "c"]; typeof arr; // return "objeto" Arr instância do array // truearr.constructor (); // []
10. Crie uma função de auto-calma
Isso é frequentemente chamado de função anônima auto-invocada ou uma expressão de função de chamada instantânea. Esta é uma função que é executada automaticamente imediatamente após a criação, geralmente a seguinte:
(function () {// algum código privado que será executado automaticamente}) (); (função (a, b) {var resultado = a+b; return resultado;}) (10,20)11. Obtenha um item aleatório da matriz
var itens = [12, 548, 'a', 2, 5478, 'foo', 8852, 'doe', 2145, 119]; var aleatória = itens [math.floor (math.random () * items.length)];
12. Obtenha um número aleatório dentro de um intervalo específico
Este trecho é muito útil quando você deseja gerar dados de teste, como um valor salarial aleatório entre os valores mínimo e máximo.
var x = math.floor (math.random () * (max - min + 1)) + min;
13. Gere uma variedade de números entre 0 e o valor máximo definido
var NumberArray = [], max = 100; para (var i = 1; NumberArray.push (i ++) <max;); // números = [0,1,2,3 ... 100]
14. Gere um número aleatório de sequência alfabética
função generaterandomalphanum (len) {var rdmString = ""; para (; rdmString.length <len; rdmString += Math.random (). ToString (36) .Substr (2)); retornar rdmstring.substr (0, len);} // Chame o método generaterandomalphanum (15);Quinze. Lute uma variedade de números
var numbers = [5, 458 , 120 , -215 , 228 , 400 , 122205, -85411];numbers = numbers.sort(function(){ return Math.random() - 0.5});/* the array numbers will be equal for example to [120, 5, 228, -215, 400, 458, -85411, 122205] */16. Função de acabamento de cordas
String.prototype.trim = function () {return this.replace (/^/s+|/s+$/g, "");};17. Anexar (anexar) uma matriz a outra matriz
var Array1 = [12, "Foo", {Nome: "Joe"}, -2458]; var Array2 = ["Doe", 555, 100]; Array.prototype.push.apply (Array1, Array2); * Array1 será igual a [12, "Foo", {Nome ""18. Converter argumentos objeto em uma matriz
var argarray = array.prototype.slice.call (argumentos); [Nota do tradutor: o objeto de argumentos é um objeto de matriz de classe, mas não uma matriz real]
19. Verifique se os parâmetros são números (número)
função isNumber (n) {return! isnan (parsefloat (n)) && isfinite (n);}20. Verifique se os parâmetros são matrizes
função isarray (obj) {return object.prototype.tostring.call (obj) === '[objeto Array]';}NOTA: Se o método ToString () for substituído, você não obterá o resultado desejado usando essa técnica. Ou você pode usar:
Array.esArray (OBJ); // Este é um novo método de matriz
Se você não estiver usando vários quadros, também poderá usar o método InstanceOf. Mas se você tiver vários contextos, obterá o resultado errado.
var myFrame = document.createElement ('iframe'); document.body.appendchild (myframe); var myarray = window.frames [window.frames.length-1] .array; var arr = new MyArray (a, b, 10); // [a, b, 10] // A instância de não funcionará corretamente, MyArray perde seu construtor // Construtor não é compartilhado entre a instância de Framerr de Array; // false[Nota do tradutor: existem muitas discussões sobre como julgar as matrizes na Internet, você pode pesquisar no Google. Este artigo está escrito em detalhes. 】
21. Obtenha o valor máximo ou mínimo em uma matriz de números
VAR números = [5, 458, 120, -215, 228, 400, 122205, -85411];
var maxinnumbers = math.max.apply (matemática, números);
var mininnumbers = Math.min.Apply (matemática, números);
[Nota do tradutor: Aqui está uma habilidade para passar os parâmetros usando o método function.prototype.apply]
22. Limpe uma matriz
var myarray = [12, 222, 1000]; myArray.length = 0; // MyArray será igual a [].
23. Não use Excluir para excluir itens em uma matriz.
Use emenda em vez de excluir para excluir um item na matriz. O uso do Exclete apenas substitui o item original por indefinido, não o exclui realmente da matriz.
Não use este método:
var itens = [12, 548, 'a', 2, 5478, 'foo', 8852, 'doe', 2154, 119]; items.length; // retorna itens 11DELETE [3]; // retorna trueItems.length; // Retorno 11/ * Os itens serão iguais a [12, 548, "A", indefinido × 1, 5478, "Foo", 8852, indefinido × 1, "Doe", 2154, 119] */
E uso:
var itens = [12, 548, 'a', 2, 5478, 'foo', 8852, 'doe', 2154, 119]; items.length; // retorna 11Items.splice (3,1); items.length; // retorna 10/ * Os itens serão iguais a [12, 548, "A", 5478, "Foo", 8852, indefinido × 1, "Doe", 2154, 119] */
O método de exclusão deve ser usado para excluir a propriedade de um objeto.
24. Use o comprimento para truncar uma matriz
Semelhante à maneira de limpar a matriz acima, usamos o atributo de comprimento para truncar uma matriz.
var myarray = [12, 222, 1000, 124, 98, 10]; MyArray.length = 4; // MyArray será igual a [12, 222, 1000, 124].
Além disso, se você definir o comprimento de uma matriz como um valor maior que o atual, o comprimento da matriz será alterado e um novo item indefinido será adicionado para preenchê -lo. A duração da matriz não é uma propriedade somente leitura.
MyArray.Length = 10; // O novo comprimento da matriz é 10MYARRAY [MyArray.Length - 1]; // indefinido
25. Use os julgamentos lógicos e/ou para fazer julgamentos condicionais
Mesmo (cinco), se a declaração de deformação!
var foo = 10; foo == 10 && Dosomething (); // é equivalente a if (foo == 10) dosomething (); foo == 5 || doSomething (); // é equivalente a if (foo! = 5) dosomething ();
Lógico e também pode ser usado para definir valores padrão para parâmetros de função
função doSomething (arg1) {arg1 = arg1 || 10; // Se o arg1 não estiver definido, o arg1 será definido como 10 por padrão}26. Use o método map () para atravessar itens em uma matriz
var quadrados = [1,2,3,4] .map (função (val) {return val * val;}); // quadrados serão iguais a [1, 4, 9, 16]27. arredondar um número e manter n lugares decimais
var num = 2.443242342; num = num.tofixed (4); // num será igual a 2.4432
28. Problema do número do ponto flutuante
0,1 + 0,2 === 0.3 // é false9007199254740992 + 1 // é igual a 90071992547409929007199254740992 + 2 // é igual a 9007199254740994
Por que isso está acontecendo? 0,1+0,2 é igual a 0,30000000000000000000000004. Você deve saber que todos os números de JavaScript são números de ponto flutuante internamente expresso em binário de 64 bits, cumprindo o padrão IEEE 754. Para mais informações, você pode ler esta postagem do blog. Você pode usar os métodos tofixed () e toprecision () para resolver esse problema.
29. Ao usar o for-in para atravessar as propriedades internas de um objeto, verifique as propriedades.
O snippet de código a seguir pode evitar acessar as propriedades do protótipo ao atravessar uma propriedade de objeto.
for (var nome em objeto) {if (object.HasownProperty (nome)) {// Faça algo com nome}}Trinta, operador de vírgula
var a = 0; var b = (a ++, 99); console.log (a); // a será igual a 1console.log (b); // b é igual a 99
31. Variáveis de cache que precisam ser calculadas e consultadas (cálculo ou consulta)
Para seletores de jQuery, é melhor abastecer esses elementos DOM.
var NAVRIGHT = Document.QuerySelector ('#Right'); var Navleft = document.QuerySelector ('#esquerda'); var NAVUP = document.QuerySelector ('#up'); var Navdown = document.QuerySelector ('#Down'); var NavDown = document.QuerySelector ('#down');32. Verifique os parâmetros antes de chamar Isfinite ()
isfinite (0/0); // falsefinite ("foo"); // falsefinite ("10"); // trueisfinite (10); // trueisfinite (indiferente); // falsefinite (); // falsefinite (nulo); // verdadeiro !!!33. Evite índices negativos nas matrizes
Var NumberArray = [1,2,3,4,5]; var de = NumberArray.Indexof ("Foo"); // de é igual a -1numbersArray.splice (de, 2); // vai retornar [5]Certifique -se de que os parâmetros ao invocar o indexOF não sejam negativos.
34. Serialização e desserialização com base no JSON
var person = {name :'Saad', age : 26, department : {ID : 15, name : "R&D"} };var stringFromPerson = JSON.stringify(person);/* stringFromPerson is equal to "{"name":"Saad","age":26,"department":{"ID":15,"name":"R&D"}}" */var personFromString = Json.parse (stringfromson);/ * PersonFromString é igual ao objeto de pessoa */35. Evite usar os construtores de avaliação () e função
O uso de construtores de avaliação e função é muito caro, porque toda vez que eles chamam o mecanismo de script para converter o código -fonte em código executável.
var func1 = nova função (funçãoCode); var FUNC2 = EVEST (FUNCÇÃOCODE);
36. Evite usar com ()
Usar com () inserirá uma variável global. Portanto, variáveis com o mesmo nome serão substituídas e causarão problemas desnecessários.
37. Evite usar para entrar para atravessar uma matriz
Evite usar este método:
var sum = 0; para (var i em Arraynumbers) {sum += Arraynumbers [i];}Uma maneira melhor é:
var sum = 0; para (var i = 0, len = Arraynumbers.length; i <len; i ++) {sum+= Arraynumbers [i];}O benefício adicional é que os valores das variáveis I e LEN são executados apenas uma vez, o que será mais eficiente do que o seguinte método:
for (var i = 0; i <Arraynumbers.length; i ++)
Por que? Porque Arraynumbers.length é calculado toda vez que o loop é loopado.
38. Passe a função em vez de uma string ao chamar setTimeout () e setInterval ().
Se você passar uma string para setTimeout () ou setInterval (), a string será analisada como se fosse usada com avaliação, o que é muito demorado.
Não use:
SetInterval ('DosomethingPeriodicalmente ()', 1000); setTimeout ('DosomethingAfterfiveSeconds ()', 5000)E uso:
setInterval (doSomethingPeriodicamente, 1000); setTimeout (doSomethingAfterfiveSeconds, 5000);
39. Use declarações de interruptor/caso em vez de uma longa lista de IF/else
Ao julgar que a situação é maior que 2, o uso de comutador/caixa é mais eficiente e mais elegante (mais fácil de organizar o código). Mas não use o switch/caso quando houver mais de 10 julgamentos.
40. Use o interruptor/caso ao julgar o intervalo numérico
Na situação a seguir, é razoável usar o comutador/caixa para determinar o intervalo numérico:
função getCategory (idade) {var category = ""; switch (true) {case isnan (idade): category = "não é uma idade"; quebrar; caso (idade> = 50): categoria = "antigo"; quebrar; caso (idade <= 20): categoria = "bebê"; quebrar; padrão: categoria = "jovem"; quebrar; }; Categoria de retorno;} getCategory (5); // vai devolver "bebê"[Nota do tradutor: de um modo geral, se/else for mais apropriado para julgar o intervalo numérico. Switch/Case é mais adequado para julgamento da determinação do valor]
41. Especifique um objeto de protótipo para o objeto criado
É possível escrever uma função para criar um objeto que especifique os parâmetros como protótipo:
function clone (object) {função oNesHotConstructor () {}; OnShotConstructor.prototype = object; devolver o novo clone (Array) .Prototype; // []42. Uma função de escape html
função escapehtml (text) {var replacements = {"<": "<", ">": ">", "&": "&", "/" ":" ""}; Return text.replace (/[<> & "]/g, function (caractere) {retorna substituições [caracteres];});}43. Evite usar o Try-Catch-finalmente dentro de um loop
Em tempo de execução, cada vez que a cláusula de captura é executada, o objeto de exceção capturado será atribuído a uma variável e, na estrutura Try-Catch-Finalmente, essa variável será criada sempre.
Evite escrever desta maneira:
var object = ['foo', 'bar'], i; para (i = 0, len = object.length; i <len; i ++) {tente {// faça algo que lança uma exceção} catch (e) {// manipulam exceção}}}E uso:
var object = ['foo', 'bar'], i; tente {for (i = 0, len = object.length; i <len; i ++) {// faça algo que lança uma exceção}} catch (e) {// manipulam exceção}44. Defina um tempo limite para xmlHttPrequests.
Depois que uma solicitação XHR leva muito tempo (por exemplo, devido a problemas de rede), pode ser necessário abortar a solicitação, para que você possa usar o setTimeout () para a chamada XHR.
var xhr = novo xmlHttPrequest (); xhr.onreadyStateChange = function () {if (this.readyState == 4) {clearTimeout (timeout); // Faça algo com dados de resposta}} var timeout = setTimeout (function () {xhr.abort (); // Retorno de chamada de erro de chamada}, 60*1000/*tempo limite após um minuto*/); xhr.open ('get', url, true); xhr.send ();Além disso, geralmente você deve evitar as solicitações sincronizadas do AJAX.
Quarenta e cinco. Lidar com o tempo limite do WebSocket
Geralmente, após a criação de uma conexão do WebSocket, se você não estiver ativo, o servidor desconectará (tempo limite) sua conexão após 30 segundos. O firewall também será desconectado após um período de inatividade.
Para evitar problemas de tempo limite, pode ser necessário enviar mensagens vazias para o lado do servidor intermitentemente. Para fazer isso, você pode adicionar as duas funções a seguir em seu código: uma para manter a conexão e a outra para não atingir a conexão. Com esse truque, você pode controlar o problema do tempo limite.
Use um timerid:
var timerID = 0; função keepalive () {var timeout = 15000; if (websocket.readyState == websocket.open) {websocket.send (''); } timerId = setTimeout (Keepalive, Timeout);} função cancelkeepalive () {if (timerId) {canceltimeout (timerId); }}O método keepalive () deve ser adicionado no final do método onopen () da conexão websocket e cancelkeepalive () é adicionado no final do método onclose ().
46. Lembre -se de que os operadores originais são sempre mais eficientes que as chamadas de função. Use baunilas.
Por exemplo, não use:
var min = math.min (a, b); a.push (v);
E uso:
var min = a <b? AB; a [A.Length] = V;
47. De números inteiros, selecione aleatoriamente um valor
Existe a seguinte fórmula, que é muito útil, e nos permite exibir aleatoriamente certas citações ou eventos de notícias famosos!
Valor = math.floor (Math.random () *Número total de valores possíveis+ primeiro valor possível)
Por exemplo: para selecionar um valor entre 2 e 10, podemos escrever assim
var num = Math.floor (Math.random ()*9+2)
Lembre -se da fórmula acima! ~
O uso e a função da barra vertical única do operador JS "|" e o processamento dos dados JS
Agora, ao operar os números inteiros, é equivalente a remover o ponto decimal, parsente. Quando um número positivo é equivalente a math.floor () e quando um número negativo é equivalente a math.ceil () Nota:
1. Math.ceil () é usado como arredondamento ascendente. 2. Math.floor () é usado como arredondado para baixo. 3. Math.Round () Round () comumente usado em matemática. console.log (0.6 | 0) // 0console.log (1.1 | 0) // 1console.log (3.65555 | 0) // 3console.log (5.99999 | 0) // 5console.log (-7.777 | 0) //-7
Nota: Além dos três métodos de matemática para o número de processos, geralmente usamos parseint (), parsefloat (), tofixed () e toprecision (), etc. Uma breve explicação:
O uso do método tofixado é o seguinte:
100.456001.tofixado (2); //100.47100.456001.tofixed(3); //100.456Number.prototype.tofixed.Call(100.456001,2); //100.47
Desvantagens: Após o uso, ele se tornará uma string.
O uso de toprecision é o seguinte:
99.456001.Toprecision (5); //99.456100.456001.toprecision(5); //100.46Number.prototype.toprecision.Call(10.456001,5); //10.456
Regras de operação para barras verticais únicas
Depois de olhar para o exemplo acima, geralmente sabemos que uma única barra vertical pode executar a operação de arredondamento, o que significa que apenas a parte positiva é retida e a parte decimal é removida. No entanto, como é calculado "| 0"? Por que "| 0" pode alcançar o objetivo de arredondar? Qual será a barra vertical única se não for 0?
Com essas perguntas em mente, vejamos o seguinte exemplo:
console.log (3 | 4); //7console.log(4|4); //4console.log(8|3); //11console.log(5.3|4.1); //5console.log(9|3455); // 3455
Parece que não há padrão para encontrar? Pesquise online. http://tools.vevb.com/table/priority
Isso menciona uma única barra vertical "|" Mas não há JavaScript.
Ok, vou anunciar a resposta aqui. De fato, a única barra vertical "|" é o resultado obtido convertendo-o em sistema de 2 dígitos. Por exemplo, vamos dar um exemplo simples:
3 | 4 é convertido em binário e 011 | 100 Adição fornece 111 = 74 | 4 é convertido em binário e 100 | 100 adição fornece 100 = 48 | 3 é convertido em binário e 1000 | 011 Adicionar 1011 = 11
E assim por diante, não vou listá -los um por um aqui. A única barra vertical "|" Operação é o resultado obtido convertendo-o em sistema de 2 dígitos! Você aprendeu tudo?