Đối tượng mảng foreach javascript

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

  • 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
    const numbers = [1,3,5,7,9]
    // for loop
    for [ let i = 0; i  console.log[number]]

2. Thay đổi chỉnh sửa toàn bộ mục trong mảng

  • 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]
    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. 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
    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. 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é
    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. 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
        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é ;]
    0 thì kết quả sẽ là
        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é ;]
    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]
    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 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
  • -- CHÚC MAY MẮN ---

Chủ Đề