Javascript là sai

Biểu thức điều kiện là một trong những khía cạnh rất quan trọng trong mọi ngôn ngữ lập trình. Chúng ta đã quen với các mệnh đề có điều kiện như

[a && b] === a; // `a` is falsy
[a && b] === b; // `a` is truthy

6 hay

[a && b] === a; // `a` is falsy
[a && b] === b; // `a` is truthy

7. Chúng là những cú pháp hữu dụng để đưa ra những quyết định trong lập trì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 rút gọn sao cho phù hợp với 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 sửa 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 bất kỳ công cụ Javascript nào có thể tính toán và trả về một giá trị. các hạn định như. có thể hiển thị biến, cho phép gán, biểu thức hàm, cho phép logic, toán tử bitwise, cho phép truy cập thuộc tính của đối tượng, lời gọi hàm, eval,

Đoạn mã dưới đây chỉ ra một số biểu thức Javascript

// number literal
0xFF

// array literal
[]

// object literal
{}

// regexp literal
/^\d+$/

// logical AND operation
[x && y]

// bitwise XOR operation
[x ^ y]

// ternary operation
[x ? y : z]

// arithmetic operation
[x + y] / z

// assignment
x = 'string'

// function expression
[function x[y] {}]

// function invocation
x[100]

// object property access
obj.students[0].name

Mệnh đề bất khả thi 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ụ. đề điều kiện, khai báo biến hoặc hàm, vòng lặp, ném, quay lại, thử/bắt/cuối cùng,

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 đi kèm theo. Do đó, chúng lại được coi là một mệnh đề [mệnh đề biểu thức]

Điều kiện biến đổi và giá trị kiểu boolean

Trong Javascript, allow dieu 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.

[a && b] === a; // `a` is falsy
[a && b] === b; // `a` is truthy

8 hoặc

[a && b] === a; // `a` is falsy
[a && b] === b; // `a` is truthy

9

Hiểu đúng cách mà công cụ Javascript 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 logic được phép điều kiện một cách chính xác và dự án

Hai khái niệm cơ bản có thể hiểu về việc cho phép chuyển đổi này

• Xác định giá trị trung thực và sai lệch
• Hiểu về phép đo ngắn mạch logic

Sự thật vs Giả dối

Mọi giá trị trong Javascript đều có thể phân loại thành thật hay giả. Những giá trị sau được coi là sai trong Javascript

• [a || b] === a; // `a` is truthy
  [a || b] === b; // `a` is falsy
  

  0 hoặc

  [a || b] === a; // `a` is truthy
  [a || b] === b; // `a` is falsy
  

  1 hoặc

  [a || b] === a; // `a` is truthy
  [a || b] === b; // `a` is falsy
  

  2 [chỗ trống]

• [a || b] === a; // `a` is truthy
  [a || b] === b; // `a` is falsy
  

  3 hoặc

  [a || b] === a; // `a` is truthy
  [a || b] === b; // `a` is falsy
  

  4 [số

  [a || b] === a; // `a` is truthy
  [a || b] === b; // `a` is falsy
  

  3]

• [a || b] === a; // `a` is truthy
  [a || b] === b; // `a` is falsy
  

  6

• [a || b] === a; // `a` is truthy
  [a || b] === b; // `a` is falsy
  

  7

• [a || b] === a; // `a` is truthy
  [a || b] === b; // `a` is falsy
  

  8

• [a && b] === a; // `a` is falsy
  [a && b] === b; // `a` is truthy
  

  9

Những giá trị khác nhau của các giá trị trên sẽ được coi là trung thực. Các giá trị trung thực sẽ được ép kiểu định giá thành giá trị

[a && b] === a; // `a` is falsy
[a && b] === b; // `a` is truthy

8. Trong khi giá trị sai sẽ trả về giá trị

[a && b] === a; // `a` is falsy
[a && b] === b; // `a` is truthy

9

Tuy nhiên, việc chuyển đổi này có thể được khai báo tường minh nhờ hàm Boolean

[a && b] === a; // `a` is falsy
[a && b] === b; // `a` is truthy

7

Ngoài ra, logic toán tử NOT [

[a && b] === a; // `a` is falsy
[a && b] === b; // `a` is truthy

82] cũng chuyển đổi một giá trị về kiểu boolean. Toán tử

[a && b] === a; // `a` is falsy
[a && b] === b; // `a` is truthy

82 chuyển đổi hạng toán học của nó thành giá trị phủ định ở kiểu boolean. Do đó, giá trị này luôn là giá trị boolean

Sử dụng toán tử

[a && b] === a; // `a` is falsy
[a && b] === b; // `a` is truthy

82 sẽ trả lại

[a && b] === a; // `a` is falsy
[a && b] === b; // `a` is truthy

9 trên những giá trị trung thực và

[a && b] === a; // `a` is falsy
[a && b] === b; // `a` is truthy

8 trên những giá trị giả. Để chuyển về giá trị boolean tương ứng, chúng ta cần sử dụng

[a && b] === a; // `a` is falsy
[a && b] === b; // `a` is truthy

82 hai lần

// number literal
0xFF

// array literal
[]

// object literal
{}

// regexp literal
/^\d+$/

// logical AND operation
[x && y]

// bitwise XOR operation
[x ^ y]

// ternary operation
[x ? y : z]

// arithmetic operation
[x + y] / z

// assignment
x = 'string'

// function expression
[function x[y] {}]

// function invocation
x[100]

// object property access
obj.students[0].name

4

Đoản mạch [Mạch chập]

Toán tử AND [

[a && b] === a; // `a` is falsy
[a && b] === b; // `a` is truthy

88] và OR [______189] đều yêu cầu hai hạng toán và được sử dụng để thực hiện phép toán Boolean trên các hạng toán này

Cho hai kiểu toán hạng boolean [

[a && b] === a; // `a` is falsy
[a && b] === b; // `a` is truthy

8 hoặc

[a && b] === a; // `a` is falsy
[a && b] === b; // `a` is truthy

9]

• [a && b] === a; // `a` is falsy
  [a && b] === b; // `a` is truthy
  

  88 chỉ trả về

  [a && b] === a; // `a` is falsy
  [a && b] === b; // `a` is truthy
  

  8 nếu cả hai hạng toán có giá trị kiểu boolean là

  [a && b] === a; // `a` is falsy
  [a && b] === b; // `a` is truthy
  

  8, nếu không nó sẽ trả về

  [a && b] === a; // `a` is falsy
  [a && b] === b; // `a` is truthy
  

  25

• [a && b] === a; // `a` is falsy
  [a && b] === b; // `a` is truthy
  

  89 chỉ trả lại

  [a && b] === a; // `a` is falsy
  [a && b] === b; // `a` is truthy
  

  9 nếu cả hai hạng hạng toán có giá trị kiểu boolean là

  [a && b] === a; // `a` is falsy
  [a && b] === b; // `a` is truthy
  

  9, nếu không nó sẽ trả lại

  [a && b] === a; // `a` is falsy
  [a && b] === b; // `a` is truthy
  

  8

Chú ý rằng toán tử

[a && b] === a; // `a` is falsy
[a && b] === b; // `a` is truthy

88 có ưu tiên hơn

[a && b] === a; // `a` is falsy
[a && b] === b; // `a` is truthy

89. Do đó, nó sẽ được tính toán trước. Khi sử dụng cả hai toán tử này trong cùng một biểu thức, có thể sử dụng dấu trích dẫn

[a && b] === a; // `a` is falsy
[a && b] === b; // `a` is truthy

92 để nhóm các tính năng được phép theo thứ tự ưu tiên

[a && b] === a; // `a` is falsy
[a && b] === b; // `a` is truthy

0

Khi sử dụng các 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 không thể 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à đoản mạch [mạnh chập hay đoản mạch]

Toán tử

[a && b] === a; // `a` is falsy
[a && b] === b; // `a` is truthy

88 và

[a && b] === a; // `a` is falsy
[a && b] === b; // `a` is truthy

89 không phải lúc nào cũng trả về giá trị kiểu boolean. Thông thường, chúng tôi có thể trả lại bất kỳ giá trị nào. Dưới đây là mô tả chính xác về tính toán đo lường mạch của họ

• Toán tử

  [a && b] === a; // `a` is falsy
  [a && b] === b; // `a` is truthy
  

  88 sẽ kiểm tra hạng đầu tiên của thanh toán. Nếu kết quả là trung thực thì toán hạng sẽ được tính toán và kết quả trả về là giá trị của hạng thứ hai. Tuy nhiên, nếu giá trị của hạng đầu tiên là sai thì hạng thứ hai không bao giờ được tính toán, kết quả trả về là giá trị sai của hạng đầu

[a && b] === a; // `a` is falsy
[a && b] === b; // `a` is truthy

• Toán tử

  [a && b] === a; // `a` is falsy
  [a && b] === b; // `a` is truthy
  

  89 cũng sẽ kiểm tra toán hạng đầu tiên. Nếu kết quả là trung thực thì hạng thứ hai sẽ không bao giờ được tính toán, kết quả trả về là giá trị trung thực từ hạng đầu tiên. Tuy nhiên, nếu giá trị của hạng đầu toán là sai thì kết quả trả về là giá trị của hạng thứ hai

[a || b] === a; // `a` is truthy
[a || b] === b; // `a` is falsy

Thay thế mệnh đề bằng biểu thức

1. Đơn giản hóa mệnh đề

[a && b] === a; // `a` is falsy
[a && b] === b; // `a` is truthy

97

Rất nhiều câu chuyện điện kiện

[a && b] === a; // `a` is falsy
[a && b] === b; // `a` is truthy

98 có thể dễ dàng được thay thế bằng biểu thức điều kiện bằng cách áp dụng khái niệm chập chờn. Xem xét ví dụ sau

[a && b] === a; // `a` is falsy
[a && b] === b; // `a` is truthy

8

Trong đoạn code này, mệnh đề

[a && b] === a; // `a` is falsy
[a && b] === b; // `a` is truthy

98 chắc chắn rằng hàm

[a || b] === a; // `a` is truthy
[a || b] === b; // `a` is falsy

10 chỉ được gọi khi cho phép điều kiện trả về

[a && b] === a; // `a` is falsy
[a && b] === b; // `a` is truthy

8

Mệnh đề

[a && b] === a; // `a` is falsy
[a && b] === b; // `a` is truthy

98 trên có thể được thay thế bằng biểu thức điều kiện rất đơn giản như sau

[a && b] === a; // `a` is falsy
[a && b] === b; // `a` is truthy

2

Mặc dù biểu thức điều kiện này có cách thực hiện thì giống như định mệnh với đề đ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ư thế này đồng nghĩa với công việc phải rất cận trọng về khái niệm chập chờn. Rất có thể hạng mục đã không được thực hiện như đã đề cập ở mục trước của bài viết về mạch chập

2. Mệnh đề Nếu. Khác

Xem xét ví dụ đơn giản sau để xác định độ mạnh của mật khẩu

[a && b] === a; // `a` is falsy
[a && b] === b; // `a` is truthy

9

Ý tưởng của đoạn mã trên rất đơn giản. Kiểm tra xem nếu mật khẩu có độ dài lớn hơn 7 ký tự thì gán giá trị cho biến là

[a || b] === a; // `a` is truthy
[a || b] === b; // `a` is falsy

13 , chuyển ngược lại gán là

[a || b] === a; // `a` is truthy
[a || b] === b; // `a` is falsy

14

Đoạn mã trước có thể được rút gọn như sau

[a || b] === a; // `a` is truthy
[a || b] === b; // `a` is falsy

1

Đoạn mã này thực hiện giống như đoạn mã lúc trước, tất cả chỉ trong một dòng. Điều này có vẻ khá ổn. Đoạn mã 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 mã trên

[a && b] === a; // `a` is falsy
[a && b] === b; // `a` is truthy

70

Có một cách khác để viết lại những biểu thức điện điều kiện

[a || b] === a; // `a` is truthy
[a || b] === b; // `a` is falsy

15 là sử dụng toán tử điều kiện, hay còn được gọi là toán tử ba ngôi [toán tử bậc ba]. Cú pháp như sau

[a && b] === a; // `a` is falsy
[a && b] === b; // `a` is truthy

71

Đoạn mã kiểm tra mật khẩu lúc trước có thể được viết lại bằng cách sử dụng toán tử ba ngôi như sau

[a && b] === a; // `a` is falsy
[a && b] === b; // `a` is truthy

72

Mặc dù sử 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 ta không thể thay thế 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 về toán hạng sẽ được thực hiện

Xem xét đoạn mã 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ư thế này

[a && b] === a; // `a` is falsy
[a && b] === b; // `a` is truthy

73

Dưới đây là một mệnh đề rất quen thuộc thường được tìm thấy trên các thư viện AJAX đa nền tảng

[a && b] === a; // `a` is falsy
[a && b] === b; // `a` is truthy

74

Sử dụng toán tử logic

[a && b] === a; // `a` is falsy
[a && b] === b; // `a` is truthy

75

Sử dụng toán tử ba ngôi

[a && b] === a; // `a` is falsy
[a && b] === b; // `a` is truthy

76Mẹo nhỏ và cú pháp tắt

Dưới đây là một số mẹo và cú pháp viết tắt hữu ích khi sử dụng các logic toán tử và điều kiện toán tử

Chuẩn hóa về kiểu Boolean

Cho giá trị

[a || b] === a; // `a` is truthy
[a || b] === b; // `a` is falsy

16 cần chuẩn hóa để luôn trả lại giá trị kiểu boolean theo quy tắc sau

• If

  [a || b] === a; // `a` is truthy
  [a || b] === b; // `a` is falsy
  

  16 is value boolean, return value

  [a || b] === a; // `a` is truthy
  [a || b] === b; // `a` is falsy
  

  16
• Nếu

  [a || b] === a; // `a` is truthy
  [a || b] === b; // `a` is falsy
  

  16 không phải là giá trị boolean , giá trị boolean mặc định sẽ được trả lại [

  [a && b] === a; // `a` is falsy
  [a && b] === b; // `a` is truthy
  

  8 hoặc

  [a && b] === a; // `a` is falsy
  [a && b] === b; // `a` is truthy
  

  25]

Đoạn mã dưới đây mô tả cho phép chuẩn hóa trên

[a && b] === a; // `a` is falsy
[a && b] === b; // `a` is truthy

77

Định lý De Morgan

Định lý toán học quen thuộc này có thể được mô tả như sau

[a && b] === a; // `a` is falsy
[a && b] === b; // `a` is truthy

78

Sự đồng nhất của Boolean

Khi xử lý giá trị boolean, có một số đồng nhất được phép luôn đúng. Cho

[a && b] === a; // `a` is falsy
[a && b] === b; // `a` is truthy

702,

[a && b] === a; // `a` is falsy
[a && b] === b; // `a` is truthy

703 và

[a && b] === a; // `a` is falsy
[a && b] === b; // `a` is truthy

704 là những giá trị boolean, đoạn mã sau sẽ chỉ ra sự đồng nhất này

[a && b] === a; // `a` is falsy
[a && b] === b; // `a` is truthy

79

Các toán tử ba ngôi nhà hợp nhất

Như đã đề cập ở các phần trước của bài viết, toán tử ba ngôi nhà có thể lồng vào nhau để xử lý các đoạn logic liên quan đến mệnh đề

[a || b] === a; // `a` is truthy
[a || b] === b; // `a` is falsy

15

Tuy nhiên, để có thể sử dụng hiệu quả của chúng trong các biểu thức phức hợp thì cần phải hiểu về mức độ ưu tiên và tính toán kết quả của toán tử ba ngôi

• Toán tử ba ngôi nhà có mức ưu tiên thấp nhất so với các toán tử khác. Do đó nó được tính toán cuối cùng khi được sử dụng chung với các thuật toán khác có mức độ ưu tiên cao hơn

// number literal
0xFF

// array literal
[]

// object literal
{}

// regexp literal
/^\d+$/

// logical AND operation
[x && y]

// bitwise XOR operation
[x ^ y]

// ternary operation
[x ? y : z]

// arithmetic operation
[x + y] / z

// assignment
x = 'string'

// function expression
[function x[y] {}]

// function invocation
x[100]

// object property access
obj.students[0].name

40

• Toán ba ngôi nhà có tính kết hợp từ phải qua trái. Do đó, đối với các toán tử ba ngôi được sử dụng trong cùng một biểu thức, chúng được phân tích từ phải sang trái

// number literal
0xFF

// array literal
[]

// object literal
{}

// regexp literal
/^\d+$/

// logical AND operation
[x && y]

// bitwise XOR operation
[x ^ y]

// ternary operation
[x ? y : z]

// arithmetic operation
[x + y] / z

// assignment
x = 'string'

// function expression
[function x[y] {}]

// function invocation
x[100]

// object property access
obj.students[0].name

41

Khi sử dụng nhiều toán tử ba ngôi nhà trong cùng một biểu thức, dấu trích dẫn

[a && b] === a; // `a` is falsy
[a && b] === b; // `a` is truthy

92 có thể được sử dụng để thay đổi thứ tự tính toán. Ví dụ