Bạn đã hiểu vòng lặp trong Javascript?
Khám phá toàn diện các phương pháp lặp trong JavaScript từ cơ bản đến nâng cao: for truyền thống, forEach, map, filter, và nhiều hơn nữa. Bài viết giải thích rõ ràng từng cú pháp với ví dụ thực tế giúp lập trình viên tối ưu code của mình.

Vòng lặp trong Javascript?
Ta có một mảng sau:
const companies = ["FPT", "VNG", "Viettel","Intel","Apple","Facebook"];
Cần chạy vòng lặp mảng để in ra từng phần tử. Vậy có các kiểu vòng lặp nào trong Javascript?
Kiểu truyền thống
for (let i = 0; i < companies.length; i++) {
console.log(companies[i]);
}
Kiểu forEach
companies.forEach(company => console.log(company));
Kiểu này nhanh ngọn lẹ, nhìn hợp thời hơn hẳng kiểu truyền thống. Tuy nhiên có một nhược điểm đó là không dùng được break hay continue gì hết trơn hết trọi à.
Ví dụ bạn hem thích VNG nên không in ra VNG:
companies.forEach(company => {
if (company === 'VNG') {
// continue; //break; -> không thể dùng continue hay break trong forEach
return; // có thể dùng return để bỏ qua phần tử hiện tại
}
console.log(company);
});
Kiểu for .... in
for (const index in companies) {
console.log(`Cong ty ${companies[index]} co STT: ${Number(index) + 1}`);
}
// Cong ty FPT co STT: 1
// Cong ty VNG co STT: 2
// Cong ty Viettel co STT: 3
// Cong ty Intel co STT: 4
// Cong ty Apple co STT: 5
// Cong ty Facebook co STT: 6
Ta thấy để vừa lấy index của phần tử, vừa lấy phần tử trong mảng thì for...in dễ nhìn hơn, nhìn cũng phong cách hơn.
Và nếu có ghét VNG thì vẫn xài continue hay break được:
for (const index in companies) {
if (companies[index] === 'VNG') {
continue; //break; cũng được
}
console.log(`Cong ty ${companies[index]} co STT: ${Number(index) + 1}`);
}
// Cong ty FPT co STT: 1
// Cong ty Viettel co STT: 3
// Cong ty Intel co STT: 4
// Cong ty Apple co STT: 5
// Cong ty Facebook co STT: 6
Điểm chết người của for ... in
Đôi khi ta hay xài thư viện có thêm tính năng cho Array ví dụ như sau:
Array.prototype.clear = function() {
this.length = 0;
};
Và bạn xài thư viện này cùng lúc với for ... in
for (const index in companies) {
console.log(companies[index])
}
Thì bạn sẽ có kết quả sau:
Cận thận trường hợp này nhé, nếu không đụng gì đến Array.prototype thì không sao đâu
Kiểu for ... of
for (const company of companies) {
console.log(company);
}
Vậy for ... of nhưng muốn lấy index của phần tử thì làm sao?
for (const company of companies.entries()) {
console.log(company);
}
Tuy nhiên lúc này ta được kết quả:
Để in ra index cũng như tên công ty, ta dùng destructuring
for (const [index,company] of companies.entries()) {
console.log(`Cong ty ${company} co STT: ${index + 1}`);
}
// Cong ty FPT co STT: 1
// Cong ty VNG co STT: 2
// Cong ty Viettel co STT: 3
// Cong ty Intel co STT: 4
// Cong ty Apple co STT: 5
// Cong ty Facebook co STT: 6
Kiểu for ... of có thể hữu dụng ở một số trường hợp sau:
const webpage = 'niviki.com';
for (const char of webpage) {
console.log(char);
}
Hoặc để lặp arguments của một function:
function sum() {
console.log(arguments);
var total = 0;
for (const element of arguments) {
total += element;
}
console.log(total);
}
sum(69, 96, 1);
Lặp thuộc tính của object?
Giả sử có object sau:
var companiesObj = {
FPT: { name: "FPT", STT: 1 },
VNG: { name: "VNG", STT: 2 },
Viettel: { name: "Viettel", STT: 3 },
Intel: { name: "Intel", STT: 4 }
};
Nếu lặp bằng for ... in thì cũng chỉ lấy được index, mà vẫn bị nhược điểm prototype nói trên:
Reflect.setPrototypeOf(companiesObj, { newProp: "newProp" });
companiesObj.__proto__.ahihi = { a: 'hihi'};
for (const key in companiesObj) {
console.log(key);
}
Kết quả vẫn in ra luôn newProp và ahihi:
Theo dự định thì for ... of dùng Object.entries() sẽ loop được object như vầy trong ES2017, nhưng hiện giờ có thể dùng như sau:
for (const prop of Object.keys(companiesObj)) {
console.log(companiesObj[prop]);
}
// Object {name: "FPT", STT: 1}STT: 1name: "FPT"__proto__: Object
// Object {name: "VNG", STT: 2}STT: 2name: "VNG"__proto__: Object
// Object {name: "Viettel", STT: 3}STT: 3name: "Viettel"__proto__: Object
// Object {name: "Intel", STT: 4}STT: 4name: "Intel"__proto__: Object
Kết
Phù... Chỉ một cái vòng lặp thôi mà nhọc nhằn quá. Còn nhiều vấn đề về vòng lặp các bạn bổ sung nhé. Những kiến thức như destructuring, prototype inheritance nếu bạn chưa tìm hiểu có thể xem thêm tại khóa học Javascript chuyên sâu nhé!
Related Posts
Discover more content you might enjoy

English Course Challenge in 2 weeks - Day 12: Kinh nghiệm quay khoá học
Bài viết chia sẻ kinh nghiệm quay khóa học tiếng Anh về Bubble.io, bao gồm việc lựa chọn phần mềm Screen.Studio để quay màn hình và tự động tạo phụ đề, những bài học từ việc đặt mục tiêu và xác định đối tượng học viên trước khi chọn nội dung, cũng như lợi ích của việc thử thách bản thân để vượt qua nỗi sợ và hoàn thành dự định. Tác giả cũng giới thiệu khóa học 'Build your first web app in Bubble for beginners' dành cho người mới bắt đầu.

English Course Challenge in 2 weeks - Day 7: Fine-tuning ChatGPT là gì?
Bài viết chia sẻ tiến trình ngày thứ 7 trong thử thách tạo khóa học tiếng Anh trong 2 tuần. Tác giả giới thiệu về Fine-tuning ChatGPT, một tính năng cho phép tạo phiên bản ChatGPT tùy chỉnh dựa trên dữ liệu cung cấp, đặc biệt hữu ích cho chatbot hỗ trợ khách hàng. Bài viết cũng thảo luận về việc điều chỉnh hướng phát triển ứng dụng demo và khóa học, cùng với những khó khăn khi sử dụng API của OpenAI tại Việt Nam.

English Course Challenge in 2 weeks - Day 2: Tiềm năng của Prompt Engineering
Bài viết chia sẻ về việc phát triển ứng dụng SaaS AI demo cho khóa học Bubble, tập trung vào Prompt Engineering - kỹ thuật viết prompt hiệu quả cho AI. Tác giả giới thiệu cấu trúc prompt chuẩn gồm 6 phần: Persona, Context, Task, Format, Examplar và Tone, đồng thời trình bày ý tưởng và mockup cho ứng dụng hỗ trợ người dùng viết prompt tốt hơn, giải quyết vấn đề nhiều người gặp phải khi sử dụng AI.

Đối thoại với AI: Generative AI (AI tạo sinh) và những điều cần biết
Bài viết dạng hỏi đáp toàn diện về AI tạo sinh, bao gồm kỹ thuật viết prompt hiệu quả, cách kiếm tiền từ AI, các nền tảng thay thế Claude AI, chi phí huấn luyện mô hình lớn, và các khái niệm quan trọng như BERT, mô hình tiền huấn luyện cùng những vấn đề đạo đức liên quan.

Niềm tin
Bài viết bàn về vai trò của niềm tin trong cuộc sống và cách nó ảnh hưởng đến hành động của chúng ta, giúp chúng ta dám bắt đầu và vượt qua thử thách.

Quản lý bộ nhớ trong Swift
Tìm hiểu về cách quản lý bộ nhớ trong Swift, sự khác biệt giữa Stack và Heap, Value Types và Reference Types