Hướng Dẫn Loop Through Object Trong Javascript ES6 - Trung Quân

Xin chào tất cả các bạn, mình là Quân, hôm nay chúng ta sẽ cùng nhau đi tìm hiểu những cách khác nhau phục vụ cho công việc lặp đối tượng trong javascript hay nói tiếng anh dễ hiểu hơn là Loop Through Object trong Javascript nhé.

“Bài này nằm trong loạt bài Kỹ thuật xử lý Javascript nâng cao (đang cập nhật) trên trang blog chính thức trungquandev.com“

Những nội dung có trong bài:

1. Loop through object – Chỉ có một gạch đầu dòng này thôi, và nó sẽ chứa rất nhiều kỹ thuật bên trong, các bạn kéo xuống đọc tiếp nhé =))

1. Loop through object – lặp đối tượng trong Javascript

Mình sẽ lần lượt ví dụ triển khai theo 5 cách dưới đây, trong quá trình đi làm thực tế tùy vào những trường hợp yêu cầu khác nhau mà chúng ta sẽ sử dụng từng cách để xử lý dữ liệu sao cho phù hợp nhất.

* for…in loop

for…in – giúp chúng ta lấy key của object trong mỗi lần lặp và có thể sử dụng key đó để lấy value của object.

const object1 = { id: 17, name: 'trungquan', website: 'https://trungquandev.com' } for (let key in object1) { if (object1.hasOwnProperty(key)) { console.log(`${key}: ${object1[key]}`) } } // expected output: // 'id: 17' // 'name: trungquan' // 'website: https://trungquandev.com' //

• Một lưu ý nhỏ là ở trong đoạn code trên mình có sử dụng phương thức hasOwnProperty để kiểm tra cái key nhận được có thuộc về object1 ban đầu hay không, bởi vì nếu không kiểm tra như vậy thì vòng lặp for…in sẽ lặp qua cả object prototype chain.

* Object.keys

Object.keys() sẽ nhận object của chúng ta làm tham số và trả về kết quả là một mảng (array) chứa tất cả các key của object.

const object1 = { id: 17, name: 'trungquan', website: 'https://trungquandev.com' } console.log(Object.keys(object1)) // expected output: ["id", "name", "website"] Object.keys(object1).forEach(key => { console.log(`${key}: ${object1[key]}`) }) // expected output: // 'id: 17' // 'name: trungquan' // 'website: https://trungquandev.com' //

• Ngoài ra ở trong đoạn code trên, sau khi đã lấy được một array chứa các key của object1 bằng Object.keys, mình tiếp tục sử dụng forEach để duyệt qua array đó và log ra key – value của object1 như trong ví dụ for…in ở trên nhé.

* Object.values

Object.values() sẽ nhận object của chúng ta làm tham số và trả về kết quả là một mảng (array) chứa tất cả value của object.– Sử dụng Object.values trong những trường hợp mà chúng ta không cần quan tâm đến key của object, mà chỉ cần lấy value thôi.

const object1 = { id: 17, name: 'trungquan', website: 'https://trungquandev.com' } console.log(Object.values(object1)) // expected output: [17, "trungquan", "https://trungquandev.com"] Object.values(object1).forEach(value => { console.log(value) }) // expected output: // 17 // 'trungquan' // 'https://trungquandev.com' //

* Object.entries

Object.entries() sẽ nhận object của chúng ta làm tham số và trả về một array mà bên trong đó lại tiếp tục là các array nhỏ hơn chứa các cặp key, value của object.

const object1 = { id: 17, name: 'trungquan', website: 'https://trungquandev.com' } console.log(Object.entries(object1)) // expected output: [["id", 17], ["name", "trungquan"], ["website", "https://trungquandev.com"]] Object.entries(object1).forEach(([key, value]) => { console.log(`${key}: ${value}`) }) // expected output: // 'id: 17' // 'name: trungquan' // 'website: https://trungquandev.com' //

• Ở trong đoạn code trên mình tiếp tục sử dụng forEach sau khi đã có [key, value] của object1 lấy được từ Object.entries và log chúng ra cho các bạn thấy.
• Cũng có thể nói thằng Object.entries này là phương thức tổng hợp của Object.keys và Object.values ở trên vì nó lấy ra cùng lúc cả 2 giá trị key, value chứ không lấy riêng lẻ như từng thằng kia.

* Object.getOwnPropertyNames

Object.getOwnPropertyNames() sẽ nhận object của chúng ta làm tham số và trả về một array chứa các property hoặc key (bao gồm cả thuộc tích non-enumberable) của object.

const object1 = { id: 17, name: 'trungquan', website: 'https://trungquandev.com' } console.log(Object.getOwnPropertyNames(object1)) // expected output: ["id", "name", "website"] Object.getOwnPropertyNames(object1).forEach(key => { console.log(`${key}: ${object1[key]}`) }) // expected output: // 'id: 17' // 'name: trungquan' // 'website: https://trungquandev.com' //

* So sánh Object.getOwnPropertyNames với Object.keys

• Thoạt nhìn rõ ràng các bạn có thể nhận thấy thằng Object.getOwnPropertyNames này và thằng Object.keys đều trả về chung một kết quả là mảng chứa các key, vậy lúc này chúng ta nên đặt ra câu hỏi để tìm hiểu sâu hơn đó là: Giữa chúng nó có điểm gì khác nhau?
• Câu trả lời mình tìm hiểu được thì giữa chúng khác nhau ở một thứ là enumerable – Chỉ định xem thuộc tính liệu có được trả về trong vòng lặp hay không?
• Đối với thuộc tính mà chúng ta set enumerable là false thì Object.keys sẽ không lấy ra được giá trị, ngược lại, getOwnPropertyNames vẫn sẽ lấy ra được hết. Ví dụ cụ thể:

let object1 = {} Object.defineProperties(object1, { id: {enumerable: true, value: '17'}, name: {enumerable: false, value: 'trungquandev'}, website: {enumerable: false, value: 'https://trungquandev.com'} }) console.log(Object.keys(object1)) // ["id"] console.log(Object.getOwnPropertyNames(object1)) // ["id", "name", "website"] //

Chốt lại, chúng ta đã cùng nhau đi thử 5 cách khác nhau cho việc triển khai lặp một đối tượng trong javascript – loop through object in javascript.Trong quá trình đi làm dự án thực tế, sẽ tùy vào từng trường hợp triển khai object mà các bạn sẽ chọn cho mình một hoặc nhiều cách sao cho phù hợp nhé.

Cảm ơn các bạn đã dành thời gian đọc bài viết.

Xin chào và hẹn gặp lại các bạn ở những bài viết tiếp theo.

Best Regards – Trung Quân – Green Cat

Tham khảo kiến thức:

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Objecthttps://dev.to/saigowthamr/how-to-loop-through-object-in-javascript-es6-3d26https://stackoverflow.com/a/22658584

“Thanks for awesome knowledges.”

Khóa học lập trình làm việc thực tế:

Trên YouTube mình dạy hết từ Front-end cho đến Back-end, FREE công khai nha. Đã có rất nhiều bạn học bộ MERN Stack Pro này của mình và để lại feedback chất lượng dưới nhiều video rồi. Các bạn hãy tham khảo trang Landing Page mình giới thiệu toàn bộ MERN Stack (ReactJS, NodeJS, MongoDB, ExpressJS...vv) ở đây nhé. KHOÁ HỌC LẬP TRÌNH MERN STACK 100% DỰ ÁN THỰC TẾ và CHẤT LƯỢNG forjavascriptloopobjectobject.entriesobject.hasOwnPropertyNamesobject.keysobject.valuestrungquandev