Объявление нескольких переменных в 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 Destructuring assignment : он распаковывает значения из массивов или свойства из объектов в отдельные переменные.

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 переменных, определенных с помощью синтаксиса запятой, у вас нет возможности напрямую узнать, какая из них была виновником.

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

Понятие «Сплоченность через сцепление» может применяться более широко, чем просто объекты / модули / функции. Это может также служить в этой ситуации:

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

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

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

Так что выбирай первый.

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

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

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

Я использую это форматирование строго как личное предпочтение. Я пропускаю этот формат для отдельных объявлений, конечно, или там, где он просто склеивает работы.

Я считаю, что до того, как мы начали использовать ES6, подход с одиночным объявлением var не был ни хорошим, ни плохим (в случае, если у вас есть линтеры и '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;
        });