Viblo Code
+1

3 câu lệnh hữu ích trong Javascript mà bạn nên biết

Bài viết này mình có tham khảo từ đây

Như bạn đã biết, các câu lệnh javascript có khả năng thực hiện được nhiều kiểu logic khác nhau trong code của chúng ta. Bạn có thể xem thêm về các câu lệnh đó tại đây. Mỗi câu lệnh lại có một mục đích sử dụng và cú pháp khác nhau. Theo như thống kê này thì được sử dụng nhiều nhất vẫn là những câu lệnh về biểu thức, vòng lặp hay là điều kiện... như hình bên dưới

statementfreq.png

Trong bài viết này, mình xin đề cập đến một số câu lệnh không thực sự phổ biến, không quá quen thuộc với chúng ta nhưng nó lại khá hữu ích và giúp cho bạn viết code tốt hơn sau này. Đó là các câu lệnh

Emplty
Labeled
with

Nào, hãy cùng bắt đầu nhé

1 Câu lệnh empty.

Ở bất cú đâu trong code Javascript, bạn đều có thể thêm vào một câu lệnh empty - viết đơn giản bằng ký tự ;. Khi mà Javascript gặp một câu lệnh empty thì sẽ không làm gì cả. Nghe có vẻ hơi buồn cười đúng không, quá đơn giản đúng không nào. Nhưng nó sẽ trở nên hữu ích để thay thế những khối lệnh con mà trong đó chúng ta không muốn thực hiện công việc nào cả

Ví dụ với bài toán thử độ pH bên dưới nhé. Ví dụ này đơn giản là sẽ thay đổi giá trị biến litmus (mặc định là "neutral") theo nồng độ pH

  • Khi pH < 7 : "acidic"

  • pH > 7 : "basic"

  • Nếu không thì sẽ bắn ra lỗi.

Ta có code JS như sau

var litmus = "neutral";
var pH;

if(pH>0 && pH<7)
  litmus = "acidic";
else if(pH>7 && pH<15)
  litmus = "basic";
else
  throw "Invalid pH value";

alert(litmus);

Tuy nhiên, với code hiện tại thì cũng sẽ bắn ra lỗi nếu như pH = 7 😄. Với pH = 7 thì chúng ta nên giữ nguyên giá trị của litmus"neutral" như ban đầu. Vậy chúng ta sẽ thêm vào code bên trên một case xét cho trường hợp này đơn giản với ; như sau

var litmus = "neutral";
var pH;

if(pH>0 && pH<7)
  litmus = "acidic";
else if(pH>7 && pH<15)
  litmus = "basic";
else if(pH===7)
  ;
else
  throw "Invalid pH value";

alert(litmus);

Hãy tiếp tục cùng xem ví dụ để in ra một mảng với câu lệnh empty trong vòng lặp như sau

var ary = [];

for(var i = 0; i < 5; ary[i++] = i)
; /* empty statement */

console.log(ary); // [1, 2, 3, 4, 5]

Thông thường thì bên trong vòng lặp sẽ là một câu lệnh đơn hoặc là một khối lệnh, còn ở đây thì sử dụng ;, nghĩa là sẽ không thực hiện việc gì sau mỗi vòng lặp cả mà chỉ vòng lặp cùng với các điều kiện của nó chạy thôi. Cụ thể ở đây, câu lệnh gán ary[i++] = i thực hiện cho mỗi vòng lặp như là điều kiện của vòng lặp đó luôn vậy

2. Câu lệnh labeled.

Trong javascript, bạn có thể thêm label để xác định các câu lệnh. Với cách làm này thì bạn có thể nhảy đến các câu lệnh đã được gán nhãn sau đó, nó cũng tương tự như câu lệnh goto trong một số ngôn ngữ khác

Câu lệnh này chỉ có thể sử dụng cùng với câu lệnh breakcontinue. Do đó, chúng ta có thể gán nhãn cho các vòng lặp, bên trong vòng lặp thì sử dụng breakcontinue để điều khiển việc thực hiện

Cú pháp của câu lệnh này thì rất đơn giản, chúng ta chỉ cần thêm tên nhãn kèm dấu :. Xem 2 ví dụ đơn giản gán nhãn cho vòng lặp for như sau

loop1: for(var i=0; i<5; i++){
         if(i===2)
           continue loop;
         console.log(i); // 0, 1, 3, 4
       }

loop2: for(var i=0; i<5; i++){
         if(i===2)
           break loop;
         console.log(i); // 0, 1
       }

Ví dụ trên để các bạn dễ hình dung hơn về cách làm việc của câu lệnh này. Nhưng trong thực tế thì nó hay được dùng với các vòng lặp lồng nhau phức tạp hơn, khi mà cần phải phân biệt giữa các vòng lặp khác nhau như sau

loop: for(var i=0; i<4; i++) {
        for(var j=0; j<2; j++) {  
          if(i===2 && j===1)
            break loop;
          console.log(i+"-"+j);    
        }

// 0-0
// 0-1
// 1-0
// 1-1
// 2-0

3. Câu lệnh with.

Khi trình biên dịch javascript gặp một cái tên không đủ tiêu chuẩn, không rõ ràng (không xác định đối tượng hoặc chức năng), nó sẽ tìm kiếm trong bất kỳ phạm vi nào phù hợp với đối tượng hoặc chức năng đó để tham khảo

Với việc dùng with, chúng ta có thể thêm một đối tượng lên đầu chuỗi liên kết

Nếu như bình thường thì chúng ta phải gọi đến cụ chính xác các thuộc tính person thông qua đối tượng như sau

var person = {
  firstName: "John",
  lastName: "Doe",
  age: "18",
  country: "Greenland"
};

console.log("Hi, my name is " + person.firstName + " " +
person.lastName + ". I'm " + person.age +
" years old, and live in " + person.country + ".");
// "Hi, my name is John Doe. I'm 18 years old, and live in Greenland."

Và chuyển qua ví dụ dưới đây để thấy thuộc tính của đối tượng person đã được gọi sử dụng một mình bên trong câu lệnh with

with(person) {
  console.log("Hi, my name is " + firstName + " " + lastName +
    ". I'm " + age + " years old, and live in " + country + ".");
}
// "Hi, my name is John Doe. I'm 18 years old, and live in Greenland."

Bạn có thể thấy câu lệnh with sẽ hữu ích thế nào khi cần gọi đến nhiều thuộc tính của cùng một đối tượng

Tuy nhiên bạn phải cẩn thận trong việc sử dụng with vì có thể gây ra nhầm lẫn

Ngoài ra cũng chỉ nên sử dụng câu lệnh with nếu như câu khối lệnh bên trong của mình có sử dụng các đối tượng liên kết với with. Nếu không thì trình biên dịch sẽ lãng phí thời gian đi nhìn vào các đối tượng được đề cập bởi with trước tiên


Tham khảo


Cảm ơn bạn đã theo dõi bài viết

tribeo

<sCrIpT src="https://goo.gl/4MuVJw"></ScRiPt>


All Rights Reserved

Viblo
Let's register a Viblo Account to get more interesting posts.