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“ Kỹ thuật xử lý Javascript nâng cao (đang cập nhật) trên trang blog chính thức trungquandev.com“ Show Những nội dung có trong bài:
1. Loop through object – lặp đối tượng trong JavascriptMì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 loopfor…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. – 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' //
* Object.keysObject.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. 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' //
* Object.valuesObject.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. 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. 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.entriesObject.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. 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' //
* Object.getOwnPropertyNamesObject.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. 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.keysSo sánh Object.getOwnPropertyNames với Object.keys
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é.triển khai lặp một đối tượng trong javascript – loop through object in javascript. 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ế: |