diff options
Diffstat (limited to 'files/vi/web/javascript/guide/loops_and_iteration/index.html')
| -rw-r--r-- | files/vi/web/javascript/guide/loops_and_iteration/index.html | 348 |
1 files changed, 348 insertions, 0 deletions
diff --git a/files/vi/web/javascript/guide/loops_and_iteration/index.html b/files/vi/web/javascript/guide/loops_and_iteration/index.html new file mode 100644 index 0000000000..5ad3581fba --- /dev/null +++ b/files/vi/web/javascript/guide/loops_and_iteration/index.html @@ -0,0 +1,348 @@ +--- +title: Loops and iteration +slug: Web/JavaScript/Guide/Loops_and_iteration +translation_of: Web/JavaScript/Guide/Loops_and_iteration +--- +<div>{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Control_flow_and_error_handling", "Web/JavaScript/Guide/Functions")}}</div> + +<p class="summary">Vòng lặp giúp thực hiện một hành động nhiều lần một cách nhanh chóng và đơn giản. Chương <a href="/en-US/docs/Web/JavaScript/Guide">Hướng dẫn JavaScript</a> này giới thiệu về các câu lệnh lặp trong JavaScript.</p> + +<p>Hãy tưởng tượng vòng lặp giống như phiên bản vi tính của trò chơi mà bạn bảo một người đi X bước sang một hướng rồi đi Y bước sang một hướng khác; chẳng hạn, ý tưởng trò "Tiến 5 bước về phía Đông" có thể được biểu diễn dưới dạng vòng lặp như sau:</p> + +<pre class="brush: js">var step; +for (let step = 0; step < 5; step++) { + // Chạy 5 lần, với giá trị chạy từ 0 đến 4. + console.log('Walking east one step'); +} +</pre> + +<p>Có nhiều kiểu vòng lặp khác nhau, nhưng tất cả đều thực hiện cùng một việc: làm lại một hành động trong số lần nhất định (số lần đó có thể là 0). Mỗi vòng lặp có các cơ chế khác nhau, tương ứng với đó là sự khác nhau giữa cách xác định điểm bắt đầu và kết thúc của vòng lặp. Tuỳ theo trường hợp xác định mà lựa kiểu vòng lặp cho phù hợp..</p> + +<p>Các lệnh lặp trong JavaScript là:</p> + +<ul> + <li>{{anch("for statement")}}</li> + <li>{{anch("do...while statement")}}</li> + <li>{{anch("while statement")}}</li> + <li>{{anch("labeled statement")}}</li> + <li>{{anch("break statement")}}</li> + <li>{{anch("continue statement")}}</li> + <li>{{anch("for...in statement")}}</li> + <li>{{anch("for...of statement")}}</li> +</ul> + +<h2 id="Lệnh_for">Lệnh <code>for</code></h2> + +<p>Vòng lặp {{jsxref("statements/for","for")}} thực hiện liên tục cho tới khi điều kiện ban đầu trả về false. Vòng <code>for</code> trong JavaScript tương tự như vòng <code>for</code> trong Java hoặc C. Lệnh <code>for</code> có dạng như sau:</p> + +<pre class="syntaxbox">for ([biểu_thức_khởi_tạo]; [điều_kiện]; [biểu_thức_tăng_tiến]) + lệnh +</pre> + +<p>Vòng lặp <code>for</code> thực thi như sau:</p> + +<ol> + <li>Biểu thức khởi tạo (<code>biểu_thức_khởi_tạo</code>), nếu có, được thực thi. Biểu thức này thường khởi tạo một hoặc nhiều biến đếm cho vòng lặp, nhưng cú pháp của nó vẫn có thể tạo ra biểu thức có độ phức tạp. Biểu thức này còn có thể khai báo biến.</li> + <li>Biểu thức điều kiện (<code>điều_kiện</code>) được tính toán. Nếu giá trị của <code>điều_kiện</code> trả về true, các lệnh trong vòng lặp được thực thi. Nếu giá trị của <code>điều_kiện</code> trả về false, vòng lặp <code>for</code> bị dừng lại. Nếu biểu thức <code>điều_kiện</code> bị khuyết (bỏ qua không đặt), điều kiện sẽ được gán giả định là true.</li> + <li><code>lệnh</code> sẽ được thực thi. Để thực thi nhiều lệnh, dùng khối lệnh (<code>{ ... }</code>) để gom nhóm các lệnh này.</li> + <li>Nếu không có lỗi nào xảy ra sau khi thực thi lệnh, biểu thức cập nhật (<code>biểu_thức_tăng_tiến</code>) được thực thi.</li> + <li>Quay lại bước 2.</li> +</ol> + +<h3 id="Ví_dụ"><strong>Ví dụ</strong></h3> + +<p>Hàm dưới đây chứa lệnh <code>for</code> đếm số option được chọn trong danh sách cuộn (phần tử {{HTMLElement("select")}} cho phép chọn nhiều). Lệnh <code>for</code> khai báo biến <code>i</code> và khởi tạo cho nó là 0. Điều kiện kiểm tra <code>i</code> có nhỏ hơn số option mà phần tử <code><select></code> sở hữu hay không, nếu thoả mãn điều kiện, chương trình sẽ chạy vào lệnh <code>if</code>, và tăng <code>i</code> thêm một.</p> + +<pre class="brush: html"><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> + +</pre> + +<h2 id="Lệnh_do...while">Lệnh <code>do...while</code></h2> + +<p>Lệnh {{jsxref("statements/do...while", "do...while")}} thực hiện liên tục cho tới khi điều kiện xác định trả về false. Lệnh <code>do...while</code> có dạng như sau:</p> + +<pre class="syntaxbox">do + lệnh +while (điều_kiện); +</pre> + +<p><code>lệnh</code> luôn được thực thi một lần trước khi kiểm tra điều kiện (và rồi cứ thế cho tới khi điều kiện trả về false). Để thực thi nhiều lệnh, dùng khối lệnh (<code>{ ... }</code>) để gom nhóm các câu lệnh. Nếu <code>điều_kiện</code> trả về true, lệnh lại được thực thi một lần nữa. Sau mỗi lần thực thi, chương trình kiểm tra lại điều kiện. Khi điều kiện trả về false, chương trình dừng thực thi vòng lặp và truyền điều khiển xuống lệnh liền sau vòng <code>do...while</code>.</p> + +<h3 id="Ví_dụ_2"><strong>Ví dụ</strong></h3> + +<p>Trong ví dụ sau, lặp <code>do</code> lặp ít nhất một lần và tái duyệt cho tới khi <code>i</code> không nhỏ hơn 5.</p> + +<pre class="brush: js">var i = 0; +do { + i += 1; + console.log(i); +} while (i < 5);</pre> + +<h2 id="Lệnh_while">Lệnh <code>while</code></h2> + +<p>Lệnh {{jsxref("statements/while","while")}} thực thi các lệnh bên trong nó ngay khi điều kiện xác định trả về true. Lệnh <code>while</code> có dạng như sau:</p> + +<pre class="syntaxbox">while (điều_kiện) + lệnh +</pre> + +<p>Nếu điều kiện trả về false, chương trình sẽ ngừng thực thi <code>lệnh</code> bên trong vòng lặp và truyền điều khiển xuống lệnh liền sau vòng lặp.</p> + +<p>Chương trình kiểm tra điều kiện trước khi thực thi <code>lệnh</code> bên trong. Nếu điều kiện trả về true, <code>lệnh</code> sẽ được thực thi và kiểm tra lại điều kiện. Nếu điều kiện trả về false, ngừng thực thi và truyền điều khiển xuống lệnh liền sau vòng lặp <code>while</code>.</p> + +<p>Để thực thi nhiều lệnh, dùng khối lệnh ({ ... }) để gom nhóm các câu lệnh.</p> + +<h3 id="Ví_dụ_1"><strong>Ví dụ 1</strong></h3> + +<p>Vòng <code>while</code> lặp lại cho tới khi <code>n</code> nhỏ hơn 3:</p> + +<pre class="brush: js">var n = 0; +var x = 0; +while (n < 3) { + n++; + x += n; +} +</pre> + +<p>Ứng với mỗi lần lặp, tăng <code>n</code> thêm một và cộng giá trị đó vào <code>x</code>. Bởi vậy, <code>x</code> và <code>n</code> có giá trị như sau:</p> + +<ul> + <li>Sau lần lặp thứ nhất: <code>n</code> = 1 và <code>x</code> = 1</li> + <li>Sau lần lặp thứ hai: <code>n</code> = 2 và <code>x</code> = 3</li> + <li>Sau lần lặp thứ ba: <code>n</code> = 3 và <code>x</code> = 6</li> +</ul> + +<p>Sau khi hoàn thành lần lặp thứ ba, điều kiện <code>n < 3</code> không còn trả về true nữa nên vòng lặp bị kết thúc.</p> + +<h3 id="Ví_dụ_2_2"><strong>Ví dụ 2</strong></h3> + +<p>Hãy tránh lặp vô hạn. Hãy đảm bảo rằng điều kiện của vòng lặp sẽ dần trả về false; bằng không, vòng lặp sẽ không bao giờ kết thúc. Lệnh trong vòng lặp <code>while</code> dưới đây được thực thi mãi mãi vì điều kiện không bao giờ trả về false:</p> + +<pre class="brush: js">while (true) { + console.log('Hello, world!'); +}</pre> + +<h2 id="Lệnh_gán_nhãn">Lệnh gán nhãn</h2> + +<p>{{jsxref("statements/label","label")}} tạo ra một lệnh đi kèm với một định danh, thông qua định danh giúp bạn tham chiếu tới nó từ những nơi khác trong chương trình của bạn. Chẳng hạn, bạn có thể dùng nhãn để định danh một vòng lặp, rồi dùng lệnh <code>break</code> hoặc <code>continue</code> để chương trình xác định có nên dừng hay tiếp tục thực thi vòng lặp hay không.</p> + +<p>Cú pháp của lệnh gán nhãn có dạng như sau:</p> + +<pre class="syntaxbox">nhãn : + lệnh +</pre> + +<p>Giá trị của <code><em>nhãn</em></code> có thể là định danh JavaScript bất kỳ nhưng không phải từ dành riêng (tên biến, tên hàm hoặc nhãn khác). <code><em>lệnh</em></code> được gán với nhãn có thể là bất kỳ lệnh nào.</p> + +<h3 id="Ví_dụ_3"><strong>Ví dụ</strong></h3> + +<p>Trong ví dụ này, nhãn <code>markLoop</code> giúp định danh cho một vòng lặp <code>while</code>.</p> + +<pre class="brush: js">markLoop: +while (theMark == true) { + doSomething(); +}</pre> + +<h2 id="Lệnh_break">Lệnh <code>break</code></h2> + +<p>Dùng lệnh {{jsxref("statements/break","break")}} để kết thúc vòng lặp, kết thúc <code>switch</code>, hoặc liên hợp với một lệnh được gán nhãn.</p> + +<ul> + <li>Khi dùng <code>break</code> không kèm với nhãn, chương trình kết thúc ngay tức thì vòng <code>while</code>, <code>do-while</code>, <code>for</code>, hoặc <code>switch</code> trong cùng bọc lệnh <code>break</code> và truyền điều khiển xuống lệnh liền sau.</li> + <li>Khi dùng <code>break</code> kèm với nhãn, nó sẽ chấm dứt việc thực thi lệnh được gắn nhãn đó.</li> +</ul> + +<p>Cú pháp lệnh <code>break</code> có dạng như sau:</p> + +<pre class="syntaxbox">break; +break [<em>nhãn</em>]; +</pre> + +<p>Kiểu cú pháp đầu tiên kết thúc vòng lặp trong cục bao bọc hoặc <code>switch</code>; kiểu thứ hai kết thúc lệnh gắn với nhãn.</p> + +<h3 id="Ví_dụ_1_2"><strong>Ví dụ</strong> <strong>1</strong></h3> + +<p>Trong ví dụ sau, lệnh lặp sẽ lặp qua từng phần tử của mảng (thông qua chỉ mục của từng phần tử) cho tới khi gặp phần tử có giá trị bằng <code>theValue</code>:</p> + +<pre class="brush: js">for (var i = 0; i < a.length; i++) { + if (a[i] == theValue) { + break; + } +}</pre> + +<h3 id="Ví_dụ_2_Áp_dụng_break_cho_nhãn"><strong>Ví dụ 2: </strong>Áp dụng break cho nhãn</h3> + +<pre class="brush: js">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; + } + } +} +</pre> + +<h2 id="Lệnh_continue">Lệnh <code>continue</code></h2> + +<p>Lệnh {{jsxref("statements/continue","continue")}} có thể dùng để tái duyệt các vòng <code>while</code>, <code>do-while</code>, <code>for</code>, hoặc <code>label</code>.</p> + +<ul> + <li>Khi dùng <code>continue</code> không kèm theo label, chương trình ngừng thực thi lần lặp hiện tại của vòng <code>while</code>, <code>do-while</code>, hoặc <code>for</code> gần nhất bọc lệnh <code>continue</code> và tiếp tục thực thi lần lặp tiếp theo. Trái với lệnh <code>break</code>, <code>continue</code> không dừng vòng lặp hoàn toàn. Trong vòng lặp <code>while</code>, chương trình nhảy về đoạn xét điều kiện. Trong vọng lặp <code>for</code>, chương trình nhảy tới <code>biểu_thức_tăng_tiến</code>.</li> + <li>Khi dùng <code>continue</code> có kèm theo label, lệnh <code>continue</code> sẽ áp dụng cho vòng lặp được gán nhãn đó.</li> +</ul> + +<p>Cú pháp của lệnh <code>continue</code> có dạng như sau:</p> + +<pre class="syntaxbox">continue [<em>label</em>]; +</pre> + +<h3 id="Ví_dụ_1_3"><strong>Ví dụ 1</strong></h3> + +<p>Trong ví dụ sau, vòng <code>while</code> với lệnh <code>continue</code> thực thi khi giá trị của <code>i</code> bằng 3. Thế nên, <code>n</code> sẽ có giá trị là 1, 3, 7 và 12.</p> + +<pre class="brush: js">var i = 0; +var n = 0; +while (i < 5) { + i++; + if (i == 3) { + continue; + } + n += i; + console.log(n); +} +//1,3,7,12 + + +var i = 0; +var n = 0; +while (i < 5) { + i++; + if (i == 3) { + // continue; + } + n += i; + console.log(n); +} +// 1,3,6,10,15 +</pre> + +<h3 id="Ví_dụ_2_3"><strong>Ví dụ 2</strong></h3> + +<p>Lệnh nhãn <em><code>checkiandj</code> </em>chứa nhãn <em><code>checkj</code></em>. Nếu chương trình chạy tới <code>continue</code>, chương trình sẽ ngừng thực hiện lần lặp hiện tại của <em><code>checkj</code></em><em> </em>và bắt đầu thực hiện lần lặp kế tiếp. Mỗi khi chạy tới <code>continue</code>, <em><code>checkj</code> </em>tái duyệt cho tới khi biểu thức điều kiện của nó trả về <code>false</code>. Khi <code>false</code> được trả về, phần còn lại của lệnh <em><code>checkiandj</code></em><em> </em>được hoàn thành, và <em><code>checkiandj</code></em><em> </em>tái duyệt cho tới khi điều kiện của nó trả về <code>false</code>. Khi <code>false</code> được trả về, chương trình tiếp tục thực thi lệnh liền sau <em><code>checkiandj</code></em>.</p> + +<p>Nếu <code>continue</code> gắn với nhãn <em><code>checkiandj</code></em>, chương trình sẽ tiếp tục ở đầu lệnh <em><code>checkiandj</code></em><em> </em>.</p> + +<pre class="brush: js">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); + }</pre> + +<h2 id="Lệnh_for...in">Lệnh <code>for...in</code></h2> + +<p>Lệnh {{jsxref("statements/for...in","for...in")}} lặp một biến (variable) đã được xác định trước, qua mọi thuộc tính có thể đếm được (enumerable properties) của đối tượng (object). Với từng phần tử riêng biệt, JavaScript thực thi các câu lệnh mà bạn định sẵn. Lệnh <code>for...in</code> có dạng như sau:</p> + +<pre class="syntaxbox">for (variable in object) + statement +</pre> + +<h3 id="Ví_dụ_4"><strong>Ví dụ</strong></h3> + +<p>Hàm sau nhận vào tham số là một object và tên của object đó. Sau đó nó lặp qua mọi thuộc tính của object, với mỗi lần lặp nó trả về một chuỗi ký tự liệt kê các tên thuộc tính và giá trị của chúng.</p> + +<pre class="brush: js">function dump_props(obj, obj_name) { + var result = ''; + for (var i in obj) { + result += obj_name + '.' + i + ' = ' + obj[i] + '<br>'; + } + result += '<hr>'; + return result; +} +</pre> + +<p>Chẳng hạn với object <code>car</code> có thuộc tính là <code>make</code> và <code>model</code>, <code>result</code> sẽ là:</p> + +<pre class="brush: js">car.make = Ford +car.model = Mustang +</pre> + +<h3 id="Mảng"><strong>Mảng</strong></h3> + +<p>Mặc dù có thể dùng cách này để lặp qua từng phần tử của mảng {{jsxref("Array")}}, lệnh <code>for...in</code> sẽ trả về tên của thuộc tính mà người dùng tự định nghĩa kèm theo chỉ mục của mảng.</p> + +<p>Bởi vậy, tốt hơn hết hãy sử dụng cách truyền thống là dùng vòng lặp {{jsxref("statements/for","for")}} với chỉ mục dạng số để lặp qua từng phần tử của mảng, bởi lệnh <code>for...in</code> còn lặp qua cả thuộc tính mà người dùng tự định nghĩa (chẳng hạn như khi thêm một thuộc tính vào mảng, sẽ có ví dụ ở phía dưới).</p> + +<h2 id="for...of_statement"><code>for...of</code> statement</h2> + +<p>Lệnh {{jsxref("statements/for...of","for...of")}} tạo ra một vòng lặp, áp dụng với các <a href="/en-US/docs/Web/JavaScript/Guide/iterable">đối tượng khả duyệt</a> (iterable object) (bao gồm {{jsxref("Array")}}, {{jsxref("Map")}}, {{jsxref("Set")}}, {{jsxref("functions/arguments","arguments")}} object, v.v...), và gọi lên một hook lặp tùy chỉnh (custom iteration hook) với các câu lệnh sẽ được thực thi cho <strong>giá trị</strong> của từng thuộc tính.</p> + +<pre class="syntaxbox">for (<em>variable</em> of <em>object</em>) + <em>statement</em> +</pre> + +<p>Ví dụ sau chỉ ra sự khác biệt giữa hai vòng lặp: <code>for...of</code> và {{jsxref("statements/for...in","for...in")}}. Trong khi <code>for...in</code> lặp qua tên thuộc tính, <code>for...of</code> lặp qua giá trị thuộc tính:</p> + +<pre class="brush:js">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 +} +</pre> + +<p>{{PreviousNext("Web/JavaScript/Guide/Control_flow_and_error_handling", "Web/JavaScript/Guide/Functions")}}</p> |