Hướng dẫn dùng conditionals JavaScript
Một trong những công cụ mạnh mẽ và được sử dụng nhiều nhất của các ngôn ngữ lập trình chính là các câu lệnh điều kiện, tạo ra các nhánh code chỉ được chạy khi đáp ứng một số điều kiện nhất định. Javascript có 3 loại điều kiện chính: khối if/else, switch statements và biểu thức điều kiện. 3 câu lệnh này có thể giúp bạn tạo ra được những dòng code rất awsome! Show
Giống như những câu lệnh khác, một câu lệnh điều kiện không được tối ưu sẽ rất dễ gây ra lỗi và khó tối ưu sau này. Vậy nên dưới đây, mình xin phép được giới thiệu một số cách viết áp dụng vài nguyên tắc cơ bản để giúp chúng ta tối ưu được những câu lệnh điều kiện này một cách tốt nhất. Khái niệm cơ bản nhất của Javascript ConditionalsNhư mình đã nói trước đó, Javascript ( JS ) có 3 loại điều kiện chính. Đầu tiên chính là câu lệnh if/else. Định nghĩa về câu lệnh này rấy đơn giản: Nếu điều kiện đúng , đoạn code trong đó sẽ được chạy. Ví dụ:
Ta cũng có thể chạy thêm đoạn mã khác dựa
trên cùng một điều kiện, bằng cách thêm từ khoá
Bạn cũng có thể thêm nhiều điều kiện bằng cách sử dụng các câu lệnh
Câu lệnh switch, nó kiểm tra giá trị của 1 hoặc nhiều
Một trong những lưu ý quan trọng nhất của switch statements chính là
Kiểu điều kiện cuối cùng chính là biểu thức điều kiện. Chúng cũng là một cách hay được sử dụng để đơn giản hoá mệnh đề if/else.
Best Practices cho ConditionalsNếu như không được tối ưu và sử dụng đúng cách, các câu lệnh điều kiện sẽ là một cản trở khó chịu trong quá trình xây dựng sản phẩm của bạn. Để giảm trừ điều này, có một vài nguyên tắc mà bạn nên tuân theo để tránh cho những câu lệnh điều kiện mà bạn viết ra trở thành một mớ hỗn độn.
Với bài toán trên, bạn nên xử lý như thế này:
Thực tế, nó chính là như thế này:
Với đồng bùng nhùng bên trên, ta có thể viết lại chúng như sau:
Một cách khác để tránh những If blocks lồng nhau, đó chính là sử dụng switch statements, như dưới đây:
Trên đây là một số chia sẻ về câu lệnh điều kiện trong JS cũng như một số nguyên tắc nhỏ trong việc viết chung. Bài viết còn nhiều thiếu sót, mong sẽ nhận được ý kiến đóng góp từ mọi người. Tham khảo: How to Make Your Conditional Statements Easier to Read in JavaScript Biểu thức điều kiện là một trong những khía cạnh rất quan trong trong mọi ngôn ngữ lập trình. Chúng ta đã quen với các mệnh đề điều kiện như Bài viết này sẽ tập trung vào các biểu thức điều kiện trong Javascript và cách sử dụng chúng một cách ngắn gọn so với các mệnh đề điều kiện. Biểu thức và Mệnh đề (Expressions vs Statements)Trước khi đi vào nội dung chính, chúng ta cần phân biệt giữa biểu thức và mệnh đề trong Javascript. Nếu coi Javascript là một ngôn ngữ có ngữ pháp thì biểu thức chính là cụm từ, trong khi đó mệnh đề là một câu hoàn chỉnh. Biểu thức có thể là bất kỳ thể hiện nào mà Javascript engine có thể tính toán và trả về một giá trị. Chẳng hạn như: thể hiện của biến, phép gán, biểu thức hàm, phép logic, toán tử bitwise, phép truy cập thuộc tính của đối tượng, lời gọi hàm, eval, .... Đoạn code dưới đây chỉ ra một số biểu thức Javascript:
Mệnh đề là bất kỳ thể hiện hay câu lệnh nào mà Javascript engine có thể thực thi để chạy chương trình hoặc gây ra những tác động kèm theo khác. Ví dụ: mệnh đề điều kiện, khai báo biến hoặc hàm, vòng lặp, throw, return, try/catch/finally, ... Một số biểu thức Javascript như phép gán và lời gọi hàm có thể gây ra những tác động kèm theo. Do đó, chúng lại được coi là một mệnh đề (mệnh đề biểu thức). Phép điều kiện và giá trị kiểu booleanTrong Javascript, phép điều kiện
có thể là bất kỳ biểu thức hợp lệ nào. Thông thường, biểu thức điều kiện sẽ được tính toán để trả về một trong hai giá trị kiểu booleans: Việc hiểu đúng cách mà Javascript engine chuyển đổi biểu thức điều kiện về giá trị boolean là điều cần thiết để viết các phép logic điều kiện một cách chính xác và khả dự. Hai khái niệm cơ bản có thể hiểu về phép chuyển đổi này:
Truthy vs FalsyMọi giá trị trong Javascript đều có thể phân loại thành truthy hay falsy. Những giá trị sau được coi là falsy trong Javascript.
Những giá trị khác các giá trị trên sẽ được coi là truthy. Các giá trị truthy sẽ được ép
kiểu ngầm định thành giá trị Tuy nhiên, việc chuyển đổi này có thể được khai báo tường minh nhờ hàm Boolean.
Ngoài ra, toán tử logic NOT ( Sử dụng toán tử
Short-Circuiting (Mạch chập)Toán tử AND ( Cho hai toán hạng kiểu boolean (
Chú ý rằng toán tử
Khi sử dụng những toán tử này, toán hạng đầu tiên luôn được tính toán trước. Tuy nhiên, toán hạng thứ hai có thể không bao giờ được sử dụng tùy theo kết quả tính toán của toán hạng đầu tiên. Điều này được gọi là short-circuiting (mạnh chập hay đoản mạch). Toán tử
Thay thế mệnh đề bằng biểu thức1. Đơn giản hóa mệnh đề IfRất nhiều câu điện kiện
Trong đoạn code này, mệnh đề Mệnh đề
Mặc dù biểu thức điều kiện này có cách thực thi giống với mệnh đề điều kiện trên, nhưng thực chất chúng khác nhau. Mệnh đề điều kiện trả về một giá trị. Do đó, nó có thể được gán cho một biến hoặc được sử dụng ở nơi khác mà yêu cầu một giá trị cụ thể. Việc sử dụng biểu thức điều kiện như này đồng nghĩa với việc phải rất cận trọng về khái niệm mạch chập. Rất có thể toán hạng không được thực thi như đã đề cập ở mục trước của bài viết về mạch chập. 2. Mệnh đề If...ElseXem xét ví dụ đơn giản sau để xác định độ mạnh của mật khẩu:
Ý tưởng của đoạn code trên rất đơn giản: Kiểm tra nếu mật khẩu có độ dài lớn hơn 7 ký tự thì gán trị cho biến là Đoạn code trước có thể được rút gọn như sau:
Đoạn code này thực hiện giống hệt như đoạn code lúc trước, tất cả chỉ trong một dòng. Điều này trông khá ổn. Đoạn code dưới đây sẽ giải thích cơ chế tính toán của biểu thức điều kiện ở đoạn code trên.
Có một cách khác để viết lại những biểu thức điện kiện
Đoạn code kiểm tra mật khẩu lúc trước có thể được viết lại sử dụng toán tử ba ngôi như sau:
Mặc dùng trong ví dụ này, toán tử ba ngôi và toán tử logic hoạt động giống nhau nhưng cần nhớ rằng chúng không thể thay thế được cho nhau. Tốt hơn hết là nên sử dụng toán tử ba ngôi trong những trường hợp không biết rõ về toán hạng sẽ được thực hiện. Xem xét đoạn code sau để hiểu về sự nguy hiểm của việc sử dụng toán tử logic cho những trường hợp như này:
Dưới đây là một mệnh đề rất quen thuộc thường được tìm thấy ở các thư viện AJAX đa nền tảng:
Sử dụng toán tử logic:
Sử dụng toán tử ba ngôi:
Mẹo nhỏ và cú pháp viết tắt.Dưới đây là một số mẹo và cú pháp viết tắt hữu dụng khi sử dụng các toán tử logic và toán tử điều kiện: Chuẩn hóa về kiểu BooleanCho giá trị
Đoạn code dưới đây mô tả phép chuẩn hóa trên:
Định lý De MorganĐịnh lý toán học quen thuộc này có thể được mô tả như sau:
Sự đồng nhất của BooleanKhi xử lý với giá trị boolean, có một số phép đồng nhất luôn đúng. Cho
Những toán tử ba ngôi phức hợpNhư đã đề cập ở các phần trước của bài viết, toán tử ba ngôi có thể được lồng với nhau để xử lý những đoạn logic liên quan đến mệnh đề Tuy nhiên, để có thể sử dụng chúng hiệu quả trong những biểu thức phức hợp thì cần hiểu về độ ưu tiên và tính kết hợp của toán tử ba ngôi.
Khi sử dụng nhiều toán tử ba ngôi
trong cùng một biểu thức, dấu ngoặc
Tài liệu tham khảo về Javascript
** Lược dịch **Glad Chinda, Conditional JavaScript for Experts, Medium |