Thứ ba, 18/06/2019 | 00:00 GMT+7

Tối ưu hóa Tuyên bố chuyển đổi trong JavaScript


Câu lệnh switch là không thể thiếu cho một số tác vụ lập trình. Trong bài viết này, bạn sẽ học cách sử dụng switch và hy vọng sẽ có được trực giác để biết khi nào bạn nên sử dụng nó.

Dấu hiệu cho biết để sử dụng switch là khi bạn có nhiều câu lệnh if/else liên tiếp. Hãy xem một ví dụ sử dụng if/else , sau đó ta sẽ xem xét switch tương đương để so sánh:

let dayIndex = new Date().getDay();
let day;

if (dayIndex === 0) {
  day = 'Sunday';
}
else if (dayIndex === 1) {
  day = 'Monday';
}
else if (dayIndex === 2) {
  day = 'Tuesday';
}
else if (dayIndex === 3) {
  day = 'Wednesday';
}
else if (dayIndex === 4) {
  day = 'Thursday';
}
else if (dayIndex === 5) {
  day = 'Friday';
}
else if (dayIndex === 6) {
  day = 'Saturday';
};

console.log(day); // "Friday"

Bạn có biết không? JavaScript không có phương thức root để xem ngày trong tuần!

Sử dụng if/else thực sự dài dòng và chứa rất nhiều bảng soạn sẵn không cần thiết mà switch có thể xử lý dễ dàng:

let dayIndex = new Date().getDay();
let day;

switch (dayIndex) {
  case 0:
    day = "Sunday";
    break;
  case 1:
    day = "Monday";
    break;
  case 2:
    day = "Tuesday";
    break;
  case 3:
    day = "Wednesday";
    break;
  case 4:
    day = "Thursday";
    break;
  case 5:
    day = "Friday";
    break;
  case 6:
    day = "Saturday";
    break;
};

console.log(day); // "Friday"

Hầu như không có bất kỳ mã nào và nó rất tối thiểu. Điều này là do switch nhấn mạnh vào các giá trị có thể thay vì các điều kiện cho các giá trị .

Sử dụng break

Vì JavaScript sẽ chuyển qua toàn bộ nhánh case nhiều lần nên bạn nên sử dụng break để ngăn chặn các case trùng khớp không mong muốn hoặc để giúp công cụ khỏi phải phân tích cú pháp mã bổ sung.

switch (dayIndex) {
  case 0:
    day = "Sunday";
    break;
  case 1:
    day = "Monday";
    break;
  case 2:
    day = "Tuesday";
    break;
  case 3:
    day = "Wednesday";
    break;
  case 4:
    day = "Thursday";
    break;
  case 5:
    day = "Friday";
    break;
  case 6:
    day = "Saturday";
    break;
}

Trong ví dụ này, break thực sự không cung cấp thêm bất kỳ sự an toàn nào vì case 2 không bao giờ có thể là case 5 (ví dụ) nên break có phần không liên quan. Việc sử dụng break nghiêm ngặt này dường như là một vấn đề ưu tiên giữa các nhà phát triển như việc sử dụng dấu chấm phẩy (;). Các nhà phát triển có cách tiếp cận rõ ràng để lập trình sẽ sử dụng break cho mọi case , trong khi một số nhà phát triển chỉ sử dụng break chiến lược trong switch . Tuy nhiên, có một chút tăng hiệu suất khi sử dụng nó trên bảng, bởi vì ngay cả khi không có cơ hội cho một trường hợp khác đúng, thì ít nhất bạn thậm chí sẽ không để động cơ chạy qua phần còn lại của câu lệnh chuyển đổi.

Sử dụng chiến lược của "break"

Đôi khi bạn thực sự muốn các trường hợp của bạn "lọt lưới". Sử dụng break cho những trường hợp này là một chiến lược hơn là một biện pháp an toàn.

let seasonIndex = new Date().getMonth();
let season;

switch (seasonIndex) {
  case 0:
  case 1:
  case 2:
    season = 'Winter'; // January, February, March
    break;
  case 3:
  case 4:
  case 5:
    season = 'Spring'; // April, May, June
    break;
  case 6:
  case 7:
  case 8:
    season = 'Summer'; // July, August, September
    break;
  case 9:
  case 10:
  case 11:
    season = 'Autumn'; // October, November, December
    break;
}

Trong ví dụ này, các trường hợp là "thông qua" và break được sử dụng để thoát khỏi switch sớm một cách rõ ràng. Điều này cho phép bạn gộp nhiều trường hợp lại với nhau với một giá trị duy nhất.

Phiên bản if/else sẽ yêu cầu sử dụng nhiều || toán tử logic có vẻ không minh bạch:

 if (seasonIndex === 0 || seasonIndex === 1 || seasonIndex === 2) {
   season = 'Winter';
 } else if (seasonIndex === 3 || seasonIndex === 4 || seasonIndex === 5) {
   season = 'Spring';
 } else if (seasonIndex === 6 || seasonIndex === 7 || seasonIndex === 8) {
   season = 'Summer';
 } else if (seasonIndex === 9 || seasonIndex === 10 || seasonIndex === 11) {
   season = 'Fall';
 }

Xử lý các trường hợp mặc định

Một tính năng khác của switch là khả năng xử lý các trường hợp đột xuất hoặc chung chung. Quay trở lại ví dụ đầu tiên của ta , ta có thể sử dụng default để triển khai xử lý lỗi:

let dayIndex = new Date().getDay();
let day;

switch (dayIndex) {
  default:
    day = new Error('Invalid argument: "dayIndex" must be an integer from 0 –> 6');
  case 0:
    day = 'Sunday';
    break;
  case 1:
    day = 'Monday';
    break;
  case 2:
    day = 'Tuesday';
    break;
  case 3:
    day = 'Wednesday';
    break;
  case 4:
    day = 'Thursday';
    break;
  case 5:
    day = 'Friday';
    break;
  case 6:
    day = 'Saturday';
    break;
}

Bạn có thể nhận thấy rằng trường hợp default được đặt ở trên cùng. Đừng lo lắng! Nó sẽ hoạt động như mong đợi vì JavaScript sẽ xem xét tất cả các nhánh case trước khi nó giải quyết theo default .

Bạn cũng có thể sử dụng default cho các trường hợp chung của bạn :

let beverage = 'Mr. Pibb';
let cost;

switch (beverage) {
  default:
    cost = 0.05;
  case 'Pepsi':
    cost = 1.00;
    break;
  case 'Coca-Cola':
    cost = 1.00;
    break;
  case 'Dr. Pepper':
    cost = 2.00;
    break;
  case 'Moutain Dew':
    cost = 5.00;
    break;
}

console.log(cost); // 0.05

Điều này đảm bảo bạn sẽ nhận được một số giá trị sorta từ switch ngay cả khi nó không trùng với bất kỳ cases nào bạn đã xác định.

Kết luận

Câu lệnh switch là một sự thay thế thanh lịch khi bạn thấy mình đang viết nhiều câu lệnh if/else liên tiếp. Mặc dù bạn có thể không sử dụng switch thường xuyên, nhưng ví dụ, for-loop không có sự thay thế khi bạn cần. Các thư viện thư viện hiện đại như LodashRedux vẫn sử dụng switch đến ngày nay, khiến nó trở thành một trong những tính năng cũ của JavaScript mà bạn sẽ luôn cần phải tuân theo.

Để tìm hiểu thêm về switch hãy truy cập trang web Nhà phát triển Mozilla .


Tags:

Các tin liên quan

Làm việc với Singletons trong JavaScript
2019-04-19
Cách sử dụng Axios với JavaScript
2019-04-05
Giới thiệu về Lặp lại và Trình lặp trong JavaScript
2019-03-13
D3.js: Hiểu các lựa chọn và so sánh với Vanilla JavaScript
2019-03-04
Xem xét Phạm vi, Ngữ cảnh, Tham chiếu Đối tượng và Thuyết minh trong JavaScript
2019-02-25
Sử dụng JavaScript Mixins
2019-02-12
Đọc mã nguồn JavaScript, sử dụng AST
2019-02-09
JavaScript Biểu thức chính quy cho Người bình thường
2019-02-07
Mẫu kế thừa nguyên mẫu JavaScript
2019-02-01
Các mẫu hướng đối tượng JavaScript: Mẫu nhà máy
2019-01-23