Giới Thiệu

Một trong những trở ngại đầu tiên trong JavaScript là học cách quản lý các tập hợp dữ liệu. Ví dụ, bạn có nhiều sản phẩm, số liệu hoặc hồ sơ người dùng. Làm thế nào để bạn kiểm tra hoặc sửa đổi từng phần mà không phải viết mã lặp đi lặp lại? Câu trả lời nằm ở các vòng lặp.

Trong hướng dẫn này, chúng ta sẽ khám phá các phương pháp khác nhau để vòng lặp qua mảng và đối tượng trong JavaScript. Nếu bạn là người mới bắt đầu, đừng lo lắng, chúng ta sẽ đi chậm, giải thích từng khái niệm bằng ngôn ngữ dễ hiểu và trình bày các ví dụ thực tiễn mà bạn có thể làm theo.

Những Điều Bạn Sẽ Học Được

Cuối cùng của hướng dẫn này, bạn sẽ hiểu:

• Sự khác biệt giữa mảng và đối tượng.
• Cách vòng lặp qua mảng bằng các phương pháp khác nhau.
• Cách vòng lặp qua đối tượng và truy cập dữ liệu của chúng.
• Khi nào nên sử dụng từng phương pháp vòng lặp (for, forEach, map, filter, reduce, find).
• Các thực tiễn tốt nhất cho việc chọn vòng lặp phù hợp với người mới bắt đầu.

Hiểu Mảng và Đối Tượng

Trước khi chúng ta bắt đầu học về vòng lặp, điều quan trọng là phải hiểu loại dữ liệu mà chúng ta sẽ làm việc.

Mảng

Mảng là danh sách có thứ tự. Hãy nghĩ về chúng như những kệ có số, nơi mỗi mục có một chỉ số (vị trí).

Ví dụ:

const fruits = ["apple", "banana", "orange"]; // Danh sách trái cây

Đối Tượng

Đối tượng là cách tổ chức dữ liệu dưới dạng cặp khóa-giá trị, nơi mỗi khóa trỏ đến một giá trị cụ thể.

Ví dụ:

const user = { name: "Wisdom", age: 30, role: "Developer" }; // Đối tượng người dùng

Mảng tốt nhất cho danh sách, trong khi đối tượng tốt nhất để mô tả một thứ gì đó với các thuộc tính đã đặt tên.

Bây giờ hãy cùng học cách vòng lặp qua chúng.

Vòng Lặp Qua Mảng

1. Vòng Lặp for (cách cổ điển)

Vòng lặp for là cách tiếp cận truyền thống phổ biến nhất để duyệt qua các phần tử của mảng. Nó sử dụng chỉ số để truy cập từng mục.

const fruits = ["apple", "banana", "orange"]; // Danh sách trái cây
for (let i = 0; i < fruits.length; i++) {
  console.log(fruits[i]); // apple, banana, orange
}

Đây là một cách hữu ích cho người mới bắt đầu vì nó trình bày cách hoạt động của các vòng lặp ở hậu trường. Cũng hữu ích khi bạn cần chỉ số hoặc muốn dừng sớm.

2. forEach() (cách tiếp cận đơn giản hơn)

Nếu bạn không quan tâm đến chỉ số và chỉ muốn “thực hiện một cái gì đó” cho mỗi mục, forEach() sẽ sạch hơn.

fruits.forEach(fruit => {
  console.log(fruit); // In ra từng trái cây
});

Dễ đọc hơn so với vòng lặp for, nhưng bạn không thể dừng nó sớm bằng break.

3. map() (biến đổi giá trị)

Sử dụng map() khi bạn muốn tạo một mảng mới bằng cách áp dụng một phép biến đổi.

const uppercased = fruits.map(fruit => fruit.toUpperCase());
console.log(uppercased); // ["APPLE", "BANANA", "ORANGE"]

Nghĩ rằng “biến đổi”: mỗi phần tử trở thành một cái gì đó mới.

4. filter() (chọn các mục cụ thể)

Đôi khi, bạn chỉ muốn một số phần tử nhất định từ một mảng.

const longNames = fruits.filter(fruit => fruit.length > 5);
console.log(longNames); // ["banana", "orange"]

Nghĩ rằng “lựa chọn”: nó cung cấp cho bạn một mảng nhỏ hơn.

5. find() (chỉ tìm kiếm mục đầu tiên)

Sử dụng find() nếu mục tiêu của bạn là trả về chỉ mục đầu tiên thỏa mãn điều kiện đã cho.

const firstFruit = fruits.find(fruit => fruit.startsWith("b"));
console.log(firstFruit); // "banana"

Nó nhanh hơn khi bạn không cần tất cả các kết quả, mà chỉ cần cái đầu tiên.

6. reduce() (kết hợp thành một giá trị)

Phương pháp mạnh mẽ nhất. reduce() cho phép bạn lấy một mảng và “giảm” nó thành một kết quả duy nhất.

const numbers = [1, 2, 3, 4];
const sum = numbers.reduce((total, num) => total + num, 0);
console.log(sum); // 10

Sử dụng khi bạn muốn tổng, trung bình, hoặc kết quả kết hợp.

Vòng Lặp Qua Đối Tượng

Các đối tượng không có thứ tự như mảng, vì vậy chúng ta sẽ vòng lặp qua các khóa và giá trị của chúng.

1. for...in (cách cơ bản)

const user = { name: "Wisdom", age: 30, role: "Developer" };
for (let key in user) {
  console.log(key, user[key]); // In ra từng khóa và giá trị
}

Nó hoạt động tốt, nhưng vì nó bao gồm các thuộc tính kế thừa, nó không phải luôn là lựa chọn an toàn cho người mới bắt đầu.

2. Object.keys(), Object.values(), Object.entries()

Một cách tiếp cận hiện đại và an toàn hơn là chuyển đổi đối tượng thành mảng.

Object.keys(user).forEach(key => console.log(key, user[key])); // in từng khóa và giá trị
Object.values(user).forEach(value => console.log(value)); // in từng giá trị
Object.entries(user).forEach(([key, value]) => console.log(key, value)); // in cặp khóa-giá trị

Những phương pháp này thân thiện với người mới và dễ dự đoán.

Tóm Tắt (Ví dụ Thực Tế)

Giả sử chúng ta có một danh sách sản phẩm. Chúng ta muốn:

1. Tìm sản phẩm có sẵn.
2. Tính toán tổng giá trị của chúng.

const products = [
  { name: "Pen", price: 1.5, qty: 10 },
  { name: "Book", price: 12, qty: 2 },
  { name: "Notebook", price: 5, qty: 0 }
];
const totalValue = products
  .filter(p => p.qty > 0) // chỉ các sản phẩm có sẵn
  .map(p => p.price * p.qty) // tính giá trị
  .reduce((sum, value) => sum + value, 0); // tổng
console.log(totalValue); // 39

Bằng cách áp dụng filter, sau đó là map, và cuối cùng là reduce, chúng ta đã tạo ra một luồng mà mỗi phương pháp đóng góp cho phương pháp tiếp theo, giữ cho mã dễ đọc.

Thực Tiễn Tốt Nhất cho Người Mới Bắt Đầu

• Bắt đầu với phương pháp phù hợp với mục tiêu của bạn (biến đổi: map, lựa chọn: filter, tổng: reduce).
• Sử dụng forEach cho các tác vụ đơn giản như ghi log.
• Sử dụng for hoặc for...of khi bạn cần dừng sớm.
• Đối với đối tượng, hãy ưu tiên Object.keys/values/entries hơn for...in.
• Đừng quá lo lắng về hiệu suất; hãy tập trung vào việc viết mã rõ ràng và dễ hiểu.

Kết Luận

Các vòng lặp là phần cốt lõi của lập trình JavaScript. Đối với người mới bắt đầu, bước quan trọng nhất là chọn phương pháp phù hợp cho công việc:

• Sử dụng for và for...of khi học các khái niệm cơ bản.
• Chuyển sang các phương pháp mảng (forEach, map, filter, find, reduce) khi bạn cảm thấy thoải mái hơn.
• Đối với các đối tượng, hãy giữ cho mọi thứ đơn giản với Object.keys, Object.values, và Object.entries.

Hãy luyện tập những kỹ thuật này trên các bài toán nhỏ, và sớm thôi bạn sẽ thấy rằng việc vòng lặp qua dữ liệu trở nên tự nhiên và dễ dàng. Khi bạn tiến bộ, bạn sẽ nhận thấy rằng cả những dự án nhỏ và phức tạp đều phụ thuộc rất nhiều vào các mẫu vòng lặp này.

Bạn có thể liên hệ với tôi qua LinkedIn.