Декларування декількох змінних у JavaScript

У JavaScript можна оголосити кілька змінних на зразок цієї:

var variable1 = "Hello World!";
var variable2 = "Testing...";
var variable3 = 42;

... або так:

var variable1 = "Hello World!",
    variable2 = "Testing...",
    variable3 = 42;

Чи один метод кращий / швидший за інший?

Перший спосіб простіше у догляді. Кожна декларація - це одне твердження в одному рядку, тому ви можете легко додавати, видаляти та упорядковувати декларації.

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

Окрім ремонтопридатності, перший спосіб виключає можливість створення глобальних змінних:

(function () {
var variable1 = "Hello World!" // semicolon is missed out accidently
var variable2 = "Testing..."; // still a local variable
var variable3 = 42;
}());

Хоча другий спосіб менш прощаючий:

(function () {
var variable1 = "Hello World!" // comma is missed out accidently
    variable2 = "Testing...", // becomes a global variable
    variable3 = 42; // a global variable as well
}());

Загальноприйнято використовувати одне varтвердження на область дії для організації. Те, як усі "області" дотримуються подібної схеми, робить код більш читабельним. Крім того, двигун "піднімає" їх усіх до верху в будь-якому випадку. Тому тримання ваших декларацій разом імітує те, що насправді відбуватиметься ближче.

Це набагато легше читати, коли робити це так:

var hey = 23;
var hi = 3;
var howdy 4;

Але займає менше місця та рядків коду таким чином:

var hey=23,hi=3,howdy=4;

Це може бути ідеально для економії місця, але нехай JavaScript компресори обробляють це за вас.

Можливо, так

var variable1 = "hello world"
, variable2 = 2
, variable3 = "how are you doing"
, variable4 = 42;

За винятком зміни першої чи останньої змінної, її легко підтримувати та читати.

Це лише питання особистої переваги. Немає різниці між цими двома способами, крім кількох байтів, збережених за допомогою другої форми, якщо викреслити пробіл.

ECMAScript6 представив завдання руйнування, яке працює дуже добре:

[a, b] = [1, 2] aбуде рівним 1і bбуде рівним 2.

var variable1 = "Hello World!";
var variable2 = "Testing...";
var variable3 = 42;

читабельніше, ніж:

var variable1 = "Hello World!",
    variable2 = "Testing...",
    variable3 = 42;

Але вони роблять те саме.

Використовуйте призначення деструктуризації ES6 : воно розпакує значення з масивів або властивості з об'єктів у різні змінні.

let [variable1 , variable2, variable3] = 
["Hello World!", "Testing...", 42];

console.log(variable1); // Hello World!
console.log(variable2); // Testing...
console.log(variable3); // 42

Моє єдине, але істотне використання для коми - це цикл for:

for (var i = 0, n = a.length; i < n; i++) {
  var e = a[i];
  console.log(e);
}

Я пішов сюди, щоб перевірити, чи це добре в JavaScript.

Навіть побачивши, що це працює, залишається питання, чи n є локальним для функції.

Це підтверджує, n є локальним:

a=[3,5,7,11];
(function l () { for (var i = 0, n = a.length; i < n; i++) {
  var e = a[i];
  console.log(e);
}}) ();
console.log(typeof n == "undefined" ?
  "as expected, n was local" : "oops, n was global");

На якусь мить я не був впевнений, перемикаючись між мовами.

Хоча обидва є дійсними, використання другого відштовхує недосвідчених розробників від розміщення заявок var у будь-якому місці та викликає проблеми з підйомом. Якщо у верхній частині функції є лише один var на функцію, тоді простіше налагодити код у цілому. Це може означати, що рядки, де оголошуються змінні, не настільки явні, як це може хотіти.

Я відчуваю, що компроміс того вартий, якщо це означає відлучення розробника від відмови від "вару" де завгодно.

Люди можуть скаржитися на JSLint, я теж роблю, але багато з них спрямовані не на вирішення проблем з мовою, а на виправлення шкідливих звичок кодерів і, таким чином, запобігання проблем у коді, який вони пишуть. Тому:

"У мовах з областю блоку зазвичай рекомендується оголошувати змінні на місці першого використання. Але оскільки у JavaScript немає області блоку, розумніше оголошувати всі змінні функції у верхній частині функції. Це рекомендується використовувати одне оператор var для функції. " - http://www.jslint.com/lint.html#scope

Я думаю, що це питання особистих уподобань. Я вважаю за краще це робити наступним чином:

   var /* Vars */
            me = this, that = scope,
            temp, tempUri, tempUrl,
            videoId = getQueryString()["id"],
            host = location.protocol + '//' + location.host,
            baseUrl = "localhost",
            str = "Visit W3Schools",
            n = str.search(/w3schools/i),
            x = 5,
            y = 6,
            z = x + y
   /* End Vars */;

Ще одна причина, щоб уникнути версії одного оператора (single var ) - це налагодження. Якщо в будь-якому з рядків присвоєння викинуто виняток, слід стека показує лише один рядок.

Якщо у вас було визначено 10 змінних із синтаксисом комами, у вас немає способу безпосередньо знати, хто з них був винуватцем.

Індивідуальна версія твердження не зазнає цієї неоднозначності.

Поняття "Згуртованість над сполученням" може бути застосоване більш загально, ніж просто об'єкти / модулі / функції. Він також може послужити в цій ситуації:

Другий приклад, запропонований ОП, поєднав усі змінні в одне і те ж твердження, що унеможливлює взяти один з рядків і перемістити його кудись інше, не порушуючи речі (високе з'єднання). Перший приклад, який він наводить, робить призначення змінних незалежними один від одного (низьке з'єднання).

"Низьке з'єднання часто є ознакою добре структурованої комп'ютерної системи та гарного дизайну, а в поєднанні з високою згуртованістю підтримує загальні цілі високої читабельності та ремонтопридатності".

http://en.wikipedia.org/wiki/Coupling_(computer_programming)

Тому вибирайте перший.

Я знаю, старий пост, але щоб додати невелику детальну точку зору для колег Googlers:

Питання щодо ремонту може бути досить легко подолано за допомогою невеликого форматування, як-от такого.

let
  my_var1 = 'foo',
  my_var2 = 'bar',
  my_var3 = 'baz'
;

Я використовую це форматування строго як особисті переваги. Я, звичайно, пропускаю цей формат для одиночних декларацій або там, де він просто придушує твори.

Я вважаю, що до того, як ми почали використовувати ES6, підхід з єдиною вар-декларацією не був ані хорошим, ані поганим (на випадок, якщо у вас є літери і 'use strict'. Це було справді перевагу смаку. Але тепер для мене змінилися речі. Є мої думки на користь багаторядкової декларації :

1. Зараз у нас є два нові види змінних, які varзастаріли. Корисно використовувати constвсюди, поки вам справді не потрібно let. Тому досить часто ваш код буде містити декларації змінних з присвоєнням посередині коду, і через обсяг блоку ви досить часто будете переміщувати змінні між блоками у разі невеликих змін. Я вважаю, що це більш зручно робити з багаторядковими деклараціями.

2. Синтаксис ES6 став більш різноманітним, ми отримали деструктори, рядки шаблонів, функції зі стрілками та додаткові призначення. Якщо ви активно використовуєте все, що є одним із оголошень var, це шкодить читабельності.

Я думаю, що перший спосіб (кілька варіантів) найкращий, оскільки в іншому випадку ви можете закінчити це (з програми, яка використовує Knockout), яку важко прочитати на мою думку:

    var categories = ko.observableArray(),
        keywordFilter = ko.observableArray(),
        omniFilter = ko.observable('').extend({ throttle: 300 }),
        filteredCategories = ko.computed(function () {
            var underlyingArray = categories();
            return ko.utils.arrayFilter(underlyingArray, function (n) {
                return n.FilteredSportCount() > 0;
            });
        }),
        favoriteSports = ko.computed(function () {
            var sports = ko.observableArray();
            ko.utils.arrayForEach(categories(), function (c) {
                ko.utils.arrayForEach(c.Sports(), function (a) {
                    if (a.IsFavorite()) {
                        sports.push(a);
                    }
                });
            });
            return sports;
        }),
        toggleFavorite = function (sport, userId) {
            var isFavorite = sport.IsFavorite();

            var url = setfavouritesurl;

            var data = {
                userId: userId,
                sportId: sport.Id(),
                isFavourite: !isFavorite
            };

            var callback = function () {
                sport.IsFavorite(!isFavorite);
            };

            jQuery.support.cors = true;
            jQuery.ajax({
                url: url,
                type: "GET",
                data: data,
                success: callback
            });
        },
        hasfavoriteSports = ko.computed(function () {
            var result = false;
            ko.utils.arrayForEach(categories(), function (c) {
                ko.utils.arrayForEach(c.Sports(), function (a) {
                    if (a.IsFavorite()) {
                        result = true;
                    }
                });
            });
            return result;
        });