Dichiarare di più variabili in JavaScript

Question

In JavaScript, è possibile dichiarare più variabili in questo modo:

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

... o come questo:

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

è un metodo migliore / più veloce rispetto agli altri?

Answer 1

Il primo modo è più facile da mantenere. Ogni dichiarazione è una singola istruzione su una sola riga, in modo da poter facilmente aggiungere, rimuovere e riordinare le dichiarazioni.

Con il secondo modo, è fastidioso per rimuovere la prima o l'ultima dichiarazione perché contengono la parola var e virgola. E ogni volta che si aggiunge una nuova dichiarazione, si deve cambiare il punto e virgola nella vecchia linea di una virgola.

Answer 2

Oltre manutenibilità, il primo modo elimina la possibilità di incidente creazione variabili globali:

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

Mentre il secondo modo è meno indulgente:

(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

E 'comune l'uso di uno var dichiarazione per ogni ambito per l'organizzazione. Il modo in cui tutti "ambiti" seguono uno schema simile rendere il codice più leggibile. Inoltre, il motore "issa" tutti al top in ogni caso. Quindi, mantenendo le dichiarazioni insieme imita ciò che realmente accadrà più da vicino.

Answer 4

E 'molto più leggibile quando si fa in questo modo:

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

Ma prende meno spazio e linee di codice in questo modo:

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

Può essere l'ideale per risparmiare spazio, ma lasciate compressori JavaScript gestire per voi.

Answer 5

E 'solo una questione di preferenze personali. Non v'è alcuna differenza tra questi due modi, a parte qualche byte salvati con il secondo modulo se si striscia fuori lo spazio bianco.

Answer 6

Forse come questo

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

Tranne quando si cambia la prima o l'ultima variabile è facile da mantenere e leggere.

Answer 7

assegnazione destrutturazione che funziona abbastanza piacevole:

[a, b] = [1, 2] a sarà uguale 1 e b sarà uguale 2.

Answer 8

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

è più leggibile rispetto:

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

Ma che fanno la stessa cosa.

Answer 9

Usa ES6 < strong> assegnamento destrutturato :. sarà decomprimere valori da matrici o oggetti di oggetti, in variabili distinte

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

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

Answer 10

La mia unica, usare ma essenziale per la virgola è in un ciclo for:

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

Sono venuto qui per cercare se questo è OK in JavaScript.

Anche vedendo il lavoro, una domanda rimane se n è locale alla funzione.

Questa verifica, n è locale:

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

Per un momento non ero sicuro, il passaggio tra le lingue.

Answer 11

Anche se entrambi sono validi, utilizzando il secondo scoraggia gli sviluppatori inesperti da collocare dichiarazioni var tutto il luogo e causando problemi di sollevamento. Se v'è un solo var per funzione, nella parte superiore della funzione, allora è più facile per eseguire il debug del codice nel suo complesso. Questo può significare che le linee in cui sono dichiarate le variabili non sono così esplicite come qualcuno potrebbe piacere.

Credo che trade-off è valsa la pena, se questo significa lo svezzamento uno sviluppatore off di far cadere 'var' ovunque si sentono come.

La gente può lamentarsi JSLint, lo faccio pure, ma un sacco di esso è orientata non verso i problemi di fissaggio con la lingua, ma nel correggere le cattive abitudini dei programmatori e quindi prevenire i problemi nel codice che scrivono. Pertanto:

"In linguaggi con ambito blocco, di solito è consigliabile che le variabili siano dichiarate presso il sito del primo utilizzo. Ma poiché JavaScript non ha scopo di blocco, è più saggio di dichiarare tutte le variabili di una funzione nella parte superiore della funzione . si raccomanda che una singola istruzione var essere utilizzato per funzione ". - http://www.jslint.com/lint.html#scope

Answer 12

Credo che sia una questione di preferenze personali. Io preferisco farlo nel seguente modo:

   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

Un altro motivo per evitare la versione singola istruzione (singolo var ) è il debug. Se viene generata un'eccezione in qualsiasi delle linee di assegnazione l'analisi dello stack mostra solo quella riga.

Se trovassi 10 variabili definite con la sintassi comma non si ha modo di conoscere direttamente quale fosse il colpevole.

La versione singola dichiarazione non soffre di questa ambiguità.

Answer 14

Il concetto di "coesione nel Coupling" può essere applicata più in generale di semplici oggetti / moduli / funzioni. Può anche servire in questa situazione:

Il secondo esempio PO suggerito è accoppiato tutte le variabili nella stessa istruzione, il che rende impossibile prendere una delle linee e spostarla altrove senza rompere roba (accoppiamento alto). Il primo esempio ha dato rende le assegnazioni delle variabili indipendenti l'uno dall'altro (accoppiamento basso).

"Low accoppiamento è spesso un segno di un sistema informatico ben strutturato e un buon design, e quando combinato con alta coesione, sostiene gli obiettivi generali di alta leggibilità e la manutenibilità."

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

Quindi, scegliere il primo.

Answer 15

Credo che prima di cominciare usare ES6, l'approccio con la sola dichiarazione var non era né buona né cattiva (nel caso in cui se si dispone di linters e 'use strict'. E 'stato davvero un sapore preferenza. Ma ora le cose sono cambiate per me. Ci sono i miei pensieri in favore della dichiarazione multilinea:

1. Ora abbiamo due nuovi tipi di variabili, e var diventati obsoleti. E 'buona norma usare const ovunque fino a che non ha realmente bisogno let. Quindi molto spesso il codice conterrà dichiarazioni di variabili con assigment nel mezzo del codice, ed a causa del blocco di scoping si spesso si muoverà variabili tra i blocchi in caso di piccoli cambiamenti. Penso che sia più comoda per farlo con le dichiarazioni più righe.

2. sintassi ES6 è diventata più varia, abbiamo ottenuto distruttori, stringhe di modello, le funzioni di direzione e assigments opzionali. Quando si utilizzano pesantemente tutto ciò che caratterizza con le dichiarazioni singole var fa male la leggibilità.

Answer 16

Un vecchio post, lo so, ma per aggiungere un piccolo dettaglio di prospettiva per i compagni Googler:

Il problema manutenibilità può essere abbastanza facilmente superato con un po 'di formattazione, come ad esempio.

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

Io uso questa formattazione rigorosamente come una questione di preferenze personali. Mi salta questo formato per singole dichiarazioni, ovviamente, o dove gengive semplicemente le opere.

Answer 17

Credo che il primo modo (più Vars) è la cosa migliore, come si può altrimenti finire con questo (da un'applicazione che utilizza Knockout), che è difficile da leggere a mio parere:

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