JavaScript en sí puede considerarse como un lenguaje simple, pero lo estamos mejorando constantemente con sabiduría y patrones flexibles. Ayer aplicamos estos patrones al marco JavaScript, y hoy estos marcos impulsan nuestras aplicaciones web nuevamente. Muchos desarrolladores novatos se sienten atraídos por varios poderosos marcos de JavaScript, pero ignoran las habilidades prácticas de JavaScript que son vastas y vastas detrás del marco. Este artículo le dará una introducción completa a los puntos de conocimiento.
1. Operación de integers JS
Use | 0 y ~~ para convertir el punto flotante en enteros y es más rápido que el parseint y las matemáticas similares, lo que será útil cuando se trata de efectos como píxeles y desplazamientos de animación. Esta es la comparación de rendimiento.
var foo = (12.4 / 4.13) | 0; // El resultado es una barra de 3var = ~~ (12.4/4.13); // El resultado es 3
¡Otro pequeño truco es! ! 2 Marcas de exclamación, puede hablar sobre un valor y convertirlo rápidamente en un valor booleano. ¡Puedes probarlo!
var eee = "eee"; alerta (!! eee)
¡La devolución es verdadera, lo que significa que cualquier valor está precedido por él! ! Todo puede ser igual a verdadero. A menos que este valor sea originalmente un valor booleano, o sea indefinido, nulo, 0, falso, nan '', porque los indefinidos, nulos, 0, falsos, nan '' mencionados, estos son originalmente falsos, ¡por lo que se agregan dos! ! Después de eso, todavía es Fasle.
2. Reescribe la alerta nativa y registre el número de cajas emergentes
(function () {var Oldalert = Window.alert, Count = 0; Window.alert = function (a) {Count ++; Oldalert (a + "/n Has llamado alert" + Count + "Times ahora. ¡Detente, es malvado!");};}) (); alerta ("hola haoroms");3. Métodos de intercambio digital que no declaran variables intermedias
Al intercambiar dos números, nuestro enfoque general es declarar una variable intermedia, pero el enfoque de hoy es bastante extraño. ¡No necesita declarar una variable intermedia y ver cómo se implementa!
var a = 1, b = 2; a = [b, b = a] [0]; console.log ('a:'+a+', b:'+b); // Salida A: 2, B: 1¿Qué tal si este método tiene un nuevo sentimiento?
4. Todo es un objeto
En el mundo de JavaScript, todo es un objeto. Además de NULL e indefinido, otros tipos básicos de números, cadenas y booleanos tienen objetos de envoltura correspondientes. Una característica de un objeto es que puede llamar a los métodos directamente en él.
Para los tipos básicos numéricos, fallará al intentar llamar al método de tostración, pero no fallará después de estar encerrado en los soportes y luego llamado. La implementación interna es convertir el tipo básico en un objeto con el objeto de envoltura correspondiente. Entonces (1) .ToString () es equivalente al nuevo número (1) .ToString (). Por lo tanto, puede usar tipos básicos de números, cadenas, booleanos, etc. Como objetos, solo preste atención a la sintaxis para que sea apropiado.
Al mismo tiempo, notamos que los números en JavaScript no se dividen en un punto flotante y conforman. Todos los números son en realidad tipos de puntos flotantes, solo omitiendo el punto decimal. Por ejemplo, el 1 que ve se puede escribir como 1. Es por eso que se informa un error cuando intenta 1. ToString (), por lo que la forma correcta de escribirlo debería ser así: 1..ToString () o agregar soportes como se mencionó anteriormente. El propósito de los soportes aquí es corregir el analizador JS y no considere el punto después de 1 como un punto decimal. La implementación interna es como se mencionó anteriormente, convirtiendo 1. A un objeto con un objeto de envoltura y luego llamando al método.
5. Deformación de la declaración IF
Cuando necesite escribir una instrucción IF, intente otro método más fácil, utilizando operadores lógicos en JavaScript.
var day = (nueva fecha) .getday () === 0; // tradicional si la declaración if (day) {alert ('¡Hoy es domingo!');}; // use lógica y reemplace ifday && alert ('¡Hoy es domingo!');Por ejemplo, el código anterior primero obtiene la fecha de hoy, si es domingo, ventana emergente, de lo contrario, no se hará nada. Sabemos que hay un cortocircuito en las operaciones lógicas. Para la lógica y las expresiones, solo si ambos son verdaderos, el resultado puede ser verdadero. Si se considera que la variable del día anterior es falsa, entonces el resultado es falso para toda la expresión, por lo que la alerta posterior no continuará. Si el día anterior es cierto, el código posterior debe continuar ejecutando el siguiente código para determinar la autenticidad de toda la expresión. Usando este punto, se logra el efecto de IF.
Para las declaraciones tradicionales de IF, si el código de la ejecución del cuerpo excede la declaración de 1, se requieren aparatos ortopédicos rizados y, utilizando expresiones de coma, cualquier barra de código se puede ejecutar sin aparatos ortopédicos.
if (conditoin) alerta (1), alerta (2), console.log (3);
6. use ===, no ==
El operador == (o! =) Realizará automáticamente la conversión de tipo cuando sea necesario. La operación === (o! ==) no realiza ninguna conversión. Comparará valores y tipos, y también se considera mejor que == en términos de velocidad.
[10] === 10 // es falso [10] == 10 // es true'10 '== 10 // es verdadero'10' == 10 // es falso [] == 0 // es verdadero [] === 0 // es falso '' == falso // es verdadero pero verdadero == "a" falso '' === falso // es falso
7. Use cierres para implementar variables privadas
Function Person (nombre, edad) {this.getName = function () {return name; }; this.setName = function (newName) {name = newname; }; this.getage = function () {return Age; }; this.setage = function (newage) {age = newage; }; // atributos que no se inicializan en la ocupación del constructor var; this.getOccupation = function () {return Ocupation; }; this.SetOccupation = function (Newocc) {Ocupation = Newocc; };}8. Cree un constructor de objetos
Function Person (FirstName, LastName) {this.firstname = firstName; this.lastName = lastName;} var saad = new Person ("saad", "mousliki");9. Tenga cuidado de usar typeof, instanciaf y constructor
var arr = ["a", "b", "c"]; typeof arr; // return "Object" ARR Instance de Array // truearr.Constructor (); // []
10. Crea una función de autocalación
Esto a menudo se llama una función anónima autoinvocada o una expresión de la función de llamada instantánea. Esta es una función que se ejecuta automáticamente inmediatamente después de la creación, generalmente como sigue:
(function () {// algún código privado que se ejecutará automáticamente}) (); (function (a, b) {var result = a+b; return resultado;}) (10,20)11. Obtenga un artículo aleatorio de la matriz
elementos var = [12, 548, 'a', 2, 5478, 'foo', 8852 ,, 'doe', 2145, 119]; var randomitem = elementos [math.floor (math.random () * items.length)];
12. Obtenga un número aleatorio dentro de un rango específico
Este fragmento es muy útil cuando desea generar datos de prueba, como un valor salarial aleatorio entre los valores mínimos y máximos.
var x = math.floor (math.random () * (max - min + 1)) + min;
13. Genere una matriz de números entre 0 y el valor máximo establecido
var numbeArray = [], max = 100; para (var i = 1; númerosarray.push (i ++) <max;); // números = [0,1,2,3 ... 100]
14. Generar un número aleatorio de cadena alfabética
función generadorAndomAlphanum (len) {var rdmstring = ""; para (; rdmstring.length <len; rdmstring += math.random (). toString (36) .substr (2)); return rdmstring.substr (0, len);} // llamar al método generadorandomalphanum (15);Quince. Revolver una matriz de números
Var números = [5, 458, 120, -215, 228, 400, 122205, -85411]; números = números.sort (function () {return math.random () -0.5});/ * Los números de la matriz serán iguales por ejemplo a [120, 5, 228, -215, 400, 458, -85411, 122205]16. Función de ajuste de cadena
String.prototype.trim = function () {return this.replace (/^/s+|/s+$/g, "");};17. Agregar (agregar) una matriz a otra matriz
var array1 = [12 , "foo" , {name: "Joe"} , -2458];var array2 = ["Doe" , 555 , 100];Array.prototype.push.apply(array1, array2);/* array1 will be equal to [12 , "foo" , {name "Joe"} , -2458 , "Doe" , 555 , 100] */18. Convierta el objeto de argumentos en una matriz
var argarray = array.prototype.slice.call (argumentos); [Nota del traductor: el objeto de argumentos es un objeto de matriz de clase, pero no una matriz real]
19. Verifique si los parámetros son números (número)
función isnumber (n) {return! Isnan (parsefloat (n)) && isfinite (n);}20. Verifique si los parámetros son matrices
función isarray (obj) {return object.prototype.ToString.call (obj) === '[Array de objetos]';}Nota: Si se anula el método ToString (), no obtendrá el resultado deseado utilizando esta técnica. O puedes usar:
Array.isArray (obj); // Este es un nuevo método de matriz
Si no está utilizando múltiples marcos, también puede usar el método de instanciaf. Pero si tiene múltiples contextos, obtendrá el resultado incorrecto.
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] // La instancia de no funcionará correctamente, MyArray pierde su constructor // El constructor no se comparte entre la instancia de la matriz de FramesRR; // FALSO[Nota del traductor: hay muchas discusiones sobre cómo juzgar las matrices en Internet, puede buscarlas en Google. Este artículo está escrito en detalle. 】
21. Obtenga el valor máximo o mínimo en una matriz de números
números var = [5, 458, 120, -215, 228, 400, 122205, -85411];
var maxinnumbers = math.max.apply (matemáticas, números);
var mininnumbers = math.min.apply (matemáticas, números);
[Nota del traductor: aquí hay una habilidad para pasar los parámetros utilizando el método functotype.apply]
22. Despeja una matriz
var myArray = [12, 222, 1000]; myArray.length = 0; // myArray será igual a [].
23. No use Eliminar para eliminar los elementos en una matriz.
Use el empalme en lugar de eliminar para eliminar un elemento en la matriz. El uso de Delete simplemente reemplaza el elemento original con indefinido, no lo elimina realmente de la matriz.
No use este método:
elementos var = [12, 548, 'a', 2, 5478, 'foo', 8852, 'doe', 2154, 119]; items.length; // devolver 11 elementos de Delete [3]; // return trueItems.length; // devolver 11/ * Los elementos serán iguales a [12, 548, "A", Undefined × 1, 5478, "Foo", 8852, Undefined × 1, "Doe", 2154, 119] */
Y usar:
elementos var = [12, 548, 'a', 2, 5478, 'foo', 8852, 'doe', 2154, 119]; items.length; // devolver 11Ims.splice (3,1); items.length; // devolver 10/ * Los elementos serán iguales a [12, 548, "A", 5478, "Foo", 8852, Undefined × 1, "Doe", 2154, 119] */
El método Eliminar debe usarse para eliminar la propiedad de un objeto.
24. Use la longitud para truncar una matriz
Similar a la forma de borrar la matriz anterior, usamos el atributo de longitud para truncar una matriz.
var myArray = [12, 222, 1000, 124, 98, 10]; myArray.length = 4; // MyArray será igual a [12, 222, 1000, 124].
Además, si establece la longitud de una matriz a un valor mayor que el actual, se cambiará la longitud de la matriz y se agregará un nuevo artículo indefinido para llenarlo. La longitud de la matriz no es una propiedad de solo lectura.
myArray.length = 10; // La nueva longitud de la matriz es 10 myarray [myArray.length - 1]; // indefinido
25. Use juicios lógicos y/o para hacer juicios condicionales
Lo mismo (cinco), si la declaración de deformación!
var foo = 10; foo == 10 && dosomething (); // es equivalente a if (foo == 10) Dosomething (); foo == 5 || Dosomething (); // es equivalente a if (foo! = 5) dosomething ();
Lógico y también se puede usar para establecer valores predeterminados para los parámetros de función
function dosomething (arg1) {arg1 = arg1 || 10; // Si Arg1 no está configurado, Arg1 se establecerá en 10 por defecto}26. Use el método MAP () para atravesar elementos en una matriz
var cuadros = [1,2,3,4] .map (función (val) {return val * val;}); // Los cuadrados serán iguales a [1, 4, 9, 16]27. Redondee un número y retengan n Decimal Places
var num = 2.443242342; num = num.tofixed (4); // num será igual a 2.4432
28. Problema de número de punto flotante
0.1 + 0.2 === 0.3 // es falso9007199254740992 + 1 // es igual a 90071992547409929007199254740992 + 2 // es igual a 9007199247409994
¿Por qué está sucediendo esto? 0.1+0.2 es igual a 0.300000000000000000000004. Debe saber que todos los números de JavaScript son números de punto flotante internamente expresados en binario de 64 bits, que cumple con el estándar IEEE 754. Para obtener más información, puede leer esta publicación de blog. Puede usar métodos tofixed () y toprecision () para resolver este problema.
29. Cuando se usa For-In para atravesar las propiedades internas de un objeto, verifique las propiedades.
El siguiente fragmento de código puede evitar acceder a las propiedades del prototipo al atravesar una propiedad de objeto.
for (nombre var en objeto) {if (object.hasownproperty (name)) {// haz algo con el nombre}}Treinta, operador de coma
var a = 0; var b = (a ++, 99); console.log (a); // a será igual a 1console.log (b); // b es igual a 99
31. Variables de caché que deben calcularse y consultar (cálculo o consulta)
Para JQuery Selectors, será mejor que almacenemos en caché estos elementos DOM.
var naving = document.querySelector ('#right'); var navleft = document.querySelector ('#izquierda'); var navup = document.queryselector ('#up'); var navdown = document.querySelector ('#down'); var navdown = document.querySelector ('#down');32. Verifique los parámetros antes de llamar a ISFinite ()
isfinite (0/0); // falseisFinite ("foo"); // falseisFinite ("10"); // TrueSfinite (10); // trueSisFinite (nofinado); // falseisFinite (); // FalseisSfinite (nulo); // verdadero !!!33. Evite los índices negativos en las matrices
var numbeArray = [1,2,3,4,5]; var from = NumbersArray.IndexOf ("foo"); // de es igual a -1numbersarray.splice (de, 2); // devolverá [5]Asegúrese de que los parámetros al invocar índicef no sean negativos.
34. Serialización y deserialización basadas en JSON
var persona = {name: 'saad', edad: 26, departamento: {id: 15, nombre: "R&D"}}; var stringfromperson = json.stringify (persona);/ * stringfromPerson es igual a "{" name ":" saad "," edad ": 26," departamento ": {" id ":" nombre ":" R&D "}"} " */VAR */ * * * * * */VAR = var Json.parse (StringfromPerson);/ * PersonfomString es igual al objeto de persona */35. Evite usar los constructores eval () y de la función
El uso de constructores de evaluación y función es muy costoso porque cada vez que llaman al motor de script para convertir el código fuente en código ejecutable.
var func1 = nueva función (functionCode); var func2 = eval (functionCode);
36. Evite usar con ()
Usando con () insertará una variable global. Por lo tanto, las variables con el mismo nombre se sobrescribirán y causarán problemas innecesarios.
37. Evite usar For-In para atravesar una matriz
Evite usar este método:
var sum = 0; para (var i en arraynumbers) {sum += arraynumbers [i];}Una mejor manera es:
var sum = 0; for (var i = 0, len = Arraynumbers.length; i <len; i ++) {sum+= ArrayNumbers [i];}El beneficio adicional es que los valores de las variables I y LEN se ejecutan solo una vez, lo que será más eficiente que el siguiente método:
para (var i = 0; i <arraynumbers.length; i ++)
¿Por qué? Porque ArrayNumbers. La longitud se calcula cada vez que se divide el bucle.
38. Pase la función en lugar de una cadena al llamar a setTimeOut () y setInterval ().
Si pasa una cadena a setTimeOut () o setInterval (), la cadena se analizará como si se usara con Eval, lo cual lleva mucho tiempo.
No use:
setInterval ('dosomthingeryically ()', 1000); setTimeout ('dosomthingefterfiveseConds ()', 5000)Y usar:
setInterval (DosiMeTingperídicamente, 1000); setTimeOut (DosomingeFterFiveseSeconds, 5000);
39. Use declaraciones de interruptor/caso en lugar de una larga lista de if/else
Al juzgar que la situación es mayor que 2, el uso de Switch/Case es más eficiente y más elegante (más fácil de organizar el código). Pero no use Switch/Case cuando hay más de 10 juicios.
40. Use el interruptor/estuche al juzgar el rango numérico
En la siguiente situación, es razonable usar Switch/Case para determinar el rango numérico:
function getCategory (Age) {var categoría = ""; switch (true) {case isnan (edad): categoría = "no es una edad"; romper; caso (edad> = 50): categoría = "Old"; romper; caso (edad <= 20): categoría = "bebé"; romper; predeterminado: categoría = "joven"; romper; }; categoría de retorno;} getCategory (5); // regresará "bebé"[Nota del traductor: en términos generales, si/else será más apropiado para juzgar el rango numérico. Switch/Case es más adecuado para el juicio de determinar el valor]
41. Especifique un objeto prototipo para el objeto creado
Es posible escribir una función para crear un objeto que especifique los parámetros como prototipo:
function clone (object) {function ershotConstructor () {}; OneShotConstrucor.Prototype = Object; return new OneShotConstructor ();} clone (matriz) .prototype; // []42. Una función de escape HTML
function escapeHtml (text) {var replacements = {"<": "<", ">": ">", "&": "&", "/" ":" ""}; return text.replace (/[<> & "]/g, function (carácter) {return reemplazos [carácter];});}43. Evite usar try-capch-finalmente dentro de un bucle
En tiempo de ejecución, cada vez que se ejecuta la cláusula de captura, el objeto de excepción capturado se asignará a una variable, y en la estructura de prueba de captura de prueba finalmente, esta variable se creará cada vez.
Evite escribir de esta manera:
var objeto = ['foo', 'bar'], i; for (i = 0, len = object.length; i <len; i ++) {try {// haz algo que lanza una excepción} capt (e) {// manejar excepción}}}Y usar:
var objeto = ['foo', 'bar'], i; try {for (i = 0, len = object.length; i <len; i ++) {// Haz algo que lanza una excepción}} capt (e) {// manejar excepción}44. Establezca un tiempo de espera para xmlhttprequests.
Después de que una solicitud de XHR tome mucho tiempo (por ejemplo, debido a problemas de red), es posible que deba abortar la solicitud, para que pueda usar SetTimeOut () para la llamada XHR.
var xhr = new xmlhttprequest (); xhr.onreadyStateChange = function () {if (this.readyState == 4) {ClearTimeOut (timeout); // Haga algo con datos de respuesta}} var timeout = setTimeOut (function () {xhr.abort (); // Llame de llamada de error}, 60*1000/*Tiempo de espera después de un minuto*/); xhr.open ('get', url, true); xhr.send ();Además, generalmente debe evitar las solicitudes AJAX sincronizadas por completo.
Cuarenta y cinco. Manejar el tiempo de espera de WebSocket
Por lo general, después de crear una conexión WebSocket, si no está activo, el servidor desconectará (tiempo de espera) su conexión después de 30 segundos. El firewall también se desconectará después de un período de inactividad.
Para evitar problemas de tiempo de espera, es posible que deba enviar mensajes vacíos al lado del servidor de manera intermitente. Para hacer esto, puede agregar las siguientes dos funciones en su código: una para mantener la conexión y la otra para no retirar la conexión. Con este truco, puedes controlar el problema de tiempo de espera.
Use un TimerID:
var timerId = 0; function keepAlive () {var timeOut = 15000; if (webSocket.readyState == WebSocket.open) {WebSocket.send (''); } timerID = setTimeOut (KeepAlive, TimeOut);} function CancelePalive () {if (TimerId) {CANCELTIMEOUT (TIMETERID); }}El método KeepAlive () debe agregarse al final del método OnOpen () de la conexión WebSocket, y Cancelkeepalive () se agrega al final del método OnClose ().
46. Recuerde que los operadores originales son siempre más eficientes que las llamadas de funciones. Use vainillajs.
Por ejemplo, no use:
var min = math.min (a, b); a.push (v);
Y usar:
var min = a <b? ab; a [a.length] = v;
47. Desde enteros, seleccione aleatoriamente un valor
¡Existe la siguiente fórmula, que es muy útil, y nos permite mostrar al azar ciertas citas o eventos de noticias famosos!
Valor = math.floor (math.random () *Número total de valores posibles+ primer valor posible)
Por ejemplo: para seleccionar un valor entre 2 y 10, podemos escribirlo así
var num = Math.floor (Math.random ()*9+2)
¡Recuerde la fórmula anterior! ~
El uso y la función de la barra vertical única del operador JS "|" y el procesamiento de datos JS
Justo ahora, cuando operan los enteros JS, es equivalente a eliminar el punto decimal, analizador. Cuando un número positivo es equivalente a Math.floor (), y cuando un número negativo es equivalente a Math.Ceil () Nota:
1. Math.ceil () se usa como redondeo hacia arriba. 2. Math.floor () se usa como redondeo hacia abajo. 3. Math.round () Round () comúnmente usado en matemáticas. console.log (0.6 | 0) // 0console.log (1.1 | 0) // 1console.log (3.655555 | 0) // 3console.log (5.99999 | 0) // 5console.log (-7.777 | 0) //-7
Nota: Además de los tres métodos de matemáticas para procesar números, a menudo usamos ParseInt (), parsefloat (), tofixed () y toprecision (), etc. Una breve explicación:
El uso del método tofixed es el siguiente:
100.456001.tofijo (2); //100.47100.456001.tofixed(3); //100.456number.prototype.tofixed.call(100.456001,2); //100.47
Desventajas: después de su uso, se convertirá en una cadena.
El uso de Toprecision es el siguiente:
99.456001.Toprecision (5); //99.456100.456001.toprecision(5); //100.46number.prototype.toprecision.call(10.456001,5); //10.456
Reglas de operación para barras verticales individuales
Después de mirar el ejemplo anterior, generalmente sabemos que una sola barra vertical puede realizar una operación de redondeo, lo que significa que solo se retiene la parte positiva y se elimina la parte decimal. Sin embargo, ¿cómo se calcula "| 0"? ¿Por qué puede "| 0" lograr el propósito de redondear? ¿Cuál será la barra vertical única si no es 0?
Con estas preguntas en mente, veamos el siguiente ejemplo:
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 no hay un patrón para encontrar? Buscar en línea. http://tools.vevb.com/table/priority
Esto menciona una sola barra vertical "|" Pero no hay JavaScript.
Ok, anunciaré la respuesta aquí. De hecho, la barra vertical única "|" es el resultado obtenido al convertirlo en sistema de 2 dígitos. Por ejemplo, tomemos un ejemplo simple:
3 | 4 se convierte en binario y 011 | 100 La adición da 111 = 74 | 4 se convierte en binario y 100 | 100 además da 100 = 48 | 3 se convierte en binario y 1000 | 011 además da 1011 = 11
Y así sucesivamente, no los enumeraré uno por uno aquí. La sola barra vertical "|" ¡La operación es el resultado obtenido al convertirlo en sistema de 2 dígitos! ¿Lo has aprendido todo?