Dấu phẩy được sử dụng để làm gì trong javascript?

Tôi đã viết JavaScript được gần mười năm rồi, nhưng mãi đến gần đây tôi mới khám phá ra toán tử dấu phẩy. Là một phần của luận án Cử nhân, tôi đã triển khai bộ phân tích luồng điều khiển cho các chương trình JavaScript. Đương nhiên, tôi phải đọc đặc tả ngôn ngữ để hiểu cách đánh giá các câu lệnh và biểu thức khác nhau, đó là nơi tôi tình cờ tìm thấy toán tử dấu phẩy

Cách sử dụng #Comma trong JavaScript

Hãy dành một chút thời gian và xem xét một số cấu trúc ngôn ngữ JavaScript có cú pháp yêu cầu chúng ta viết dấu phẩy. Chúng tôi sử dụng dấu phẩy để…

• khai báo nhiều biến cùng lúc.

  return pos++, (token = SyntaxKind.GreaterThanToken);

  5
• liệt kê các phần tử trong mảng chữ.

  return pos++, (token = SyntaxKind.GreaterThanToken);

  6
• thuộc tính riêng biệt của đối tượng chữ.

  return pos++, (token = SyntaxKind.GreaterThanToken);

  7
• xác định nhiều tham số chức năng.

  return pos++, (token = SyntaxKind.GreaterThanToken);

  8
• gọi một hàm có nhiều đối số.

  return pos++, (token = SyntaxKind.GreaterThanToken);

  9
• hủy cấu trúc mảng.

  return pos++, (token = SyntaxKind.GreaterThanToken);

  0
• phá hủy đối tượng.

  return pos++, (token = SyntaxKind.GreaterThanToken);

  1
• nhập nhiều thành viên mô-đun.

  return pos++, (token = SyntaxKind.GreaterThanToken);

  2
• xuất nhiều thành viên mô-đun.

  return pos++, (token = SyntaxKind.GreaterThanToken);

  3

Tất cả các ví dụ trên đều đúng về mặt cú pháp và có chứa dấu phẩy, nhưng không có ví dụ nào sử dụng toán tử dấu phẩy thực tế. Vậy nhà điều hành bí ẩn mà tôi đang nói đến là gì?

#Toán tử dấu phẩy

Hóa ra tôi đã sử dụng toán tử dấu phẩy mà không biết về nó. Kiểm tra vòng lặp

return pos++, (token = SyntaxKind.GreaterThanToken);

4 sau

for (var x = 0, y = 10; x <= 10; x++, y--) {
  // ...
}

Đó là toán tử dấu phẩy, ngay trong thành phần thứ ba của tiêu đề của vòng lặp

return pos++, (token = SyntaxKind.GreaterThanToken);

4, ngăn cách hai biểu thức

return pos++, (token = SyntaxKind.GreaterThanToken);

6 và

return pos++, (token = SyntaxKind.GreaterThanToken);

7. Trong ngữ pháp ngôn ngữ, nó quy định rằng một vòng lặp

return pos++, (token = SyntaxKind.GreaterThanToken);

4 có thể có một biểu thức tùy chọn làm thành phần cập nhật của nó, nhưng không có nhiều biểu thức. Do đó,

return pos++, (token = SyntaxKind.GreaterThanToken);

9 phải là một biểu thức — và nó là

Tất cả các chi tiết vinh quang được mô tả trong phần 12. 15 Toán tử dấu phẩy. Tóm lại, toán tử dấu phẩy đánh giá từng toán hạng của nó (từ trái sang phải) và cuối cùng trả về giá trị của toán hạng ngoài cùng bên phải. Nó có thể được sử dụng ở bất cứ nơi nào mà một biểu thức được mong đợi, mặc dù dấu ngoặc đơn là cần thiết ở một số nơi để giải quyết sự mơ hồ về ngữ pháp

#Ví dụ 1. Tăng dần + Chỉ định + Trả về

Đây là một ví dụ thực tế, được tìm thấy trong trình quét của trình biên dịch TypeScript

return pos++, (token = SyntaxKind.GreaterThanToken);

Đầu tiên, biểu thức

return pos++, (token = SyntaxKind.GreaterThanToken);

20 được đánh giá, làm cho biến

return pos++, (token = SyntaxKind.GreaterThanToken);

21 được tăng lên. Thứ hai, biến

return pos++, (token = SyntaxKind.GreaterThanToken);

22 được gán giá trị

return pos++, (token = SyntaxKind.GreaterThanToken);

23. Cuối cùng, toán tử dấu phẩy trả về giá trị của toán hạng ngoài cùng bên phải của nó (trong trường hợp này là giá trị mới của biến

return pos++, (token = SyntaxKind.GreaterThanToken);

22), được truyền dưới dạng đối số cho câu lệnh

return pos++, (token = SyntaxKind.GreaterThanToken);

25

Một lớp lót ở trên tương đương về mặt ngữ nghĩa với ba câu lệnh riêng biệt này

return pos++, (token = SyntaxKind.GreaterThanToken);

2

Lưu ý rằng tôi không khuyên bạn nên sử dụng toán tử dấu phẩy chỉ để lưu một vài dòng hoặc tổ hợp phím. Không phải nhà phát triển JavaScript nào cũng biết về ngữ nghĩa của cấu trúc ngôn ngữ này, điều này có thể gây nhầm lẫn và có hại nhiều hơn lợi. Tuy nhiên, trong ngữ cảnh của trình quét TypeScript, việc sử dụng toán tử dấu phẩy có thể được chấp nhận vì các nhà phát triển biết JavaScript từ trong ra ngoài

#Ví dụ #2. Khóa thuộc tính được tính toán

Ví dụ trước có thể dễ dàng được viết theo cách khác, đó là lý do tại sao tôi tìm kiếm một trường hợp sử dụng hợp lý hơn của toán tử dấu phẩy. Tôi đã tìm thấy một mã trong mã được dịch mã mà trình biên dịch TypeScript tạo ra khi biên dịch một đối tượng theo nghĩa đen bằng các khóa thuộc tính được tính toán, như khóa này

return pos++, (token = SyntaxKind.GreaterThanToken);

9

Vì ECMAScript 5 không có các khóa thuộc tính được tính toán, trình biên dịch TypeScript sẽ phát ra mã cấp thấp sau khi nhắm mục tiêu ES5

return pos++, (token = SyntaxKind.GreaterThanToken);

0

Như bạn có thể thấy ở dòng cuối cùng, trình biên dịch giới thiệu một biến cục bộ mới

return pos++, (token = SyntaxKind.GreaterThanToken);

26. Phần khai báo biến được đưa lên đầu hàm chứa để nó cũng có thể truy cập được ở các dòng trên. Trong biểu thức được đặt trong ngoặc đơn, trước tiên,

return pos++, (token = SyntaxKind.GreaterThanToken);

26 được gán một đối tượng trống theo nghĩa đen đại diện cho bản đồ. Sau đó, mỗi khóa thuộc tính được tính toán và sử dụng để gán ba giá trị chuỗi. Cuối cùng, toán hạng thứ năm và cũng là toán hạng cuối cùng của toán tử dấu phẩy là

return pos++, (token = SyntaxKind.GreaterThanToken);

26, chính bản đồ, được trả về và gán cho biến

return pos++, (token = SyntaxKind.GreaterThanToken);

29

Vì các ký tự đối tượng là các biểu thức, nên việc đưa ra năm câu lệnh không phải là một tùy chọn cho trình biên dịch TypeScript. Giá trị trong ngoặc đơn ở trên có thể xuất hiện ở mọi nơi mà một biểu thức được mong đợi, trong khi các câu lệnh chỉ có thể xuất hiện ở vị trí câu lệnh

Dấu phẩy có cần thiết trong JavaScript không?

Tại sao dấu phẩy được sử dụng trong Java?

Tôi có nên sử dụng JavaScript dấu phẩy ở cuối không?

Mục đích của dấu phẩy trong lập luận là gì?