Penjelasan terperinci tentang 5 kaedah traversal gelung objek Javascript

Bagaimana untuk menggelung melalui objek Javascript? Artikel berikut akan memperkenalkan lima kaedah traversal objek JS secara terperinci, dan secara ringkas membandingkan lima kaedah ini, saya harap ia akan membantu anda!

1. Kaedah melintasi objek

• for ... in

• Object.keys(), Object.values(), Object.entries()

• Object.getOwnPropertyNames()

• Object.getOwnPropertySymbols()

• Reflect.ownKeys()

2. Peraturan susunan traversal atribut objek

Kelima-lima kaedah di atas kesemuanya mematuhi peraturan susunan traversal atribut yang sama apabila melintasi sifat sesuatu objek

• Nama atribut ialahNilai, diisih dalam tertib menaik mengikut Nilai

• Nama atribut ialah Rentetan , diisih dalam tertib menaik mengikut Masa penjanaan

• Nama atribut ialah Simbol, diisih dalam tertib menaik oleh Masa penjanaan

3 Penjelasan terperinci kaedah traversal

1 🎜>

Terutamanya digunakan untuk menggelung sifat objek. Setiap kali kod dalam gelung dilaksanakan, sifat objek akan dikendalikan. Sintaks adalah seperti berikut:

for…in

Dua parameter:

for (var in object) {
 执行的代码块
}

var: diperlukan. Pembolehubah yang ditentukan boleh menjadi elemen tatasusunan atau harta objek.
objek: diperlukan. Menentukan objek untuk diulang.

Hasil keluaran:

var obj = {a: 1, b: 2, c: 3}; 
 
for (var i in obj) { 
    console.log('键名：', i); 
    console.log('键值：', obj[i]); 
}

Nota:

键名：a
键值：1
键名：b
键值：2
键名：c
键值：3

Kaedah untuk dalam bukan sahaja merentasi objek semasa Semua sifat terhitung juga akan melintasi sifat pada rantai prototaipnya.

2. Object.keys(), Object.values(), Object.entry()Ini Ketiga-tiga kaedah digunakan untuk melintasi objek Ia akan mengembalikan tatasusunan yang terdiri daripada sifat terhitung objek yang diberikan (tidak termasuk sifat yang diwarisi dan Simbol adalah sama seperti yang dikembalikan apabila gelung normal melintasi objek). . Dalam susunan yang sama, nilai yang dikembalikan oleh tiga elemen ini adalah seperti berikut:

Object.keys(): mengembalikan tatasusunan yang mengandungi nama kunci objek; 🎜>

• Object.values(): Mengembalikan tatasusunan yang mengandungi nilai kunci objek; .

• Perhatikan bahawa

• Nilai-nilai dalam tatasusunan yang dikembalikan oleh kaedah Object.keys() adalah semua rentetan, yang bermakna ia bukan aksara Nilai kunci rentetan akan ditukar menjadi rentetan.

let obj = { 
  id: 1, 
  name: 'hello', 
  age: 18 
};
console.log(Object.keys(obj));   // 输出结果: ['id', 'name', 'age']
console.log(Object.values(obj)); // 输出结果: [1, 'hello', 18]
console.log(Object.entries(obj));   // 输出结果: [['id', 1], ['name', 'hello'], ['age', 18]

Nilai atribut dalam tatasusunan hasil adalah semua

atribut terhitung objek itu sendiri

, tidak termasuk atribut yang diwarisi.
3 objek. Semua nama atribut itu sendiri. Tetapi ia boleh mengembalikan
• harta yang tidak terhitung.
  Kedua-dua kaedah boleh digunakan untuk mengira bilangan sifat dalam objek:

4 Object.getOwnPropertySymbols() Object.getOwnPropertyNames()Object.keys()

Kaedah mengembalikan tatasusunan yang terdiri daripada sifat Simbol objek itu sendiri, tidak termasuk sifat rentetan:

let a = ['Hello', 'World'];
 
Object.keys(a) // ["0", "1"]
Object.getOwnPropertyNames(a) // ["0", "1", "length"]

var obj = { 0: "a", 1: "b", 2: "c"};
Object.getOwnPropertyNames(obj) // ["0", "1", "2"]
Object.keys(obj).length // 3
Object.getOwnPropertyNames(obj).length // 3

5. Reflect .ownKeys()Reflect.ownKeys() mengembalikan tatasusunan yang mengandungi semua sifat objek itu sendiri. Ia serupa dengan Object.keys(). Object.keys() mengembalikan kunci harta, tetapi tidak termasuk sifat tidak boleh dikira, manakala Reflect.ownKeys() mengembalikan semua kunci harta:

Object.getOwnPropertySymbols()Nota:

let obj = {a: 1}
 
// 给对象添加一个不可枚举的 Symbol 属性
Object.defineProperties(obj, {
 [Symbol('baz')]: {
  value: 'Symbol baz',
  enumerable: false
 }
})
 
// 给对象添加一个可枚举的 Symbol 属性
obj[Symbol('foo')] = 'Symbol foo'
 
Object.getOwnPropertySymbols(obj).forEach((key) => {
 console.log(obj[key]) 
})
 
// 输出结果：Symbol baz Symbol foo

Object.keys(): Setara dengan mengembalikan tatasusunan sifat objek; .

4. Perbandingan kaedah traversal

var obj = {
 a: 1,
 b: 2
}
Object.defineProperty(obj, 'method', {
 value: function () {
     alert("Non enumerable property")
 },
 enumerable: false
})
 
console.log(Object.keys(obj))
// ["a", "b"]
console.log(Reflect.ownKeys(obj))
// ["a", "b", "method"]

[Cadangan berkaitan:

tutorial pembelajaran javascript

]

Atas ialah kandungan terperinci Penjelasan terperinci tentang 5 kaedah traversal gelung objek Javascript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!