Лучший синтаксический сахар javascript

Вот некоторые драгоценные камни:

литералы:

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');

по умолчанию:

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

Конечно, мы знаем анонимные функции, но способность обрабатывать их как литералы и выполнять их на месте (как закрытие) отлично:

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

Вопрос: Какой еще отличный синтаксический сахар доступен в javascript?

Ответ 1

Получение текущего datetime в миллисекундах:

Date.now()

Например, ко времени выполнения раздела кода:

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

Ответ 2

Тест на членство в объекте:

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

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

Ответ 3

В Mozilla (и, как сообщается, IE7) вы можете создать константу XML, используя:

var xml = <elem></elem>;

Вы также можете заменить переменные:

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

Ответ 4

Использование анонимных функций и закрытие для создания частной переменной (скрытие информации) и связанных методов get/set:

var getter, setter;

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

Ответ 5

Возможность расширения собственных типов JavaScript через прототипное наследование.

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

Ответ 6

Многострочные строки:

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

Поскольку вы не можете отступать от последующих строк без добавления пробела в строку, люди обычно предпочитают конкатенацию с помощью оператора plus. Но это обеспечивает хороший здесь документ.

Ответ 7

Используйте === для сравнения значений и:

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

if (i == s)  // true

if (i === s) // false

Ответ 8

Изменить размер массива

Свойство

length является не только для чтения. Вы можете использовать его для увеличения или уменьшения размера массива.

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.

Ответ 9

Повторяя строку, например "-", определенное количество раз, используя метод соединения в пустом массиве:

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

Результаты в "---" при повторении == 3.

Ответ 10

Как и оператор по умолчанию, || - это защитный оператор, &&.

answer = obj && obj.property

в отличие от

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

Ответ 11

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

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

обратный вызов для замены строки просто полезен.

Ответ 12

Getters and setters:

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

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

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

Дает нам:

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

Ответ 13

Это не эксклюзивный javascript, но сохраняет как три строки кода:

check ? value1 : value2

Ответ 14

Немного больше на примере levik:

var foo = (condition) ? value1 : value2;

Ответ 15

Array # forEach на Javascript 1.6

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

Ответ 16

Следуя obj || Синтаксис {default: true}:

вызов вашей функции с помощью этого: hello (requiredOne && needTwo && needThree), если один параметр undefined или false, тогда он будет вызывать hello (false), иногда полезно

Ответ 17

При анализе ситуаций с фиксированным набором составных частей:

var str = "John Doe";

Вы можете назначить результаты непосредственно в переменные, используя "назначение деструктуризации" synatx:

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

Это немного читаемо, чем:

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

В качестве альтернативы:

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

Обратите внимание, что это Javascript 1.7. Так что браузер Mozilla 2.0+ и Chrome 6+ в настоящее время.

Ответ 18

Я забыл:

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

Ответ 19

Создайте литерал анонимного объекта с помощью просто: ({})

Пример: нужно знать, имеет ли объект метод valueOf:

var hasValueOf =!! ({}). valueOf

Бонусный синтаксический сахар: двойное-не '!!' для того, чтобы преобразовать почти что угодно в булевое очень сжато.

Ответ 20

Немедленно вызывается функция стрелки:

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

Ответ 21

Мне нравится быть в состоянии eval() json string и возвращать полностью заполненную структуру данных. Я ненавижу писать все как минимум дважды (один раз для IE, снова для Mozilla).

Ответ 22

Приведение часто используемых ключевых слов (или любых методов) к простым переменным типа ths

  var $$ = document.getElementById;

  $$('samText');

Ответ 23

Класс JavaScript, предоставляющий полу- "Свободный интерфейс". Это компенсирует невозможность непосредственного извлечения даты из класса Date:

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

Это не полностью Свободный интерфейс, потому что следующее даст нам только числовое значение, которое на самом деле не является объектом Date:

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

Ответ 24

Резерв по умолчанию:

var foo = {}; // empty object literal

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

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

Практический пример:

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

Ответ 25

Мне нравится, как просто работать со списками:

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

И хеши:

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

В большинстве других языков это будет довольно тяжелый код. Значения по умолчанию также прекрасны. Например, сообщение об ошибке кода:

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

Ответ 26

Здесь я только что обнаружил: null проверить перед вызовом функции:

a = b && b.length;

Это более короткий эквивалент:

a = b ? b.length : null;

Лучшая часть состоит в том, что вы можете проверить цепочку свойств:

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

Ответ 27

int для строкового литья

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

Ответ 28

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

Ярлык для удаления всех дочерних узлов элемента.

Ответ 29

Преобразовать строку в целое значение по умолчанию на 0, если это невозможно,

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

Может быть полезным в некоторых случаях, в основном, когда 0 считается плохим результатом

Ответ 30

Литералы шаблонов

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

тогда переменная текст будет выглядеть как внизу!

10 + 20 = 30