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

Question

В JavaScript можно объявить несколько переменных следующим образом:

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

...или вот так:

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

Является ли один метод лучше/быстрее другого?

Answer 1

Первый способ проще в обслуживании.Каждое объявление представляет собой отдельный оператор в одной строке, поэтому вы можете легко добавлять, удалять и изменять порядок объявлений.

При втором способе удаление первого или последнего объявления раздражает, поскольку они содержат var ключевое слово и точка с запятой.И каждый раз, когда вы добавляете новое объявление, вам придется заменить точку с запятой в старой строке на запятую.

Answer 2

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

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

Answer 3

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

Answer 4

Гораздо читабельнее, если сделать это следующим образом:

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

Но такой способ занимает меньше места и строк кода:

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

Это может быть идеально для экономии места, но пусть компрессоры JavaScript сделают это за вас.

Answer 5

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

Answer 6

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

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

За исключением случаев изменения первой или последней переменной, ее легко поддерживать и читать.

Answer 7

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

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

Answer 8

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

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

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

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

Answer 9

Использовать ES6 Деструктуризация задания :Он распакует значения из массивов или свойства объектов в отдельные переменные.

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

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

Answer 10

Единственное, но важное использование запятой — в цикле 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");

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

Answer 11

Хотя оба варианта допустимы, использование второго не позволяет неопытным разработчикам размещать операторы var повсюду и вызывать проблемы с подъемом.Если для каждой функции есть только одна переменная в верхней части функции, то легче отлаживать код в целом.Это может означать, что строки, в которых объявляются переменные, не настолько явны, как некоторым может показаться.

Я считаю, что компромисс того стоит, если это означает отучить разработчика отбрасывать «var» где угодно.

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

«В языках с блочной областью действия обычно рекомендуется объявлять переменные на месте первого использования.Но поскольку в JavaScript нет блочной области видимости, разумнее объявить все переменные функции в верхней части функции.Рекомендуется использовать один оператор var для каждой функции." - http://www.jslint.com/lint.html#scope

Answer 12

Я думаю, это вопрос личных предпочтений.Я предпочитаю делать это следующим образом:

   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 */;

Answer 13

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

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

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

Answer 14

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

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

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

http://en.wikipedia.org/wiki/Coupling_(компьютерное_программирование)

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

Answer 15

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

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

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

Answer 16

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

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

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

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

Answer 17

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