Tương tự như vòng lặp for, forEach sẽ lặp qua từng mục(phần tử) của mảng(mảng). Ví dụ đơn giản yêu cầu lặp qua từng mục của mảng & hiển thị ra màn hình bảng điều khiển
Mình sẽ có một ví dụ thực tế hơn, cho mảng chứa nhiều chữ cái có cả viết hoa & viết thường. Bây giờ chúng ta sử dụng forEach để có thể biến đổi mảng này 1 là về chữ hoa (chữ hoa) 2 là về chữ thường (chữ thường)
constcharacters= ["T","u","a","N","a","N","h"]
characters.forEach(item=>console.log(item.toUpperCase()))
// hoặc item.toLowerCase(), hãy thử tay gõ lại & xem kết quả là gì nhé ;)
3. Kết xuất toàn bộ khóa của một đối tượng
Lần đầu tiên lấy ra toàn bộ khóa của một đối tượng chúng ta sử dụng phương thức Object.keys(obj), kết quả trả về một mảng chứa toàn bộ khóa
constuser= { id: 1, name:"Tuan Anh", age: 27 }
constuserKeys=Object.keys(user) // -> kết quả trả về một array// Và sẽ tương tự như ví dụ 1userKeys.forEach(key=>console.log(key))
4. Kết xuất toàn bộ khóa & giá trị một đối tượng
With Object.entries(obj) results return a array contains "các mảng con" with 2 item times as key & value of object
// Cùng làm theo ví dụ để hiểu rõ hơn nhéconstuser= { id: 1, name:"Tuan Anh", age: 27 }
constuserKeysValues=Object.entries(user)
userKeysValues.forEach(item=>console.log(item))
// hoặcuserKeysValues.forEach(([key,value]) =>console.log(`${key}${value}`))
**5. Kết xuất cả mục được bổ sung trống trong mảng **
Đôi khi vì một vài lý do làm gì đó bạn sẽ gặp phải kiểu mảng định dạng thế này const numbers = [1,,3,4,5]. Ở trường hợp này nếu bạn kiểm tra
constcharacters= ["T","u","a","N","a","N","h"]
characters.forEach(item=>console.log(item.toUpperCase()))
// hoặc item.toLowerCase(), hãy thử tay gõ lại & xem kết quả là gì nhé ;)
0 thì kết quả sẽ là
constcharacters= ["T","u","a","N","a","N","h"]
characters.forEach(item=>console.log(item.toUpperCase()))
// hoặc item.toLowerCase(), hãy thử tay gõ lại & xem kết quả là gì nhé ;)
0 nhưng khi sử dụng forEach thì chỉ có 4 kết quả được render ra. TẠI SAO ?
// Ví dụ mình nêu trên là một điều kì quặc được gọi với cái tên là ARRAY HOLES// Để giải quyết array hole ta sử dụng Array.from(arr)constnumbers= [1,,3,4,5]
console.log(numbers.length)
// Ở đây mình thử forEach khi chưa qua xử lý Array.fromnumbers.forEach(number=>console.log(number)) // -> Kết quả lần lượt là 1,3,4,5// Thử với Array.from nhéArray.from(numbers).forEach(number=>console.log(number)) // -> Kết quả lúc này sẽ 1,undefined,3,4,5
Tổng kết
Có thể đây là một trong những phương pháp cơ bản & dễ học nhất khi thao tác với mảng, nó có thể giúp mã của chúng trông sạch sẽ hơn phải không
Hãy nắm chắc những phương pháp cơ bản nhất này rồi dần dần bạn sẽ có thể hiểu và học tiếp được những phương pháp khác khó hơn, phức tạp hơn