Javascriptオブジェクトの5つのループトラバースメソッドを詳しく解説

JavaScript オブジェクトをループするにはどうすればよいですか?次の記事では、5 つの JS オブジェクト走査方法を詳しく紹介し、これら 5 つの方法を簡単に比較します。

1. オブジェクト トラバーサル メソッド

• for ... in

• #Object.keys()、Object.values()、Object.entries()

• Object.getOwnPropertyNames()

#Object.getOwnPropertySymbols()

• ##Reflect.ownKeys()

• 2. オブジェクト属性の走査順序ルール

上記 5 つのメソッドはすべて、オブジェクトのプロパティを走査するときに同じ属性走査順序ルールに従います

#属性名は value で、

value

• 属性名は で昇順に並べられています。 String、

  世代時間で昇順に並べ替えられます

• 属性名は Symbol、

  で昇順に並べ替えられます生成時間

• #3. トラバーサル方法の詳細説明

##1. for in

for…in

主にオブジェクトのプロパティをループするために使用されます。ループ内のコードが実行されるたびに、オブジェクトのプロパティが操作されます。構文は次のとおりです。

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

2 つのパラメータ:

var: 必須。指定する変数は、配列要素またはオブジェクトのプロパティです。 ＃＃＃＃＃＃＃＃＃＃＃＃必要なオブジェクト。反復処理するオブジェクトを指定します。

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

出力結果:

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

注意:
for in メソッドは、列挙可能なすべてのオブジェクトを走査するだけではありません。現在のオブジェクト プロパティがリフトされると、そのプロトタイプ チェーン上のプロパティもトラバースされます。

2. Object.keys()、Object.values()、Object.entries()

これ3 つのメソッドはすべて、オブジェクトを走査するために使用されます。このメソッドは、指定されたオブジェクト独自の列挙可能なプロパティ (継承プロパティと Symbol プロパティを除く) で構成される配列を返します。配列要素の順序は、通常のループがオブジェクトを走査するときに返される順序と同じです。同じ順序で、これら 3 つの要素によって返される値は次のとおりです:
Object.keys(): オブジェクト キー名を含む配列を返します。

# #Object.values(): オブジェクト キー値を含む配列を返します; Object.entries(): オブジェクト キー名とキー値を含む配列を返します。

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]

Note
Object.keys() メソッドによって返される配列内の値はすべて文字列です。つまり、文字列ではありません キー値は文字列に変換されます。
結果配列内の属性値は、継承された属性を除くすべてのオブジェクト自体の
• 列挙可能な属性

  です。

3. Object.getOwnPropertyNames()

• Object.getOwnPropertyNames()

  メソッドは

  Object.keys()# に似ています## は、オブジェクトをパラメータとして受け取り、オブジェクト自体のすべてのプロパティ名を含む配列を返します。ただし、列挙不可能な
プロパティを返すこともあります。

• 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

4. Object.getOwnPropertySymbols()

Object.getOwnPropertySymbols() このメソッドは、文字列プロパティを除く、オブジェクト自体の Symbol プロパティの配列を返します:

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

5 。 Reflect.ownKeys()

Reflect.ownKeys() オブジェクト自体のすべてのプロパティを含む配列を返します。これは Object.keys() に似ています。Object.keys() はプロパティ キーを返しますが、列挙不可能なプロパティは含まれませんが、Reflect.ownKeys() はすべてのプロパティ キーを返します:

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"]

注:

Object.keys(): オブジェクト プロパティの配列を返すことと同等;

Reflect.ownKeys(): Object と同等。 getOwnPropertyNames( obj).concat(Object.getOwnPropertySymbols(obj).

4. トラバーサル メソッドの比較

• 走査メソッド

自己プロパティ

• 継承プロパティ基本プロパティの走査

プロトタイプ チェーンの走査

列挙不可能なプロパティの走査

シンボル タイプfor ... inselfinheritisYesNoObject.keys()self##YesNoNoObject.getOwnPropertyNames は含まれません()Selfを含みません#NoReflect.ownKeys()self# はNoYesContains[関連する推奨事項:

# は含まれません
Yes	No	Yes		#Object.getOwnPropertySymbols()	self
No	Yes	すべてのシンボル プロパティ
				JavaScript 学習チュートリアル	]

以上がJavascriptオブジェクトの5つのループトラバースメソッドを詳しく解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。