El mejor azúcar sintáctico de javascript

Aquí tienes algunas gemas:

Literales:

var obj = {}; // Object literal, equivalent to var obj = new Object();
var arr = []; // Array literal, equivalent to var arr = new Array();
var regex = /something/; // Regular expression literal, equivalent to var regex = new RegExp('something');

Valores predeterminados:

arg = arg || 'default'; // if arg evaluates to false, use 'default', which is the same as:
arg = !!arg ? arg : 'default';

Por supuesto, conocemos funciones anónimas, pero poder tratarlas como literales y ejecutarlas en el acto (como un cierre) es genial:

(function() { ... })(); // Creates an anonymous function and executes it

Pregunta: ¿Qué otro gran azúcar sintáctico está disponible en javascript?

Obtener la fecha y hora actual en milisegundos:

Date.now()

Por ejemplo, para cronometrar la ejecución de una sección de código:

var start = Date.now();
// some code
alert((Date.now() - start) + " ms elapsed");

Prueba de pertenencia a objetos:

var props = {a: 1, b: 2};

("a" en accesorios) // verdadero
("b" en accesorios) // verdadero
("c" en accesorios) // falso

En Mozilla (y según se informa IE7) puede crear una constante XML usando:

var xml = <elem> </elem>;

También puede sustituir variables:

var elem = "html";
var text = "Algún texto";
var xml = <{elem}> {texto} </ {elem}>;

Usando funciones anónimas y un cierre para crear una variable privada (ocultación de información) y los métodos asociados get / set:

var getter, setter;

(function()
{
   var _privateVar=123;
   getter = function() { return _privateVar; };
   setter = function(v) { _privateVar = v; };
})()

Ser capaz de extender los tipos de JavaScript nativos a través de la herencia de prototipos.

String.prototype.isNullOrEmpty = function(input) {
    return input === null || input.length === 0;
}

Úselo ===para comparar valor y tipo:

var i = 0;
var s = "0";

si (i == s) // verdadero

si (i === s) // falso

Cuerdas multilínea:

var str = "Esto es \
todos uno \
cuerda.";

Dado que no puede sangrar las líneas siguientes sin agregar también el espacio en blanco a la cadena, la gente generalmente prefiere concatenar con el operador más. Pero esto proporciona una buena capacidad de documento aquí .

Cambiar el tamaño de la longitud de una matriz

La propiedad length no es de solo lectura . Puede usarlo para aumentar o disminuir el tamaño de una matriz.

var myArray = [1,2,3];
myArray.length // 3 elements.
myArray.length = 2; //Deletes the last element.
myArray.length = 20 // Adds 18 elements to the array; the elements have the empty value. A sparse array.

Repetir una cadena como "-" una cantidad específica de veces aprovechando el método de unión en una matriz vacía:

var s = new Array(repeat+1).join("-");

Resultados en "---" cuando se repite == 3.

Al igual que el operador por defecto, ||es el operador de guardia, &&.

answer = obj && obj.property

Opuesto a

if (obj) {
    answer = obj.property;
}
else {
    answer = null;
}

var tags = {
    name: "Jack",
    location: "USA"
};

"Name: {name}<br>From {location}".replace(/\{(.*?)\}/gim, function(all, match){
    return tags[match];
});

la devolución de llamada para el reemplazo de cadenas es útil.

Getters y setters :

function Foo(bar)
{
    this._bar = bar;
}

Foo.prototype =
{
    get bar()
    {
        return this._bar;
    },

    set bar(bar)
    {
        this._bar = bar.toUpperCase();
    }
};

Nos da:

>>> var myFoo = new Foo("bar");
>>> myFoo.bar
"BAR"
>>> myFoo.bar = "Baz";
>>> myFoo.bar
"BAZ"

Esto no es exclusivo de JavaScript, pero guarda como tres líneas de código:

check ? value1 : value2

Un poco más sobre el ejemplo de levik:

var foo = (condition) ? value1 : value2;

La matriz # forEach en Javascript 1.6

myArray.forEach(function(element) { alert(element); });

Siguiendo obj || Sintaxis {predeterminada: verdadera}:

llamando a su función con esto: hola (needOne && requiredTwo && needThree) si un parámetro no está definido o es falso, llamará hola (falso), a veces útil

En situaciones de análisis con un conjunto fijo de componentes:

var str = "John Doe";

Puede asignar los resultados directamente a las variables, utilizando la "asignación de desestructuración" synatx:

var [fname, lname] = str.split(" ");
alert(lname + ", " + fname);

Que es un poco más legible que:

var a = str.split(" ");
alert(a[1] + ", " + a[0]);

Alternativamente:

var [str, fname, lname] = str.match(/(.*) (.*)/);

Tenga en cuenta que esta es una función de Javascript 1.7 . Así que esos son los navegadores Mozilla 2.0+ y Chrome 6+, en este momento.

Función de flecha inmediatamente invocada:

var test = "hello, world!";
(() => test)(); //returns "hello, world!";

Olvidé:

(function() { ... }).someMethod(); // Functions as objects

Cree un literal de objeto anónimo con simplemente: ({})

Ejemplo: necesito saber si los objetos tienen el método valueOf:

var hasValueOf = !! ({}). valueOf

Azúcar sintáctico adicional: el doble no '!!' para convertir casi cualquier cosa en un booleano de manera muy sucinta.

Me encanta poder evaluar () una cadena json y recuperar una estructura de datos completamente poblada. Odio tener que escribir todo al menos dos veces (una para IE, otra vez para Mozilla).

Asignar las palabras clave de uso frecuente (o cualquier método) a variables simples como ths

  var $$ = document.getElementById;

  $$('samText');

La clase Date de JavaScript proporciona una semi- "Interfaz fluida". Esto compensa el no poder extraer la parte de la fecha de una clase de fecha directamente:

var today = new Date((new Date()).setHours(0, 0, 0, 0));

No es una interfaz completamente fluida porque lo siguiente solo nos dará un valor numérico que en realidad no es un objeto de fecha:

var today = new Date().setHours(0, 0, 0, 0);

Respaldo predeterminado:

var foo = {}; // empty object literal

alert(foo.bar) // will alert "undefined"

alert(foo.bar || "bar"); // will alert the fallback ("bar")

Un ejemplo práctico:

// will result in a type error
if (foo.bar.length === 0)

// with a default fallback you are always sure that the length
// property will be available.
if ((foo.bar || "").length === 0) 

Aquí hay uno que acabo de descubrir: verificación nula antes de llamar a la función:

a = b && b.length;

Este es un equivalente más corto a:

a = b ? b.length : null;

La mejor parte es que puede verificar una cadena de propiedades:

a = b && b.c && b.c.length;

Me encanta lo sencillo que es trabajar con listas:

var numberName = ["zero", "one", "two", "three", "four"][number];

Y hashes:

var numberValue = {"zero":0, "one":1, "two":2, "three":3, "four":4}[numberName];

En la mayoría de los otros lenguajes, este código sería bastante pesado. Los valores predeterminados también son encantadores. Por ejemplo, informe de códigos de error:

var errorDesc = {301: "Moved Permanently",
                 404: "Resource not found",
                 503: "Server down"
                }[errorNo] || "An unknown error has occurred";

int to string cast

var i = 12;
var s = i+"";

element.innerHTML = "";  // Replaces body of HTML element with an empty string.

Un atajo para eliminar todos los nodos secundarios del elemento.

Convierta la cadena a un entero por defecto a 0 si es imposible,

0 | "3" //result = 3
0 | "some string" -> //result = 0
0 | "0" -> 0 //result = 0

Puede ser útil en algunos casos, principalmente cuando 0 se considera un mal resultado

Literales de plantilla

var a = 10;
var b = 20;
var text = `${a} + ${b} = ${a+b}`;

¡entonces la variable de texto será como la siguiente!

10 + 20 = 30