Найкращий синтаксичний цукор 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?

Отримання поточного часу в мілісекундах:

Date.now()

Наприклад, щоб визначити час виконання розділу коду:

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

Перевірка членства в об'єкті:

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

("a" в реквізиті) // true
("b" у реквізиті) // true
("c" у реквізиті) // false

У Mozilla (і, як повідомляється, IE7), ви можете створити константу XML, використовуючи:

var xml = <elem> </elem>;

Ви також можете замінити змінні:

var elem = "html";
var text = "Деякий текст";
var xml = <{elem}> {text} </ {elem}>;

Використання анонімних функцій та закриття для створення приватної змінної (приховування інформації) та пов’язаних методів get / set:

var getter, setter;

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

Можливість розширити власні типи JavaScript за допомогою прототипового успадкування.

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

Використовуйте ===для порівняння значення та типу:

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

if (i == s) // істина

if (i === s) // false

Багаторядні рядки:

var str = "Це \
всі одне \
рядок. ";

Оскільки ви не можете відступити наступні рядки, не додавши також пробіл у рядок, люди, як правило, воліють об’єднуватись з оператором плюс. Але це забезпечує приємну можливість роботи з документами .

Змінити довжину масиву

Властивість 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 empty value. A sparse array.

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

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

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

Як оператор за замовчуванням, ||оператор охоронець &&.

answer = obj && obj.property

на відміну від

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

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

Геттери та сетери :

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"

Це не ексклюзивний javascript, але зберігає як три рядки коду:

check ? value1 : value2

Трохи більше на прикладі Левіка:

var foo = (condition) ? value1 : value2;

Масив # Foreach на Javascript 1.6

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

Після об’єкту || синтаксис {за замовчуванням: true}:

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

У ситуаціях розбору з фіксованим набором складових частин:

var str = "John Doe";

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

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

Функція стрілки, що викликається відразу:

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

Я забув:

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

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

Приклад: потрібно знати, чи мають об’єкти метод valueOf:

var hasValueOf = !! ({}). valueOf

Бонусний синтаксичний цукор: подвійне не "!!" для дуже короткого перетворення майже будь-чого у логічну форму.

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

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

  var $$ = document.getElementById;

  $$('samText');

Клас дати JavaScript, що забезпечує напів- «вільний інтерфейс». Це компенсує неможливість безпосередньо витягти частину дати з класу Date:

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

Це не повністю вільний інтерфейс, оскільки наступне дасть нам лише числове значення, яке насправді не є об’єктом Date:

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

Запасний варіант за замовчуванням:

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) 

Ось одна, яку я щойно виявив: null check перед викликом функції:

a = b && b.length;

Це коротший еквівалент:

a = b ? b.length : null;

Найкраще те, що ви можете перевірити ланцюжок власності:

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

Мені подобається, як просто працювати зі списками:

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

int до рядка

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

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

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

Перетворити рядок на ціле число за замовчуванням у 0, якщо це неможливо,

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

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

Шаблонні літерали

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

тоді текстова змінна буде як нижче!

10 + 20 = 30