javascript - variable - ¿Hay una buena referencia abreviada de JS por ahí?

promises javascript w3schools

Question

Me gustaría incorporar las técnicas abreviadas que existen en mis hábitos de codificación habituales y también poder leerlas cuando las vea en código compacto.

¿Alguien sabe de una página de referencia o documentación que describa las técnicas?

Edición: Anteriormente mencioné los minificadores y ahora tengo claro que las técnicas de tipificación JS minificantes y eficientes son dos conceptos casi totalmente separados.

Answer 1

Obtener el último valor de una matriz

Esto no es realmente una taquigrafía, sino más bien una técnica alternativa más corta a la técnica que la mayoría de la gente usa

Cuando necesito obtener el último valor de una matriz, generalmente uso la siguiente técnica:

var str = ''Example string you actually only need the last word of FooBar'';
var lastWord = str.split('' '').slice(-1)[0];

La parte de .slice(-1)[0] es la técnica de taquigrafía. Esto es más corto en comparación con el método que he visto a casi todos los demás:

var str = ''Example string you actually only need the last word of FooBar'';
var lastWord = str.split('' '');
    lastWord = lastWord[lastWord.length-1];

Probando la velocidad de computación relativa de esta taquigrafía

Para probar esto, hice lo siguiente:

var str = ''Example string you actually only need the last word of FooBar'';
var start = +new Date();
for (var i=0;i<1000000;i++) {var x=str.split('' '').slice(-1)[0];}
console.log(''The first script took'',+new Date() - start,''milliseconds'');

Y luego por separado (para evitar posibles ejecuciones síncronas):

var start2 = +new Date();
for (var j=0;j<1000000;j++) {var x=str.split('' '');x=x[x.length-1];}
console.log(''The second script took'',+new Date() - start,''milliseconds'');

Los resultados:

The first script took 2231 milliseconds
The second script took 8565 milliseconds

Conclusión: No hay desventajas en el uso de esta taquigrafía.

Depuración de taquigrafías

La mayoría de los navegadores admiten variables globales ocultas para cada elemento con un ID. Entonces, si necesito depurar algo, generalmente solo agrego un ID simple al elemento y luego uso mi consola para acceder a través de la variable global. Puede verificarlo usted mismo: simplemente abra la consola aquí mismo, escriba footer y presione intro. Lo más probable es que devuelva el <div id="footer> menos que tenga un navegador raro que no tenga este (no he encontrado ninguno).

Si la variable global ya está ocupada por alguna otra variable, por lo general uso el horrible document.all[''idName''] o document.all.idName . Por supuesto, estoy consciente de que esto está terriblemente desactualizado, y no lo uso en ninguno de mis scripts reales, pero sí lo uso cuando realmente no quiero escribir el document.getElementById(''idName'') completo.getElementById document.getElementById(''idName'') ya que La mayoría de los navegadores lo admiten de todos modos, sí, soy bastante perezoso.

Answer 2

Estás buscando modismos del lenguaje JavaScript.

• Una lista concisa pero no completa: http://ajaxian.com/archives/javascript-idioms-you-need-to-know
• El consejo de Douglas Crockford: http://javascript.crockford.com/style2.html

Sin duda, es interesante echar un vistazo a las novedades de JavaScript 1.6+, pero no podrá utilizar las funciones de lenguaje (por ejemplo, listas de comprensión o la palabra clave de yield ) en la naturaleza debido a la falta de soporte general. Vale la pena aprender sobre las nuevas funciones estándar de la biblioteca si no ha estado expuesto a Lisp o Scheme, sin embargo. Muchas piezas típicas de la programación funcional, como map , reduce y filter() son buenas de conocer y a menudo se muestran en bibliotecas de JavaScript como jQuery; otra función útil es bind ( proxy en jQuery, hasta cierto punto), que es útil cuando se especifican métodos como devoluciones de llamada.

Answer 3

Este repositorio de github está dedicado a las técnicas de ahorro de bytes para Javascript. Me parece bastante práctico!

https://github.com/jed/140bytes/wiki/Byte-saving-techniques

Answer 4

Si por JavaScript también incluye versiones más nuevas que la versión 1.5, entonces también podría ver lo siguiente:

Cierres de expresiones:

JavaScript 1.7 y mayores:

var square = function(x) { return x * x; }

JavaScript 1.8 agregó una notación Lambda abreviada para escribir funciones simples con cierres de expresión :

var square = function(x) x * x;

Reducir () Método:

JavaScript 1.8 también introduce el método reduce() en Arrays:

var total = [0, 1, 2, 3].reduce(function(a, b){ return a + b; });  
// total == 6 

Tarea de destrucción:

En JavaScript 1.7, puede usar la asignación de desestructuración , por ejemplo, para intercambiar valores evitando variables temporales:

var a = 1;  
var b = 3;  

[a, b] = [b, a]; 

Comprensiones de matriz y el método de filtro ():

Los Compromisos de Arrays se introdujeron en JavaScript 1.7 que puede reducir el siguiente código:

var numbers = [1, 2, 3, 21, 22, 30];  
var evens = [];

for (var i = 0; i < numbers.length; i++) {
  if (numbers[i] % 2 === 0) {
    evens.push(numbers[i]);
  }
}

A algo como esto:

var numbers = [1, 2, 3, 21, 22, 30];
var evens = [i for each(i in numbers) if (i % 2 === 0)];

O usando el método filter() en Arrays que se introdujo en JavaScript 1.6:

var numbers = [1, 2, 3, 21, 22, 30];
var evens = numbers.filter(function(i) { return i % 2 === 0; });  

Answer 5

Actualizado con golosinas ECMAScript 2015 (ES6) . Ver en la parte inferior.

Las abreviaturas condicionales más comunes son:

a = a || b     // if a is falsy use b as default
a || (a = b)   // another version of assigning a default value
a = b ? c : d  // if b then c else d
a != null      // same as: (a !== null && a !== undefined) , but `a` has to be defined

Notación literal de objetos para crear objetos y matrices:

obj = {
   prop1: 5,
   prop2: function () { ... },
   ...
}
arr = [1, 2, 3, "four", ...]

a = {}     // instead of new Object()
b = []     // instead of new Array()
c = /.../  // instead of new RegExp()

Tipos incorporados (números, cadenas, fechas, booleanos)

// Increment/Decrement/Multiply/Divide
a += 5  // same as: a = a + 5
a++     // same as: a = a + 1

// Number and Date
a = 15e4        // 150000
a = ~~b         // Math.floor(b) if b is always positive
a = +new Date   // new Date().getTime()

// toString, toNumber, toBoolean
a = +"5"        // a will be the number five (toNumber)
a = "" + 5 + 6  // "56" (toString)
a = !!"exists"  // true (toBoolean)

Declaración de variable:

var a, b, c // instead of var a; var b; var c;

Carácter de la cadena en el índice:

"some text"[1] // instead of "some text".charAt(1);

Estándar abreviado ECMAScript 2015 (ES6)

Estas son adiciones relativamente nuevas, así que no espere un amplio soporte entre los navegadores. Pueden ser soportados por entornos modernos (p. Ej .: newer node.js) o por medio de transpilers. Las versiones "antiguas" continuarán funcionando, por supuesto.

Funciones de flecha

a.map(s => s.length)                    // new
a.map(function(s) { return s.length })  // old

Parámetros de descanso

// new 
function(a, b, ...args) {
  // ... use args as an array
}

// old
function f(a, b){
  var args = Array.prototype.slice.call(arguments, f.length)
  // ... use args as an array
}

Valores de parámetro por defecto

function f(a, opts={}) { ... }                   // new
function f(a, opts) { opts = opts || {}; ... }   // old

Destruccion

var bag = [1, 2, 3]
var [a, b, c] = bag                     // new  
var a = bag[0], b = bag[1], c = bag[2]  // old  

Definición de método dentro de literales de objeto

// new                  |        // old
var obj = {             |        var obj = {
    method() { ... }    |            method: function() { ... }
};                      |        };

Nombres de propiedades calculados dentro de literales de objetos

// new                               |      // old
var obj = {                          |      var obj = { 
    key1: 1,                         |          key1: 5  
    [''key'' + 2]() { return 42 }      |      };
};                                   |      obj[''key'' + 2] = function () { return 42 } 

Bonus: nuevos métodos en objetos incorporados

// convert from array-like to real array
Array.from(document.querySelectorAll(''*''))                   // new
Array.prototype.slice.call(document.querySelectorAll(''*''))   // old

''crazy''.includes(''az'')         // new
''crazy''.indexOf(''az'') != -1    // old

''crazy''.startsWith(''cr'')       // new (there''s also endsWith)
''crazy''.indexOf(''az'') == 0     // old

''*''.repeat(n)                  // new
Array(n+1).join(''*'')           // old 

Bonus 2: las funciones de flecha también hacen que self = this captura sea innecesaria

// new (notice the arrow)
function Timer(){
    this.state = 0;
    setInterval(() => this.state++, 1000); // `this` properly refers to our timer
}

// old
function Timer() {
    var self = this; // needed to save a reference to capture `this`
    self.state = 0;
    setInterval(function () { self.state++ }, 1000); // used captured value in functions
}