Nắm vững nghệ thuật lặp trong JavaScript với những thủ thuật đáng kinh ngạc này

bởi Yogi

Nhiều lần trong mã của bạn, bạn yêu cầu lặp qua một mảng số, chuỗi hoặc đối tượng. Có rất nhiều cách để làm điều đó và hướng dẫn này nhằm mục đích dạy cho bạn tất cả những cách đó để bạn trở thành Bậc thầy về ‘Vòng lặp trong JavaScript’.

Xem chú mèo ninja này là bậc thầy về nhảy.

thông qua GIPHY

Giống như con mèo, bạn cũng sẽ trở thành Bậc thầy về vòng lặp JavaScript, sau khi bạn biết tất cả các thủ thuật lặp.

1. Vòng lặp “Cho”

Các cho vòng lặp là cách cơ bản nhất để lặp trong mã JavaScript của bạn. Rất thuận tiện để thực thi một khối mã nhiều lần. Nó sử dụng một phản đốicó giá trị được khởi tạo đầu tiên và sau đó giá trị cuối cùng của nó được chỉ định.

Các bộ đếm được tăng lên bởi một giá trị cụ thể mỗi khi vòng lặp chạy. Vòng lặp for kiểm tra xem bộ đếm có nằm trong giới hạn (giá trị ban đầu đến giá trị cuối cùng) và vòng lặp kết thúc khi giá trị bộ đếm vượt qua giá trị cuối cùng.

Hãy để tôi chỉ cho bạn một số ví dụ.

một. Vòng qua một mảng

Trong đoạn mã dưới đây, tôi đang lặp qua tất cả các số trong một mảngvà in từng cái trong số chúng trên cửa sổ bảng điều khiển.

var numbers = [10, 20, 30, 40, 50];
for (var i = 0; i < numbers.length; i++) {
    console.log(numbers[i]);
}

Theo cách tương tự, bạn cũng có thể lặp qua các mảng chuỗi.

b. Lặp qua các phần tử DOM

Giả sử bạn muốn tìm và tô màu tất cả các mỏ neo trong trang màu đỏ. Sau đó, ở đây cũng vậy, bạn có thể sử dụng cho vòng lặp như thế này:

var elements = document.querySelectorAll("a");
for (var i= 0; i < elements.length; i++) {
    elements[i].style.color = "red";
}

Giải trình: Lần đầu tiên tôi có tất cả các neo trong một mảng bằng cách sử dụng document.querySelectorAll("a"). Sau đó, tôi chỉ cần lặp qua chúng và đổi màu của chúng thành màu đỏ.

Tôi đã truy cập trang web W3Schools và chạy đoạn mã trên trên bảng điều khiển của trình duyệt và xem nó đã làm được gì:

Ghi chú: jQuery cũng có một phương pháp lặp rất tốt được gọi là jQuery Mỗi phương thức giúp bạn lặp qua các mảng, đối tượng, phần tử DOM, JSON & XML khá dễ dàng. Nếu bạn đang sử dụng jQuery trong trang web của mình thì hãy cân nhắc sử dụng nó trong khi lặp.

2. Vòng lặp “For In”

Các Tại vòng lặp được sử dụng để lặp qua thuộc tính của đối tượng/mảng mà không cần sử dụng ‘bộ đếm’. Vì vậy, nó là một phiên bản đơn giản hóa của cho vòng lặp.

Khối mã bên trong vòng lặp sẽ được thực thi một lần cho mỗi thuộc tính.

một. Lặp qua một thuộc tính đối tượng

Tôi có một đối tượng chứa một số thuộc tính. tôi sẽ sử dụng Đối với vòng lặp để tìm kiếm mọi thuộc tính và giá trị của nó.

Mã bên dưới in tất cả các thuộc tính và giá trị của chúng trong cửa sổ giao diện điều khiển.

var person = { fname: "Nick", lname: "Jonas", age: 26 };
for (var x in person) {
    console.log(x + ": " + person[x])
}

b. Lặp qua JSON

JSON là một định dạng rất phổ biến để truyền các đối tượng dữ liệu bao gồm giá trị thuộc tính cặp và kiểu dữ liệu mảng. Các trang web sử dụng JSON để chia sẻ thông tin của họ với các trang web bên ngoài. Bây giờ tôi sẽ cho bạn biết cách trích xuất dữ liệu từ JSON.

Giả sử tôi có một số JSON chứa một số thông tin, như hình bên dưới:

jsonData: {
one: [11, 12, 13, 14, 15],
two: [21, 22, 23],
three: [31, 32]
}

JSON có một nút gốc được gọi là ‘jsonData‘, và cái này chứa 3 nút — ‘một‘, ‘hai‘, ‘số ba‘. Các nút còn được gọi là khóa.

Đoạn mã dưới đây cho thấy cách trích xuất thông tin từ JSON bằng cách sử dụng Tại vòng:

var json = {
jsonData: {
one: [11, 12, 13, 14, 15],
two: [21, 22, 23],
three: [31, 32]
}
};

for (var key in json.jsonData) {
    for (var key1 in json.jsonData[key]) {
        console.log(json.jsonData[key][key1])
    }
}

Giải trình: Có 2 Đối với các vòng lặp trong đoạn mã trên – Vòng lặp bên ngoài & Vòng lặp bên trong.

Các Vòng ngoài chạy 3 lần và bao gồm các nút ‘một’, ‘hai’ & ‘ba’.

Các Vòng trong bao gồm tất cả các giá trị bên trong nút đã chọn, tức là các nút ‘một’, ‘hai’ và ‘ba’.

Chạy mã trong trang web của bạn hoặc trong cửa sổ bảng điều khiển của trình duyệt và bạn sẽ thấy tất cả các giá trị của các nút được in ra, giống như trong hình bên dưới:

Đi sâu hơn một chút vào JSON

JSON giống nhau có thể được thể hiện bằng cách đặt [] để chứa 3 nút ‘một’, ‘hai’, ‘ba’:

jsonData: [{
one: [11, 12, 13, 14, 15]
}, {
two: [21, 22, 23]
}, {
three: [31, 32]
}]

Bây giờ tôi sẽ sử dụng kết hợp Cho & Cho Trong để trích xuất tất cả thông tin từ JSON này. Đoạn mã dưới đây thực hiện công việc này với tôi:

var json = {
jsonData: [{
one: [11, 12, 13, 14, 15]
}, {
two: [21, 22, 23]
}, {
three: [31, 32]
}]
};

for (var i = 0; i < json.jsonData.length; i++) {
    for (var key in json.jsonData[i]) {
        for (var j = 0; j < json.jsonData[i][key].length; j++) {
            console.log(json.jsonData[i][key][j])
        }
    }
}

3. Vòng lặp “While”

Các Trong khi lặp lại có một điều kiện được chỉ định trong đó. Nó kiểm tra điều kiện và thực thi khối mã miễn là điều kiện là đúng. Lưu ý rằng vòng lặp while không có một quầy giống như vòng lặp for.

một. Lặp qua một phần tử bảng HTML

Giả sử tôi có một bảng HTML cho thấy giá của các sản phẩm khác nhau. Bảng HTML này trông giống như hình dưới đây:

Bạn có thể thấy rằng bảng này không hiển thị Tổng giá của tất cả các sản phẩm. Vì vậy, nếu có yêu cầu để bạn hiển thị tổng giá thì bạn có thể lặp qua tất cả các giá và hiển thị tổng số ở cuối bảng. Đây là cách bạn sẽ làm điều đó.

Thêm mã Bảng HTML vào trang web của bạn:

<table id="priceTable">
    <tr>
        <th>Id</th>
        <th>Product Name</th>
        <th>Product Price</th>
    </tr>
    <tr> 
        <td>1</td>
        <td>Shirts</td>
        <td>49.99</td>
    </tr>
    <tr>
        <td>2</td>
        <td>Pants</td>
        <td>55.50</td>
    </tr>
    <tr> 
        <td>3</td>
        <td>Socks</td>
        <td>20</td>
    </tr>
    <tr>
        <td>4</td>
        <td>Shoes</td>
        <td>99</td>
    </tr>
    <tr>
        <td>5</td>
        <td>Jackets</td>
        <td>88.90</td>
    </tr>
</table>

Tiếp theo, thêm CSS để tạo thiết kế phù hợp cho bảng html này:

<style>
    #priceTable {
       font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
       border-collapse: collapse;
       width: 100%;
    }

        #priceTable td, #priceTable th {
            border: 1px solid #ddd;
            padding: 8px;
        }

        #priceTable tr {
            background-color: #f2f2f2;
        }

        #priceTable th {
            padding-top: 12px;
            padding-bottom: 12px;
            text-align: left;
            background-color: #4CAF50;
            color: white;
        }
</style>

Bây giờ lặp qua bảng với Trong khi lặp lại và tính tổng của tất cả các sản phẩm. Vì vậy, hãy thêm mã JavaScript bên dưới vào trang web của bạn để thực hiện công việc này:

var table = document.getElementById("priceTable");

var i = 1;
var sum = 0;
while (i < table.rows.length) {
    sum += parseFloat(table.rows[i].cells[2].innerHTML)
    i++;
}

var row = table.insertRow(i);
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
var cell3 = row.insertCell(2);

cell2.innerHTML = "Total Price";
cell3.innerHTML = sum;

Giải trình: Đầu tiên tôi lấy tham chiếu của bảng bằng cách sử dụng var table = document.getElementById("priceTable"). Sau đó, tôi đã thêm 2 biến gọi là ‘i’ và ‘sum’. Biến ‘i’ là biến có điều kiện của vòng lặp while, trong khi ‘sum’ sẽ tiếp tục thêm giá của mọi sản phẩm vào đó.

Vì vậy, tôi đã chạy trong khi lặp lại đối với giá trị biến ‘i’ từ 1 đến (tổng số hàng -1). Tôi đã nhận được tổng số hàng trong bảng bằng bảng.rows.length và thêm nó vào điều kiện của vòng lặp while:

while (i < table.rows.length) {
  //…
}

Ghi chú: Bảng có 6 hàng từ chỉ mục 0 đến 5 và mỗi hàng có 3 cột từ chỉ mục 0 đến 2. Tôi đặc biệt chạy vòng lặp từ giá trị biến ‘i’ là 1 chứ không phải 0. Điều này là do trong chỉ mục thứ 0 của hàng của bảng có tên của cột (mà tôi không cần).

Trong vòng lặp while, tôi tiếp tục cộng các giá trị của giá của từng sản phẩm vào biến tổng như sau:sum += parseFloat(table.rows[i].cells[2].innerHTML) và cuối cùng tăng giá trị của ‘i’ lên 1.

Ví dụ: khi giá trị ‘i’ là 1 thì table.rows[1] mang lại cho tôi hàng đầu tiên (phần tử ‘tr’ đầu tiên). Tương tự table.rows[1].cells[2] sẽ đưa ra giá trị của cột giá (phần tử giá ‘td’) của hàng đầu tiên.

Sau khi vòng lặp hoàn thành, tôi đang thêm một hàng mới vào bảng vào lúc cuối cùng. Bên trong hàng này, tôi đang thêm 3 cột — chỉ mục thứ 0, chỉ mục thứ nhất và chỉ mục thứ 2. Cuối cùng, tôi hiển thị chuỗi ‘tổng’ trong cột đầu tiên và tổng giá có trong biến ‘tổng’ trong cột thứ 2.

Mã thực hiện việc bổ sung hàng mới này là:

var row = table.insertRow(i);
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
var cell3 = row.insertCell(2);

cell2.innerHTML = "Total Price";
cell3.innerHTML = sum;

Các table.insertRow(i) sẽ thêm hàng thứ 6 vì giá trị ‘i’ của biến là 6 tại thời điểm Trong khi lặp lại kết thúc.

Các cột (phần tử ‘td’) được thêm vào hàng mới này bởi row.insertCell(0), row.insertCell(1), row.insertCell(2).

Tôi hiển thị một giá trị bên trong cột bằng cách:

cell2.innerHTML = "Total Price";
cell3.innerHTML = sum;

Đoạn mã JavaScript trên sẽ tạo một hàng mới chứa tổng giá của sản phẩm. Bây giờ bảng sẽ trông giống như:

b. Vòng lặp vô tận

Dưới đây là vòng lặp vô hạn trong câu lệnh While:

var infiVal = true;

while (infiVal) {
  // your code
}

Lưu ý: Vòng lặp vô hạn có thể làm treo trình duyệt nên yêu cầu chạy vòng lặp với khoảng cách vài mili giây. Bạn có thể dùng Phương thức setInterval trong JavaScript để chạy một chức năng nhất định cứ sau 1000 mili giây. Xem đoạn mã dưới đây:

var myVar = setInterval(myTimer, 1000);

function myTimer() {
  // your code
}

Hướng dẫn tham khảo — Hiểu các phương thức hẹn giờ “setTimeout()” và “setInterval()” trong jQuery/JavaScript

4. Vòng lặp “Do While”

Trong Vòng lặp Do While điều kiện để được kiểm tra được đưa ra ở cuối, và do đó vòng lặp thực hiện ít nhất một lần ngay cả khi điều kiện không đúng. Kiểm tra đoạn mã dưới đây sẽ đưa ra thông báo ‘Xin chào’ trên hộp cảnh báo, ngay cả khi điều kiện sai ngay từ đầu (vì giá trị ‘i’ của biến luôn lớn hơn 1).

var i = 2;

do {
    alert("Hello");
    i++;
}
while (i < 1);

một. Vòng qua XML

Bây giờ tôi sẽ sử dụng Vòng lặp Do While cho làm thế nào để lặp qua XML và trích xuất dữ liệu từ nó. Tôi có một tệp XML tên là ‘XMLFile1.xml’ có nội dung là:

<?xml version="1.0" encoding="utf-8" ?>
<cities>
    <city>Washington DC</city>    
    <city>Islamabad</city>
    <city>Beijing</city>
    <city>Tokyo</city>
</cities>

tôi sẽ sử dụng AJAX để đọc tệp XML này và sau đó lặp qua nó với vòng lặp Do While. Đoạn mã dưới đây in tất cả tên của các thành phố (được cung cấp trong tệp XML) trong cửa sổ bảng điều khiển.

var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function () {
    if (this.readyState == 4 && this.status == 200) {
        myFunction(this);
    }
};
xhttp.open("GET", "XMLFile1.xml", true);
xhttp.send();

function myFunction(xml) {
    var xmlDoc = xml.responseXML;
    var cityNames = Array.from(xmlDoc.getElementsByTagName("city"));
    var i = 0;  
    
    do {
        console.log(cityNames[i].innerHTML);
        i++;
    }
    while (i < cityNames.length);
}

Giải trình: Tôi đã tạo một XMLHttpRequest đối tượng để thực hiện cuộc gọi AJAX. Khi tệp XML được đọc thì sự kiện được gọi là onreadystatechange được nâng lên, xem mã bên dưới:

xhttp.onreadystatechange = function () {
    if (this.readyState == 4 && this.status == 200) {
        myFunction(this);
    }
};

Trong trường hợp này, tôi đang gọi chức năng tùy chỉnh của mình được gọi là myFunction(). Ở đây, tôi lưu trữ nội dung XML bên trong một biến gọi là xmlDoc:

var xmlDoc = xml.responseXML;

Sau đó, tôi chuyển đổi tất cả các tên thành phố thành một mảng:

var cityNames = Array.from(xmlDoc.getElementsByTagName("city"));

Cuối cùng, tôi lặp qua mảng thành phố này bằng cách sử dụng Vòng lặp Do While và in từng tên thành phố trong cửa sổ giao diện điều khiển:

var i = 0;
do {
    console.log(cityNames[i].innerHTML);
    i++;
}
while (i < cityNames.length);

Hình ảnh dưới đây minh họa đầu ra được in trên bàn điều khiển:

5. Phương thức “.forEach()”

Phiên bản ES6 của JavaScript đã giới thiệu một phương thức mới gọi là .forEach() để lặp qua một phần tử mảng. Bạn sẽ thấy nó rất tiện dụng khi xử lý Mảng.

một. Lặp qua một mảng với phương thức .forEach():

Trong tình huống này, tôi lặp qua một phần tử mảng với .cho mỗi() phương pháp và in mục lục và giá trị của mọi thành phần trong cửa sổ giao diện điều khiển. Xem mã dưới đây:

var names = ["jerry", "tom", "pluto", "micky", "mini"];
names.forEach(Function1);

function Function1(currentValue, index) {
    console.log("Array Current Index is: " + index + " :: Value is: " + currentValue);
}

Chức năng1 là tên của hàm được gọi cho mọi phần tử của mảng. Trong trường hợp của tôi, nó sẽ được gọi 5 lần. Nó chấp nhận 2 tham số — ‘chỉ mục’ và ‘giá trị’ của phần tử hiện tại.

Ghi chú rằng bạn có thể chuyển đổi một đối tượng thành một mảng bằng cách sử dụng Mảng.từ() phương pháp:

var linksArr = Array.from(links);

Phần kết luận

Cảm ơn bạn đã dành thời gian đọc hướng dẫn này. Tôi hy vọng nó đã dạy cho bạn điều gì đó mới mẻ về cách xử lý các vòng lặp trong JavaScript. Giờ đây, bạn có thể áp dụng bất kỳ chiến thuật vòng lặp yêu thích nào của mình, được mô tả trong hướng dẫn này, trong dự án web của bạn.

Tôi xuất bản 2 bài báo phát triển web mỗi tuần. Cân nhắc theo dõi tôi và nhận thông báo bất cứ khi nào tôi xuất bản hướng dẫn mới trên Phương tiện. Nếu bài đăng này hữu ích, vui lòng nhấp vào nút vỗ tay vài lần để thể hiện sự ủng hộ của bạn! Nó sẽ mang lại nụ cười trên khuôn mặt tôi và thúc đẩy tôi viết nhiều hơn cho những độc giả như bạn.

Tôi cũng đã xuất bản một hướng dẫn khác về freeCodeCamp, bạn cũng muốn xem nó — Cách tạo tính năng đăng nhập bằng Bootstrap Modal và jQuery AJAX

Cảm ơn và mã hóa vui vẻ!