Bài viết này sẽ thảo luận về các phương thức lặp qua các đối tượng trong JavaScript. Hơn nữa, các thủ tục liên quan đến lặp đối tượng như for. trong vòng lặp, đối tượng. keys[] phương thức, đối tượng. phương thức value[] và đối tượng. entry[], cũng sẽ được minh họa bằng các ví dụ. Vì vậy, hãy bắt đầu
Lặp qua các đối tượng trong JavaScript bằng cách sử dụng for. trong vòng lặp
Một trong những phương pháp phổ biến nhất để lặp qua các thuộc tính đối tượng là sử dụng lệnh “for. trong vòng lặp. Mã bạn sẽ thêm vào bên trong for. trong vòng lặp sẽ được thực hiện một lần cho mỗi thuộc tính của đối tượng của bạn
Ví dụ. Lặp qua các đối tượng trong JavaScript bằng cách sử dụng for. trong vòng lặp
Trước tiên, bạn phải tạo một đối tượng trong chương trình JavaScript. Chẳng hạn, trong ví dụ dưới đây, chúng tôi đã tạo một đối tượng “người dùng” có “tên”, “tuổi”, “email” và “hoạt động” làm thuộc tính của nó
const người dùng = {
tên : 'Jack Smith',
tuổi . 28,
email . 'jackSmith232@gmail. com',
đang hoạt động . true };
Tiếp theo, chúng ta sẽ sử dụng “for. in” để lặp qua đối tượng người dùng đã tạo. Cái “cho. in” sẽ trả về thuộc tính đối tượng hoặc khóa và giá trị của chúng
// lặp qua đối tượng người dùng
for [const key in user]
{ console.log[ `$ { . }: $ { người dùng [ key ]}`];
}
Đây là mã hoàn chỉnh của ví dụ được cung cấp với đầu ra của nó
Lặp lại các Đối tượng trong JavaScript bằng cách sử dụng Đối tượng. phương thức keys[]
Để làm cho việc lặp qua các đối tượng dễ dàng hơn, Object. keys[] đã được thêm vào ES6. Bạn phải chuyển đối tượng bạn muốn lặp lại và Đối tượng JavaScript. keys[] sẽ trả về một mảng bao gồm tất cả các khóa hoặc tên thuộc tính. Sau đó, bạn có thể lặp qua mảng đó và tìm nạp giá trị của từng thuộc tính bằng cách sử dụng phương thức lặp mảng, chẳng hạn như vòng lặp JavaScript forEach[]
Ví dụ. Lặp lại thông qua các đối tượng trong JavaScript bằng cách sử dụng đối tượng. phương thức keys[]
Với mục đích trình diễn, chúng tôi sẽ tạo một đối tượng “các khóa học” có các khóa học khác nhau làm thuộc tính của nó, chẳng hạn như “db”, “javascript”, “cp” và “dld” và sẽ gán cho từng giá trị cụ thể của chúng
const khóa học = {
db : 45,
javascript . 67,
cp . 23,
dld . 15 };
Sau khi làm như vậy, chúng tôi sẽ chuyển đổi đối tượng “khóa học” của mình thành mảng “khóa”
// chuyển đối tượng thành mảng keys
const keys = Object.khóa[ khóa học ]; .
// print all keys
console.log[ key ];
Trong bước tiếp theo, chúng tôi sẽ lặp lại bằng cách sử dụng đối tượng “khóa học” bằng cách sử dụng mảng “khóa”. Ở đây, chúng tôi đã sử dụng vòng lặp “forEach[]” cho phép lặp
// lặp qua đối tượng
. forEach[[ key , . index] => {
console.log[ `$ { . }: $ { khóa học [ khóa ]}`];
}];
Hãy xem đầu ra của ví dụ được cung cấp trong hình ảnh dưới đây
Lặp lại các Đối tượng trong JavaScript bằng cách sử dụng Đối tượng. phương thức value[]
Đối tượng JavaScript. phương thức values[] ngược lại với Object. key[] và được nhúng trong ES8. đối tượng. Phương thức values[] xuất ra một mảng bao gồm các giá trị thuộc tính của đối tượng được thêm vào. Sau đó, bạn có thể lặp qua các giá trị đối tượng bằng cách sử dụng một phương thức lặp mảng chẳng hạn như vòng lặp JavaScript forEach[]
Ví dụ. Lặp lại thông qua các đối tượng trong JavaScript bằng cách sử dụng đối tượng. phương thức value[]
Ví dụ này sẽ chỉ cho bạn cách lặp lại bằng cách sử dụng Đối tượng. phương thức values[] thông qua một giá trị đối tượng. Với mục đích này, chúng ta sẽ tạo một đối tượng “chim” có bốn thuộc tính “quạ”, “chim sẻ”, “con vẹt” và “chim bồ câu” với các giá trị tương ứng của chúng
const chim = {
quạ : 1,
chim sẻ . 2,
con vẹt . 3,
chim bồ câu . 4 };
Bây giờ, để lặp qua các giá trị của đối tượng “chim”, chúng ta sẽ gọi Đối tượng. values[] trong khi chuyển đối tượng "chim" làm đối số
// lặp qua các giá trị đối tượng
Đối tượng . giá trị[ chim ] . forEach[ val => . log[ val ]];
Kiểm tra đầu ra dưới đây của phép lặp giá trị đối tượng
Lặp lại các Đối tượng trong JavaScript bằng cách sử dụng Đối tượng. phương thức entry[]
Một phương thức ES8 khác có thể được sử dụng để lặp qua các đối tượng trong JavaScript là “Đối tượng. phương thức entry[]”. Khi bạn gọi đối tượng. entry[] bằng cách chuyển đối tượng đã tạo làm đối số, nó sẽ trả về hai phần tử trong mỗi mảng bên trong. Phần tử mảng đầu tiên sẽ đại diện cho thuộc tính đối tượng và giá trị tương ứng của nó sẽ được lưu trữ trong phần tử thứ hai
Ví dụ. Lặp lại thông qua các đối tượng trong JavaScript bằng cách sử dụng đối tượng. phương thức entry[]
Để sử dụng đối tượng. entry[] trong chương trình JavaScript của bạn, hãy tạo một đối tượng với một số thuộc tính và giá trị của chúng. Chẳng hạn, chúng ta đã tạo một đối tượng “chim” có bốn thuộc tính
const chim = {
quạ : 1,
chim sẻ . 2,
con vẹt . 3,
chim bồ câu . 4 };
Bây giờ, để lặp qua các giá trị “đối tượng”, chúng ta sẽ chuyển đối tượng “chim” làm đối số cho “Đối tượng. entry[]” và lưu trữ giá trị trả về trong biến “entries”
// lặp qua các giá trị đối tượng
const mục = . .bài[ chim ]; .
console.nhật ký[ mục nhập ];
Như bạn có thể thấy từ đầu ra dưới đây, “Đối tượng. entry[]” đã trả về bốn mảng bên trong, trong đó mỗi mảng đang lưu trữ một thuộc tính duy nhất của đối tượng “birds” cùng với giá trị của nó
Để lặp qua mảng, được trả về bởi Đối tượng JavaScript. entry[], bạn cũng có thể sử dụng phương thức “forEach[]” hoặc “for. của vòng lặp
Để sử dụng cho. của vòng lặp, bạn phải viết đoạn mã sau sau khi tạo đối tượng chim cần thiết
for [const [ key , value] of Object.mục nhập[ chim ]] . {
console.log[ `$ { . }: $ { giá trị } ` ];
}
Với sự giúp đỡ của “cho. of”, chúng ta đã lặp thành công trên đối tượng “birds”, có thể thấy đối tượng này ở đầu ra
Trong trường hợp này, nếu bạn muốn sử dụng phương thức “forEach[]” cho mục đích tương tự, thì hãy gọi Object. các mục [] trong khi truyền đối tượng đã tạo làm đối số và sau đó gọi phương thức “forEach []”. Phương thức forEach[] sẽ trả về các thuộc tính hoặc khóa của đối tượng và các giá trị tương ứng của chúng
// phương thức forEach[]
Đối tượng . bài viết[ chim ] . forEach[[[ key . , value]] => {
console.log[ `$ { . }: $ { giá trị } ` ]
}];
Phần kết luận
sử dụng cho. trong vòng lặp, đối tượng. phương thức key[], Đối tượng. phương thức value[], Đối tượng. entry[], bạn có thể lặp qua các đối tượng trong JavaScript. cho. trong vòng lặp, đối tượng. phương thức entry[] và đối tượng. keys[] được sử dụng để lặp qua các giá trị cặp khóa của đối tượng trong khi đó, Object. các giá trị [] chỉ lặp qua các giá trị thuộc tính của một đối tượng. Bài viết này đã thảo luận về các phương pháp lặp qua các đối tượng trong JavaScript. Hơn nữa, các thủ tục liên quan đến lặp đối tượng như for. trong vòng lặp, đối tượng. keys[] phương thức, đối tượng. phương thức value[] và đối tượng. phương thức entry[] cũng được minh họa bằng các ví dụ