1. Định nghĩa nhanh về forEach

  • Tương tự như for loop, forEach sẽ lặp qua từng item(phần tử) của array(mảng). Ví dụ đơn giản yêu cầu lặp qua từng item của array & render ra màn hình console.
    const numbers = [1,3,5,7,9]
    // for loop
    for ( let i = 0; i < numbers.length; i ++) {
        console.log(i)
    }
    // forEach
    numbers.forEach(number => console.log(number))

2. Thay đổi chỉnh sửa toàn bộ item trong array

  • Mình sẽ có một ví dụ thực tế hơn, cho array 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 array này 1 là về chữ hoa (upperCase) 2 là về chữ thường (lowerCase)
    const characters = ["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. Render toàn bộ key của một object

  • Đầu tiên để lấy ra toàn bộ key của một object chúng ta sử dụng method Object.keys(obj), kết quả trả về một array chứa toàn bộ keys.
    const user = { id: 1, name:"Tuan Anh", age: 27 }
    const userKeys = Object.keys(user) // -> kết quả trả về một array
    // Và sẽ tương tự như ví dụ 1
    userKeys.forEach(key => console.log(key))

4. Render toàn bộ key & value một object

  • Với Object.entries(obj) kết quả trả về một array chứa "các array con" với 2 item lần lượt là key & value của object
    // Cùng làm theo ví dụ để hiểu rõ hơn nhé
    const user = { id: 1, name:"Tuan Anh", age: 27 }
    const userKeysValues = Object.entries(user)
    userKeysValues.forEach(item => console.log(item))
    // hoặc
    userKeysValues.forEach(([key,value]) => console.log(`${key} ${value}`))

**5. Render cả item bị bổ trống trong array **

  • Đôi khi vì một vài lý do gì đấy bạn sẽ gặp phải kiểu array dạng thế này const numbers = [1,,3,4,5]. Ở trường hợp này nếu bạn kiểm tra length thì kết quả sẽ là 5 nhưng khi sử dụng forEach thì chỉ có 4 kết quả đc render ra. WHY ?
    // 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)
    const numbers = [1,,3,4,5]
    console.log(numbers.length)
    // Ở đây mình thử forEach khi chưa qua xử lý Array.from
    numbers.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 method cơ bản & dễ học nhất khi thao tác với array, nó có thể giúp code chúng trông clean hơn phải không.
  • Hãy nắm chắc những method căn 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 method khác khó hơn, phức tạp hơn.
  • -- GOOD LUCK ---