El mejor azúcar sintáctico javascript

Question

Aquí hay 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 que conocemos funciones anónimas, pero poder tratarlas como literales y ejecutarlas en el momento (como un cierre) es genial:

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

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

Answer 1

Obtención de 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");

Answer 2

Prueba de pertenencia a objetos:

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

("a" in props) // true
("b" in props) // true
("c" in props) // false

Answer 3

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

var xml = <elem></elem>;

También puedes sustituir variables:

var elem = "html";
var text = "Some text";
var xml = <{elem}>{text}</{elem}>;

Answer 4

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

var getter, setter;

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

Answer 5

Poder 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;
}

Answer 6

Utilice === para comparar el valor y escriba:

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

if (i == s)  // true

if (i === s) // false

Answer 7

Cadenas multilínea:

var str = "This is \
all one \
string.";

Dado que no puede sangrar las líneas subsiguientes 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 aquí .

Answer 8

Cambiar el tamaño de la longitud de una matriz

propiedad de longitud es no solo de 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.

Answer 9

Repetir una cadena como " - " un número específico 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 repita == 3.

Answer 10

Al igual que el operador predeterminado, || es el operador de protección, & amp; & amp; .

answer = obj && obj.property

a diferencia de

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

Answer 11

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 reemplazar cadenas es útil.

Answer 12

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"

Answer 13

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

check ? value1 : value2

Answer 14

Un poco más sobre el ejemplo de levik:

var foo = (condition) ? value1 : value2;

Answer 15

El Array # forEach en Javascript 1.6

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

Answer 16

Siguiendo obj || {default: true} sintaxis:

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

Answer 17

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 característica de Javascript 1.7 . Así que esos son los navegadores Mozilla 2.0+ y Chrome 6+, en este momento.

Answer 18

Función de flecha invocada de inmediato:

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

Answer 19

Olvidé:

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

Answer 20

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

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

var hasValueOf = !! ({}). valueOf

Bonus de azúcar sintáctica: el doble-no '!!' para convertir casi cualquier cosa en un booleano muy sucintamente.

Answer 21

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 vez para IE, otra vez para Mozilla).

Answer 22

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

  var $ = document.getElementById;

  $('samText');

Answer 23

La clase de fecha de JavaScript proporciona una semi-quot; Fluent Interface " ;. Esto compensa 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 no es realmente un objeto de fecha:

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

Answer 24

Fallback 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) 

Answer 25

Aquí hay uno que acabo de descubrir: comprobació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;

Answer 26

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 idiomas, este sería un código bastante pesado. Los valores predeterminados también son encantadores. Por ejemplo, informes de códigos de error:

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

Answer 27

int a string cast

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

Answer 28

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

Un atajo para eliminar todos los nodos secundarios del elemento.

Answer 29

Convierta la cadena a un entero de forma predeterminada 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

Answer 30

literales de plantilla

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

entonces la variable texto será como abajo!

  

10 + 20 = 30