vi
new
0
Avatar
Tuyến Nguyễn @nguyen.thi.tuyen
458 29 25
Đã đăng vào thg 9 26, 2017 11:15 SA 8 phút đọc
610

Bắt Đầu với Javascript (P5)

Trong phần này ta sẽ đi tìm hiểu về cách sử dụng các câu lệnh lặp có sẵn trong javascript.

Bạn có thể nghĩ ra một vòng lặp như một phiên bản máy tính của trò chơi, nơi bạn nói với ai đó để thực hiện X bước theo một hướng thì Y; ví dụ, ý tưởng "Đi 5 bước về phía đông" có thể được thể hiện theo cách này như là một vòng lặp:

ví dụ:

var step;
for (step = 0; step < 5; step++) {
  // Runs 5 times, with values of step 0 through 4.
  console.log('Walking east one step');
}

Có nhiều kiểu vòng lặp khác nhau, nhưng tất cả đều làm tương tự: nó lặp lại một hành động một số lần (và thực tế số đó có thể là số không). Các cơ chế vòng lặp khác nhau cung cấp các cách khác nhau để xác định điểm bắt đầu và kết thúc của vòng lặp. Có nhiều tình huống dễ dàng được phục vụ bởi một loại vòng lặp khác.

Các câu lệnh cho các vòng lặp được cung cấp trong JavaScript là:

  • for statement
  • do...while statement
  • while statement
  • labeled statement
  • break statement
  • continue statement
  • for...in statement
  • for...of statement

1. Lệnh for

Một vòng lặp for lặp lại cho đến khi một điều kiện xác định được đánh giá là sai. Vòng lặp của JavaScript tương tự như vòng lặp Java và C cho. Cú pháp như sau:

for ([initialExpression]; [condition]; [incrementExpression])
  statement

Khi vòng lặp for thực thi, điều sau xảy ra:

  • Biểu thức khởi tạo initialExpression, nếu có, được thực hiện. Biểu thức này thường khởi tạo một hoặc nhiều vòng lặp, nhưng cú pháp cho phép biểu hiện bất kỳ mức độ phức tạp nào. Biểu thức này cũng có thể khai báo biến.
  • Biểu thức condition được đánh giá. Nếu giá trị của điều kiện là đúng, các câu lệnh lặp thực hiện. Nếu giá trị của điều kiện là sai, thì vòng lặp for sẽ kết thúc. Nếu biểu thức điều kiện bị bỏ qua hoàn toàn, điều kiện được giả định là đúng.
  • Các statement thực hiện. Để thực hiện nhiều câu lệnh, sử dụng lệnh block statement ({...}) để nhóm các câu lệnh đó.
  • Nếu có, biểu thức cập nhật incrementExpression được thực hiện.
  • Điều kiển trở về bước 2.

ví dụ:

<form name="selectForm">
  <p>
    <label for="musicTypes">Choose some music types, then click the button below:</label>
    <select id="musicTypes" name="musicTypes" multiple="multiple">
      <option selected="selected">R&B</option>
      <option>Jazz</option>
      <option>Blues</option>
      <option>New Age</option>
      <option>Classical</option>
      <option>Opera</option>
    </select>
  </p>
  <p><input id="btn" type="button" value="How many are selected?" /></p>
</form>

<script>
function howMany(selectObject) {
  var numberSelected = 0;
  for (var i = 0; i < selectObject.options.length; i++) {
    if (selectObject.options[i].selected) {
      numberSelected++;
    }
  }
  return numberSelected;
}

var btn = document.getElementById('btn');
btn.addEventListener('click', function() {
  alert('Number of options selected: ' + howMany(document.selectForm.musicTypes));
});
</script>

2. lệnh do...while

Các lệnh do ... while lặp đi lặp lại cho đến khi một điều kiện quy định đánh giá sai. Một lệnh do ... while có cú pháp như sau:

do
  statement
while (condition);

statement thực hiện một lần trước khi condition được kiểm tra. Để thực hiện nhiều câu lệnh, sử dụng lệnh block statement ({...}) để nhóm các câu lệnh đó. Nếu điều kiện là đúng, câu lệnh sẽ thực hiện lại. Vào cuối mỗi lần thực hiện, điều kiện được kiểm tra. Khi điều kiện là sai, việc thực hiện dừng lại.

ví dụ:

var i = 0;
do {
  i += 1;
  console.log(i);
} while (i < 5);

3. lệnh while

Lệnh while thực thi các câu lệnh của nó miễn là một điều kiện xác định được đánh giá là true. Cú pháp lệnh while như sau:

while (condition)
  statement

Nếu condition là sai, các statement trong vòng lặp dừng thực hiện và điều khiển đi đến các lệnh sau vòng lặp.

Kiểm tra condition xảy ra trước khi các statement trong vòng lặp được thực hiện. Nếu condition trả về đúng, câu lệnh được thực hiện và condition được kiểm tra lại. Nếu điều kiện trả về false, việc thực hiện dừng và điều khiển được truyền cho câu lệnh sau.

Để thực hiện nhiều câu lệnh, sử dụng lệnh block statement ({...}) để nhóm các câu lệnh đó.

ví dụ:

var n = 0;
var x = 0;
while (n < 3) {
  n++;
  x += n;
}

4. lệnh labeled

label cung cấp một lệnh với một số nhận dạng cho phép bạn tham chiếu nó ở nơi khác trong chương trình của bạn. Ví dụ, bạn có thể sử dụng một nhãn để xác định một vòng lặp, và sau đó sử dụng các câu lệnh break hoặc continue để cho biết liệu một chương trình nên ngắt đoạn vòng lặp hay tiếp tục thực hiện nó.

Cú pháp của câu lệnh labeled sẽ như sau:

label :
   statement

Giá trị của label có thể là bất kỳ nhận dạng JavaScript nào không phải là từ dành riêng. statement mà bạn xác định với một nhãn có thể là lệnh bất kỳ .

ví dụ:

markLoop:
while (theMark == true) {
   doSomething();
}

5. lệnh break

Sử dụng câu lệnh break để kết thúc một vòng lặp, chuyển đổi, hoặc kết hợp với một câu lệnh labeled.

Khi bạn sử dụng break mà không có label, nó sẽ chấm dứt bao vây bên trong, while, do-while, for, hoặc switch ngay lập tức và chuyển quyền kiểm soát sang câu lệnh sau.

Khi bạn sử dụng break với một label, nó sẽ chấm dứt câu lệnh đã được chỉ định.

Cú pháp của câu lệnh break như sau:

break [label];

Ví dụ 1:

for (var i = 0; i < a.length; i++) {
  if (a[i] == theValue) {
    break;
  }
}

Ví dụ 2: Breaking với 1 label

var x = 0;
var z = 0;
labelCancelLoops: while (true) {
  console.log('Outer loops: ' + x);
  x += 1;
  z = 1;
  while (true) {
    console.log('Inner loops: ' + z);
    z += 1;
    if (z === 10 && x === 10) {
      break labelCancelLoops;
    } else if (z === 10) {
      break;
    }
  }
}

6. lệnh continue

Câu lệnh continue có thể được dùng để khởi động lại câu lệnh while, do-while, for, hoặc label.

Khi bạn sử dụng continue mà không có label, nó sẽ chấm dứt sự lặp lại hiện tại của vòng trong nhất lệnh while, do-while, hoặc for và tiếp tục thực hiện vòng lặp với lần lặp kế tiếp. Ngược lại với câu lệnh break, continue không chấm dứt việc thực hiện các vòng lặp hoàn toàn. Trong một vòng lặp while, nó nhảy trở lại condition. Trong một vòng lặp for, nó nhảy tới biểu thức increment-expression.

Khi bạn sử dụng continue với một label, nó áp dụng cho câu lệnh lặp kết hợp được xác định với nhãn đó.

Cú pháp của câu lệnh continue giống như sau:

continue [label];

Ví dụ 1:

var i = 0;
var n = 0;
while (i < 5) {
  i++;
  if (i == 3) {
    continue;
  }
  n += i;
}

Ví dụ 2:

var i = 0;
var j = 10;
checkiandj:
  while (i < 4) {
    console.log(i);
    i += 1;
    checkj:
      while (j > 4) {
        console.log(j);
        j -= 1;
        if ((j % 2) == 0) {
          continue checkj;
        }
        console.log(j + ' is odd.');
      }
      console.log('i = ' + i);
      console.log('j = ' + j);
  }

7. lệnh for...in

Câu lệnh for ... in sẽ lặp lại một biến được chỉ định trên tất cả các thuộc tính liệt kê của một đối tượng. Đối với mỗi thuộc tính riêng biệt, JavaScript thực hiện các câu lệnh được chỉ định. Một lệnh for .. in có cú pháp như sau:

for (variable in object) {
  statements
}

ví dụ:

function dump_props(obj, obj_name) {
  var result = '';
  for (var i in obj) {
    result += obj_name + '.' + i + ' = ' + obj[i] + '<br>';
  }
  result += '<hr>';
  return result;
}

8. lệnh for...of

Câu lệnh for ... of tạo ra một vòng lặp lặp lại các đối tượng lặp lại (bao gồm cả Array, Map, Set, arguments ...), gọi một móc lặp tùy chỉnh với các câu lệnh để thực thi cho giá trị của từng thuộc tính riêng biệt.

for (variable of object) {
  statement
}

Ví dụ sau cho thấy sự khác biệt giữa vòng lặp for...of và vòng lặp for...in. Trong khi for...in lặp trên tên thuộc tính. for...of lặp trên giá trị thuộc tính:

var arr = [3, 5, 7];
arr.foo = 'hello';

for (var i in arr) {
   console.log(i); // logs "0", "1", "2", "foo"
}

for (var i of arr) {
   console.log(i); // logs 3, 5, 7
}

Kết luận:

Trên đây là một số kiến thức cơ bản về các loại vòng lặp trong javascrip. Cảm ơn bạn đã theo dõi bài viết, mong rằng nó có thể giúp ích cho bạn.

Tham khảo: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Loops_and_iteration

JavaScript Framework

All rights reserved

Mục lục


Viblo
Hãy đăng ký một tài khoản Viblo để nhận được nhiều bài viết thú vị hơn.
Đăng kí