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

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

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

• for ... in

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

• Object.getOwnPropertyNames()

#Object.getOwnPropertySymbols()

• ##Reflect.ownKeys()

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

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

#属性名はvalueで、

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

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

• 属性名はSymbol、

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

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

##1. for in

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

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

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

  ログイン後にコピー

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

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