forEach
forEach là phương thức chuyên dùng để lặp qua mảng, cho phép truy cập trực tiếp vào phần tử cũng như chỉ mục (index) của chúng
Phương thức này có một số hạn chế: không thể sử dụng continue để bỏ qua hoặc break để dừng vòng lặp, không có giá trị trả về và không thể dùng return
let mang = ['x', 'y', 'z', 'w']
mang.forEach(function (giaTri, chiMuc, mang) {
console.log('chiMuc:'+chiMuc+','+'giaTri:'+giaTri) // giaTri là phần tử hiện tại, chiMuc là chỉ mục, mang là mảng gốc
console.log(mang)
})
//chiMuc:0,giaTri:x
//["x", "y", "z", "w"]0: "x"1: "y"2: "z"3: "w"
//chiMuc:1,giaTri:y
//["x", "y", "z", "w"]
//chiMuc:2,giaTri:z
//["x", "y", "z", "w"]
//chiMuc:3,giaTri:w
//["x", "y", "z", "w"]
for...in
for...in thường được sử dụng để lặp qua các thuộc tính của đối tượng, bao gồm cả các thuộc tính có thể liệt kê của đối tượng và các thuộc tính được kế thừa từ prototype
Khóa (key) trong vòng lặp sẽ luôn có kiểu dữ liệu là chuỗi
let mangSo = [10,20,30,40];
mangSo.phuThuoc='100';
for(let khoa in mangSo){
console.log(khoa); // sẽ hiển thị cả thuộc tính phuThuoc
}
// Khi lặp qua mảng, khoa đại diện cho chỉ mục, mangSo[khoa] là phần tử tương ứng
var mangChu = ['m','n','o'];
for (var khoa in mangChu) {
console.log(khoa) //0 1 2
console.log(mangChu[khoa]) //m n o
}
// Khi lặp qua đối tượng, khoa đại diện cho key, doiTuong[khoa] là giá trị tương ứng
var doiTuong = {x:10, y:20, z:30};
for (let khoa in doiTuong) {
console.log("doiTuong." + khoa + " = " + doiTuong[khoa]);
}
// doiTuong.x = 10
// doiTuong.y = 20
// doiTuong.z = 30
for...of
for...of là tính năng được giới thiệu trong ES6, khắc phục những hạn chế của for...in trong ES5
Cho phép lặp qua các cấu trúc dữ liệu có thể lặp (iterable) như Arrays (mảng), Strings (chuỗi), Maps (ánh xạ), Sets (tập hợp), v.v.
for...of hỗ trợ return, chỉ có thể lặp qua mảng không thể lặp trực tiếp đối tượng (đối tượng cần kết hợp với Object.keys())
/*Lặp qua một mảng*/
let mangKyTu = ['X', 'Y', 'Z']
for (let giaTri of mangKyTu) {
console.log(giaTri)
}
// X Y Z
/*Lặp qua một chuỗi:*/
let chuoiKyTu = "xyz";
for (let giaTri of chuoiKyTu) {
console.log(giaTri);
}
// "x"
// "y"
// "z"
/*Lặp qua đối tượng có thuộc tính có thể liệt kê*/
for (var khoa of Object.keys(doiTuongBatKy)) {
console.log(khoa + ": " + doiTuongBatKy[khoa]);
}
//for...of không thể sử dụng trực tiếp trên đối tượng thông thường, cần kết hợp với Object.keys()
Tổng kết
forEach chủ yếu được sử dụng để lặp qua mảng
for...in thường dùng để lặp qua đối tượng hoặc JSON
for...of rất tiện lợi và an toàn khi lặp qua mảng
for...in lặp ra các khóa (key), trong khi for...of lặp ra các giá trị (value)