Khai báo nhiều biến trong JavaScript

Trong JavaScript, có thể khai báo nhiều biến như thế này:

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

... Hoặc như thế này:

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

Là một phương pháp tốt hơn / nhanh hơn phương pháp khác?

Cách đầu tiên là dễ dàng hơn để duy trì. Mỗi khai báo là một câu lệnh trên một dòng duy nhất, vì vậy bạn có thể dễ dàng thêm, xóa và sắp xếp lại các khai báo.

Với cách thứ hai, thật khó chịu khi xóa khai báo đầu tiên hoặc cuối cùng vì chúng chứa vartừ khóa và dấu chấm phẩy. Và mỗi khi bạn thêm một khai báo mới, bạn phải thay đổi dấu chấm phẩy trong dòng cũ thành dấu phẩy.

Bên cạnh khả năng bảo trì, cách đầu tiên giúp loại bỏ khả năng tạo ra các biến toàn cầu tai nạn:

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

Trong khi cách thứ hai ít tha thứ hơn:

(function () {
var variable1 = "Hello World!" // comma is missed out accidently
    variable2 = "Testing...", // becomes a global variable
    variable3 = 42; // a global variable as well
}());

Nó là phổ biến để sử dụng mộtvar tuyên bố cho mỗi phạm vi cho tổ chức. Cách tất cả các "phạm vi" theo một mô hình tương tự làm cho mã dễ đọc hơn. Ngoài ra, động cơ "nâng" tất cả chúng lên đầu dù thế nào đi nữa. Vì vậy, giữ cho các tuyên bố của bạn cùng bắt chước những gì thực sự sẽ xảy ra chặt chẽ hơn.

Nó dễ đọc hơn nhiều khi làm theo cách này:

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

Nhưng mất ít không gian và dòng mã theo cách này:

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

Nó có thể lý tưởng để tiết kiệm không gian, nhưng hãy để máy nén JavaScript xử lý nó cho bạn.

Có lẽ như thế này

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

Ngoại trừ khi thay đổi biến đầu tiên hoặc biến cuối, nó rất dễ duy trì và đọc.

Đó chỉ là vấn đề sở thích cá nhân. Không có sự khác biệt giữa hai cách này, ngoài một vài byte được lưu với dạng thứ hai nếu bạn loại bỏ khoảng trắng.

ECMAScript6 đã giới thiệu bài tập hủy diệt hoạt động khá hay:

[a, b] = [1, 2] asẽ bằng 1và bsẽ bằng 2.

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

dễ đọc hơn:

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

Nhưng họ làm điều tương tự.

Sử dụng ES6 phân Destructuring : Nó sẽ giải nén các giá trị từ mảng, hoặc tài sản từ các đối tượng, vào biến rõ rệt.

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

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

Việc sử dụng duy nhất nhưng cần thiết cho dấu phẩy của tôi là trong một vòng lặp for:

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

Tôi đã đến đây để tìm kiếm xem điều này có ổn trong JavaScript không.

Ngay cả khi nhìn thấy nó hoạt động, một câu hỏi vẫn còn cho dù n là cục bộ của hàm.

Điều này xác minh, n là cục bộ:

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

Trong một khoảnh khắc tôi không chắc chắn, chuyển đổi giữa các ngôn ngữ.

Mặc dù cả hai đều hợp lệ, việc sử dụng lần thứ hai không khuyến khích các nhà phát triển thiếu kinh nghiệm đặt các câu lệnh var ở khắp mọi nơi và gây ra các vấn đề nâng hàng. Nếu chỉ có một var cho mỗi hàm, ở đầu hàm, thì việc gỡ lỗi mã sẽ dễ dàng hơn. Điều này có thể có nghĩa là các dòng nơi các biến được khai báo không rõ ràng như một số có thể thích.

Tôi cảm thấy rằng sự đánh đổi là xứng đáng, nếu điều đó đồng nghĩa với việc loại bỏ một nhà phát triển khỏi việc bỏ 'var' bất cứ nơi nào họ cảm thấy thích.

Mọi người có thể phàn nàn về JSLint, tôi cũng vậy, nhưng rất nhiều trong số đó không hướng đến việc khắc phục các vấn đề với ngôn ngữ, mà là sửa chữa các thói quen xấu của các lập trình viên và do đó ngăn chặn các vấn đề trong mã họ viết. Vì thế:

"Trong các ngôn ngữ có phạm vi khối, người ta thường khuyến nghị các biến được khai báo tại trang sử dụng đầu tiên. Nhưng vì JavaScript không có phạm vi khối, nên khôn ngoan hơn khi khai báo tất cả các biến của hàm ở đầu hàm. Đó là khuyến nghị rằng một câu lệnh var được sử dụng cho mỗi hàm. " - http://www.jslint.com/lint.html#scope

Tôi nghĩ đó là vấn đề sở thích cá nhân. Tôi thích làm theo cách sau:

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

Một lý do khác để tránh phiên bản câu lệnh đơn ( var ) là gỡ lỗi. Nếu một ngoại lệ được ném trong bất kỳ dòng gán nào, dấu vết ngăn xếp chỉ hiển thị một dòng.

Nếu bạn có 10 biến được xác định bằng cú pháp dấu phẩy, bạn không có cách nào để biết trực tiếp biến nào là thủ phạm.

Phiên bản tuyên bố cá nhân không bị sự mơ hồ này.

Khái niệm "Sự gắn kết trên khớp nối" có thể được áp dụng chung hơn là chỉ các đối tượng / mô-đun / chức năng. Nó cũng có thể phục vụ trong tình huống này:

Ví dụ thứ hai mà OP đề xuất đã ghép tất cả các biến vào cùng một câu lệnh, điều này khiến cho không thể lấy một trong các dòng và di chuyển nó đến một nơi khác mà không phá vỡ công cụ (khớp nối cao). Ví dụ đầu tiên ông đưa ra làm cho các phép gán biến độc lập với nhau (khớp nối thấp).

"Khớp nối thấp thường là dấu hiệu của một hệ thống máy tính có cấu trúc tốt và thiết kế tốt, và khi kết hợp với sự gắn kết cao, sẽ hỗ trợ các mục tiêu chung về khả năng đọc và bảo trì cao."

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

Vì vậy, chọn cái đầu tiên.

Một bài viết cũ, tôi biết, nhưng để thêm một chi tiết nhỏ về phối cảnh cho các nhân viên Google:

Vấn đề bảo trì có thể được khắc phục khá dễ dàng với một chút định dạng, như vậy.

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

Tôi sử dụng định dạng này một cách nghiêm ngặt như một vấn đề sở thích cá nhân. Tôi bỏ qua định dạng này cho các khai báo đơn, tất nhiên, hoặc nơi nó chỉ đơn giản là tổng hợp các tác phẩm.

Tôi tin rằng trước khi chúng tôi bắt đầu sử dụng ES6, cách tiếp cận với khai báo var duy nhất không tốt cũng không xấu (trong trường hợp nếu bạn có linters và 'use strict'. Đó thực sự là sở thích của tôi. Nhưng bây giờ mọi thứ đã thay đổi đối với tôi. :

1. Bây giờ chúng ta có hai loại biến mới và vartrở nên lỗi thời. Đó là thực hành tốt để sử dụng constở mọi nơi cho đến khi bạn thực sự cần let. Vì vậy, khá thường xuyên, mã của bạn sẽ chứa các khai báo biến với phân tích ở giữa mã và do phạm vi khối, bạn sẽ thường xuyên di chuyển các biến giữa các khối trong trường hợp có thay đổi nhỏ. Tôi nghĩ rằng sẽ thuận tiện hơn khi làm điều đó với các tuyên bố đa dòng.

2. Cú pháp ES6 trở nên đa dạng hơn, chúng tôi có các hàm hủy, chuỗi mẫu, hàm mũi tên và các xác nhận tùy chọn. Khi bạn sử dụng nhiều tất cả các tính năng đó với các khai báo var đơn, điều đó làm tổn thương khả năng đọc.

Tôi nghĩ rằng cách đầu tiên (nhiều vars) là tốt nhất, vì nếu không bạn có thể kết thúc bằng cách này (từ một ứng dụng sử dụng Knockout), rất khó đọc theo ý kiến ​​của tôi:

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