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

Question

Вот несколько драгоценных камней:

Литералы:

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?

Answer 1

Получение текущей даты и времени в миллисекундах:

Date.now()

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

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

Answer 2

Тест на принадлежность к объекту:

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

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

Answer 3

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

var xml = <elem></elem>;

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

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

Answer 4

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

var getter, setter;

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

Answer 5

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

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

Answer 6

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

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

if (i == s)  // true

if (i === s) // false

Answer 7

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

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

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

Answer 8

Изменение размера длины массива

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

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

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

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

Приводит к "---" при повторении == 3.

Answer 10

Как оператор по умолчанию, || является оператором охраны, &&.

answer = obj && obj.property

в отличие от

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];
});

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

Answer 12

Добытчики и сеттеры:

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"

Answer 13

Это не эксклюзив javascript, но экономит примерно три строки кода:

check ? value1 : value2

Answer 14

Еще немного на примере левика:

var foo = (condition) ? value1 : value2;

Answer 15

В Массив#forEach на Javascript 1.6

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

Answer 16

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

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

Answer 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+.

Answer 18

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

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

Answer 19

Я забыл:

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

Answer 20

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

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

var имеет значение = !!({}).valueOf

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

Answer 21

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

Answer 22

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

  var $$ = document.getElementById;

  $$('samText');

Answer 23

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

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

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

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

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

Answer 25

Вот один из них, который я только что обнаружил:проверка на нуль перед вызовом функции:

a = b && b.length;

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

a = b ? b.length : null;

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

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

Answer 26

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

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";

Answer 27

приведение int к строке

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

Answer 28

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

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

Answer 29

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

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

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

Answer 30

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

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

затем в текст переменная будет такой, как показано ниже!

10 + 20 = 30