Định nghĩa biến JavaScript: Dấu phẩy so với Dấu chấm phẩy

Sự khác biệt và / hoặc lợi thế, nếu có, của việc sử dụng dấu phẩy khi khai báo một nhóm biến thay vì dấu chấm phẩy là gì.

Ví dụ:

var foo = 'bar', bar = 'foo';

đấu với

var foo = 'bar';
var bar = 'foo';

Tôi biết rằng nếu bạn chỉ định vartừ khóa trên biến đầu tiên trong ví dụ đầu tiên, nó sẽ tồn tại trên tất cả các biến, vì vậy cả hai đều tạo ra cùng một kết quả cuối cùng về phạm vi. Đó chỉ là sở thích cá nhân, hay có lợi ích về hiệu suất khi làm theo cách này?

Không có lợi ích về hiệu suất, chỉ là vấn đề lựa chọn cá nhân và phong cách.

Phiên bản đầu tiên chỉ ngắn gọn hơn.

Cập nhật:

Về số lượng dữ liệu đi qua dây, tất nhiên ít hơn sẽ tốt hơn, tuy nhiên bạn sẽ cần rất nhiều varkhai báo đã bị loại bỏ để thấy được tác động thực sự.

Minification đã được đề cập đến như một cái gì đó mà ví dụ đầu tiên sẽ giúp thu nhỏ tốt hơn, tuy nhiên, như Daniel Vassallo đã chỉ ra trong các nhận xét, một bộ thu nhỏ tốt sẽ tự động làm điều đó cho bạn, vì vậy về mặt đó không có tác động nào.

Sau khi đọc Crockford và những người khác, tôi bắt đầu xâu chuỗi các biến của mình chỉ bằng dấu phẩy. Sau đó, tôi thực sự khó chịu bởi trình gỡ lỗi Chrome DevTools không dừng lại ở các định nghĩa biến bằng dấu phẩy. Đối với trình gỡ lỗi, các định nghĩa biến được xâu chuỗi bằng dấu phẩy là một câu lệnh duy nhất, trong khi nhiều câu lệnh var là nhiều câu lệnh mà trình gỡ lỗi có thể dừng lại. Do đó, tôi đã chuyển trở lại từ:

var a = doSomethingA,
    b = doSomethignB,
    c = doSomethingC;

Đến:

var a = doSomethingA;
var b = doSomethignB;
var c = doSomethingC;

Bây giờ, tôi thấy biến thể thứ hai sạch hơn nhiều, chưa kể đến lợi thế của nó là giải quyết vấn đề trình gỡ lỗi.

Lập luận "ít mã qua dây" không thuyết phục, vì có những phần nhỏ.

Tôi thích var-per-variableký hiệu hơn:

var a = 2
var b = 3

bởi vì comma-instead-of-another-varký hiệu khác có ba thiếu sót sau:

1. Khó bảo trì
Hãy xem xét mã này:

var a = 1,
    b = mogrify(2),
    c = 3

Nhưng này, mogrify làm được gì? Hãy cùng in b tìm hiểu nhé:

var a = 1,
    b = mogrify(2),
    console.log(b)
    c = 3

phá vỡ đồ đạc

2. Khó đọc

Var trong dòng xin lỗi thông báo rõ ràng rằng sẽ có một biến mới được khởi tạo.

var get_all_unicorn_promise = db.get_all_unicorns((unicorn) => {
        unicorn.legs.map((leg) => {
            leg.log('yes')
        })
    }).sort(),
    c = 3

Làm cái quái c = 3gì vậy?

3. Không nhất quán

Xem xét điều này:

var a = 1,
    b = 2,
    c = 3

Với var-per-variablemọi khai báo theo cùng một cấu trúc. Với comma-instead-of-another-varbiến đầu tiên được khai báo theo cách khác với những biến khác. Nếu bạn quyết định di chuyển biến đầu tiên bên trong chu trình for, bạn sẽ phải thêm var vào giữa các khai báo

Ngoài sở thích, có vẻ như phần lớn các dự án đáng chú ý sử dụng var-per-variableký hiệu

Tôi đồng ý với những người trả lời khác rằng đây chủ yếu là vấn đề về phong cách cá nhân. Nhưng để đưa ý kiến ​​"Có thẩm quyền" vào cuộc thảo luận, đây là những gì Douglas Crockford nói trên trang web của công cụ JSLint phổ biến :

Nhưng vì JavaScript không có phạm vi khối, nên sẽ khôn ngoan hơn nếu khai báo tất cả các biến của hàm ở đầu hàm. Bạn nên sử dụng một câu lệnh var duy nhất cho mỗi hàm. Điều này có thể được thực thi với onevartùy chọn.

Như những người khác đã lưu ý, đó là một sở thích về phong cách. JSLint có thể yêu cầu bạn chỉ có một varcho mỗi chức năng (nếu bạn sử dụng "Bộ phận tốt"). Vì vậy, nếu sử dụng JSLint để kiểm tra mã của bạn (không phải là một ý kiến ​​tồi, IMHO), bạn sẽ sử dụng định dạng đầu tiên nhiều hơn định dạng sau.

Mặt khác, cùng một tác giả, Douglas Crockford , nói rằng hãy đặt mỗi biến vào dòng riêng của nó trong quy ước mã hóa của mình . Vì vậy, bạn có thể muốn bỏ chọn hộp kiểm "Tất cả một varcho mỗi chức năng" trong JSLint nếu bạn sử dụng nó. ;-)

Tôi không nghĩ rằng có bất kỳ sự khác biệt đáng chú ý nào, theo như tôi nghĩ đó chỉ là sở thích cá nhân.

Tôi ghét có nhiều khai báo var nên tôi thường làm:

var 
   one
  ,two
  ,three
  ,four
;

Vì nó ngắn hơn và được cho là dễ đọc hơn, không có vartiếng ồn khi nhìn vào.

Vì tôi không thấy bất kỳ tham chiếu nào đến nó, nên đây là một liên kết đến thông số kỹ thuật ECMA-262, là thông số kỹ thuật cơ bản cho JavaScript. Ngữ pháp từ trang đó cho biết:

12.2 Variable Statement

Syntax

  VariableStatement :
    var VariableDeclarationList ;

  VariableDeclarationList :
    VariableDeclaration
    VariableDeclarationList , VariableDeclaration

  VariableDeclarationListNoIn :
    VariableDeclarationNoIn
    VariableDeclarationListNoIn , VariableDeclarationNoIn

  VariableDeclaration :
    Identifier Initialiseropt

  VariableDeclarationNoIn :
    Identifier InitialiserNoInopt

  Initialiser :
    = AssignmentExpression
  InitialiserNoIn :
    = AssignmentExpressionNoIn

Những gì bạn có thể thu thập được từ điều này là sử dụng dấu phẩy hay không không quan trọng. Dù bằng cách nào, nó cũng sẽ được phân tích cú pháp thành một VariableDeclarationvà được xử lý giống hệt nhau. Không có sự khác biệt nào đối với cách bộ máy tập lệnh xử lý hai khai báo. Sự khác biệt duy nhất sẽ là những điểm đã được đề cập trong các câu trả lời khác - tiết kiệm không gian hơn và thực tế là sự khác biệt không thể đo lường được về lượng thời gian áp dụng ngữ pháp để tìm ra tất cả VariableDeclarationskhi kịch bản được biên dịch.

Đầu tiên tiết kiệm một vài ký tự - vì vậy sẽ tiết kiệm rất ít về kích thước tệp JS và do đó tiêu thụ băng thông. Lần duy nhất điều này trở nên đáng chú ý là trong những trường hợp cực đoan.

Tôi thích phiên bản thứ hai hơn (mỗi phiên bản đều có var). Tôi nghĩ đó là vì tôi đến từ nền tảng C ++. Trong C ++, bạn có thể khai báo các biến giống như bạn làm trong ví dụ đầu tiên của mình, nhưng nó không được như ý muốn (nó dễ dẫn đến sai lầm khi bạn đang cố gắng tạo con trỏ theo cách đó).

Nếu bạn đang giảm thiểu javascript của mình, có một lợi ích khá lớn:

var one, two, three, four;

trở thành

var a, b, c, d;

Trong khi

var one;
var two;
var three;
var four;

trở thành

var a;
var b;
var c;
var d;

Đó là ba trường hợp bổ sung var, có thể tăng lên theo thời gian.

Xem loạt bài viết "A List Apart" "Tối ưu hóa Javascript tốt hơn" Phần 1 và Phần 2