resumen - El mejor azúcar sintáctico de JavaScript

lenguaje de programacion 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'');

Defaults:

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 cierre) es genial:

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

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

Answer 1

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

answer = obj && obj.property

Opuesto a

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

Answer 2

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 puedes verificar una cadena de propiedades:

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

Answer 3

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

  var $$ = document.getElementById;

  $$(''samText'');

Answer 4

Cadenas de varias líneas:

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

Como no puede aplicar sangría a las líneas siguientes sin agregar también el espacio en blanco a la cadena, las personas generalmente prefieren concatenar con el operador más. Pero esto proporciona una buena capacidad de documento aquí .

Answer 5

Clase de fecha de JavaScript que proporciona una semi-"interfaz fluida". Esto compensa la imposibilidad de extraer la porción de fecha de una clase Date 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 Date:

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

Answer 6

Convierta la cadena en entero predeterminado en 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 como un mal resultado

Answer 7

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

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

var hasValueOf = !! ({}). valueOf

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

Answer 8

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

var xml = <elem></elem>;

También puedes sustituir variables:

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

Answer 9

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

var str = "John Doe";

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

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 eso es Mozilla 2.0+ y Chrome 6+ navegadores, en este momento.

Answer 10

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

check ? value1 : value2

Answer 11

Función de flecha invocada inmediatamente:

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

Answer 12

Me encanta lo simple 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 de valor 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 13

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 14

Obteniendo el datetime actual como 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 15

Olvidé:

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

Answer 16

Poder extender los tipos de JavaScript nativos a través de herencia prototípica.

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

Answer 17

Prueba de membresía de objeto:

var props = { a: 1, b: 2 }; ("a" in props) // true ("b" in props) // true ("c" in props) // false

Answer 18

Repetir una cadena como "-" un número específico de veces al aprovechar el método de unión en una matriz vacía:

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

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

Answer 19

Respaldo por defecto:

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 20

Siguiendo obj || {default: true} sintaxis:

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

Answer 21

The Array#forEach en Javascript 1.6

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

Answer 22

Un poco más sobre el ejemplo de Levik:

var foo = (condition) ? value1 : value2;

Answer 23

Usa === para comparar el valor y escribe:

var i = 0; var s = "0"; if (i == s) // true if (i === s) // false

Answer 24

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

var getter, setter;

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

Answer 25

int para el molde de cadena

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

Answer 26

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 27

Literales de plantilla

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

¡entonces la variable de texto será como abajo!

10 + 20 = 30

Answer 28

Cambiar el tamaño de la longitud de una matriz

la propiedad de longitud 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 undefined value. A sparse array.

Answer 29

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

Un atajo para eliminar todos los nodos secundarios del elemento.

Answer 30

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