Dichiarazione di più variabili in JavaScript

In JavaScript, è possibile dichiarare più variabili come questa:

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

... o così:

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

Un metodo è migliore / più veloce dell'altro?

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

Con il secondo modo, è fastidioso rimuovere la prima o l'ultima dichiarazione perché contengono la varparola chiave e il punto e virgola. E ogni volta che aggiungi una nuova dichiarazione, devi cambiare il punto e virgola nella vecchia riga in una virgola.

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

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

E 'comune l'uso di una vardichiarazione per ogni ambito per l'organizzazione. Il modo in cui tutti gli "ambiti" seguono un modello simile, rendendo il codice più leggibile. Inoltre, il motore li "solleva" comunque tutti verso l'alto. Quindi tenere insieme le dichiarazioni imita ciò che accadrà effettivamente più da vicino.

È molto più leggibile quando lo fai in questo modo:

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

Ma occupa meno spazio e righe di codice in questo modo:

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

Può essere ideale per risparmiare spazio, ma lascia che i compressori JavaScript lo gestiscano per te.

Forse così

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.

È solo una questione di preferenze personali. Non vi è alcuna differenza tra questi due modi, a parte alcuni byte salvati con il secondo modulo se si rimuove lo spazio bianco.

ECMAScript6 ha introdotto un incarico di destrutturazione che funziona piuttosto bene:

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

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

è più leggibile di:

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

Ma fanno la stessa cosa.

Usa assegnazione di distruzione ES6 : decomprimerà i valori dagli array o le proprietà dagli 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

Il mio unico, ma essenziale uso 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 andato qui per cercare se questo è OK in JavaScript.

Anche vedendolo funzionare, è rimasta una domanda se n sia locale alla funzione.

Questo 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 ne ero sicuro, passando da una lingua all'altra.

Sebbene entrambi siano validi, l'uso del secondo scoraggia gli sviluppatori inesperti dal posizionare dichiarazioni var ovunque e causare problemi di sollevamento. Se esiste solo una var per funzione, nella parte superiore della funzione, è più facile eseguire il debug del codice nel suo insieme. Ciò può significare che le righe in cui sono dichiarate le variabili non sono così esplicite come alcuni potrebbero piacere.

Sento che ne è valsa la pena, se ciò vuol dire che uno sviluppatore deve liberare 'var' ovunque si sentano.

Le persone possono lamentarsi di JSLint, lo faccio anche io, ma molte di queste sono orientate non a risolvere problemi con la lingua, ma a correggere cattive abitudini dei programmatori e quindi a prevenire problemi nel codice che scrivono. Perciò:

"Nelle lingue con ambito di blocco, di solito si consiglia di dichiarare le variabili nel sito del primo utilizzo. Ma poiché JavaScript non ha un ambito di blocco, è più saggio dichiarare tutte le variabili di una funzione nella parte superiore della funzione. È ha raccomandato di utilizzare una singola istruzione var per funzione. " - http://www.jslint.com/lint.html#scope

Penso che sia una questione di preferenze personali. Preferisco farlo nel modo seguente:

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

Un altro motivo per evitare la versione della singola istruzione (single var ) è il debug. Se viene generata un'eccezione in una qualsiasi delle righe di assegnazione, la traccia dello stack mostra solo una riga.

Se hai definito 10 variabili con la sintassi della virgola non hai modo di sapere direttamente quale fosse il colpevole.

La versione dell'istruzione individuale non soffre di questa ambiguità.

Il concetto di "coesione rispetto all'accoppiamento" può essere applicato più in generale di semplici oggetti / moduli / funzioni. Può anche servire in questa situazione:

Il secondo esempio suggerito dall'OP ha accoppiato tutte le variabili nella stessa istruzione, il che rende impossibile prendere una delle linee e spostarla da qualche altra parte senza rompere le cose (accoppiamento elevato). Il primo esempio che ha fornito rende le assegnazioni variabili indipendenti l'una dall'altra (accoppiamento basso).

"Il basso accoppiamento è spesso un segno di un sistema informatico ben strutturato e di un buon design e, se combinato con elevata coesione, supporta gli obiettivi generali di alta leggibilità e manutenibilità".

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

Quindi scegli il primo.

Un vecchio post, lo so, ma per aggiungere un piccolo dettaglio di prospettiva per gli altri googler:

Il problema della manutenibilità può essere facilmente risolto con un po 'di formattazione, come tale.

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

Uso questa formattazione rigorosamente come una questione di preferenze personali. Salto questo formato per singole dichiarazioni, ovviamente, o dove semplicemente gengive le opere.

Credo che prima di iniziare a usare ES6, l'approccio con una singola dichiarazione var non era né buono né cattivo (nel caso in cui si avesse linters e 'use strict'. Era davvero la preferenza del gusto. Ma ora le cose sono cambiate per me. Ci sono i miei pensieri a favore della dichiarazione multilinea :

1. Ora abbiamo due nuovi tipi di variabili e siamo vardiventati obsoleti. È buona norma utilizzare constovunque fino a quando non è realmente necessario let. Molto spesso il tuo codice conterrà dichiarazioni di variabili con assegnazione nel mezzo del codice e, a causa dell'ambito dei blocchi, molto spesso sposterai le variabili tra i blocchi in caso di piccole modifiche. Penso che sia più conveniente farlo con dichiarazioni multilinea.

2. La sintassi ES6 è diventata più varia, abbiamo distruttori, stringhe di template, funzioni freccia e assegnazioni opzionali. Quando si utilizza pesantemente tutte queste funzionalità con dichiarazioni var singole, si danneggia la leggibilità.

Penso che il primo modo (più variabili) sia il migliore, poiché altrimenti potresti finire con questo (da un'applicazione che usa Knockout), che a mio avviso è difficile da leggere:

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