Объявление нескольких переменных в JavaScript

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

(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!";
var variable2 = "Testing...";
var variable3 = 42;

более читаемо, чем:

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

но они делают то же самое.

может быть, вот так

var variable1 = "hello world"
, variable2 = 2
, variable3 = "how are you doing"
, variable4 = 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");

на мгновение я не был уверен, переключения между языками.

ECMAScript6 интродуцированной реструктуризующее присваивание, который работает довольно хорошо:

[a, b] = [1, 2] a будет равно единице и b будет равно 2.

хотя оба они действительны, использование второго препятствует неопытным разработчикам размещать операторы var повсюду и вызывать проблемы с подъемом. Если есть только один 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 */;

использовать ЕС6 Реструктуризующее присваивание: он будет распаковывать значения из массивов или свойства из объектов в различные переменные.

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

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

понятие "сцепление над сцеплением" может применяться более широко, чем просто объекты/модули/функции. Он также может служить в этой ситуации:

второй пример, предложенный OP, связал все переменные в одно и то же утверждение, что делает невозможным взять одну из линий и переместить ее куда-то еще, не нарушая материал (высокая связь). Первый пример, который он дал, делает переменные назначения независимыми друг от друга (low соединение.)

"низкое соединение часто знак хорошо составленной компьютерной системы и хорошего дизайна, и совмещано с высоким сцеплением, поддерживает общие цели высоких считываемости и ремонтопригодности."

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

поэтому выберите первый.

еще одна причина избежать версии single statement (single var) это отладка. Если возникает исключение любой из строк назначения трассировка стека показывает только одну строку.

Если у вас было 10 переменных, определенных с помощью синтаксиса запятой, у вас нет возможности напрямую узнать, какой из них был виновником.

версия отдельного оператора не страдает от этой двусмысленности.

Я считаю, что до того, как мы начали использовать ES6, подход с одной декларацией var не был ни хорошим, ни плохим (в случае, если у вас есть linters и 'use strict'. Это было действительно вкусовое предпочтение. Но теперь все изменилось. Вот мои мысли в пользу многострочной декларации:

1. теперь у нас есть два новых типа переменных, а var устарели. Это хорошая практика, чтобы использовать const везде, пока вам действительно не нужно let. Поэтому довольно часто код содержат объявления переменных с назначением в середине кода, и из-за области блоков вы довольно часто будете перемещать переменные между блоками в случае небольших изменений. Я думаю, что это более удобно делать с многострочными объявлениями.

2. синтаксис ES6 стал более разнообразным, мы получили деструкторы, строки шаблонов, функции стрелок и необязательные назначения. Когда вы сильно используете все эти функции с одиночными объявлениями var, это больно удобочитаемость.

Я думаю, что первый способ (несколько Варс) лучше, так как вы можете в противном случае закончить с этим (из приложения, которое использует нокаут), который трудно прочитать на мой взгляд:

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