JS でオブジェクトをトラバースするにはいくつかの方法があります

数日前、友人が Object.getOwnPropertyNames() が何に使われるのか尋ねました。

私は普段このメソッドをあまり使いません。答え方がわかりません

メソッド名の分析から、オブジェクト自身のプロパティ名で構成される配列が返されるはずです

##これは

Object と同じではありませんか。物事はそれほど単純ではないと感じたので、オブジェクトを走査するこれらのメソッドの違いを詳しく調べました。for in

for in ループはオブジェクトを走査する最も基本的な方法であり、オブジェクト プロトタイプ チェーンのプロパティも取得します

// 创建一个对象并指定其原型，bar 为原型上的属性
const obj = Object.create({
  bar: 'bar'
})

// foo 为对象自身的属性
obj.foo = 'foo'

for (let key in obj) {
  console.log(obj[key]) // foo, bar
}

オブジェクト プロトタイプのプロパティも循環していることがわかります

この場合、オブジェクト

hasOwnProperty()

メソッドを使用して、プロトタイプ チェーン上のプロパティをフィルターで除外できます。

for (let key in obj) {
  if (obj.hasOwnProperty(key)) {
    console.log(obj[key]) // foo
  }
}

この時点で、プロトタイプの bar プロパティがフィルターされます。 outObject.keys

Object.keys ()

は、ES5 の新しいオブジェクト メソッドです。このメソッドは、オブジェクト自身のプロパティ名で構成される配列を返します。プロトタイプ チェーン上のプロパティを自動的にフィルターで除外します。その後、配列の

forEach()

メソッドを使用して <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">Object.keys(obj).forEach((key) =&gt; {   console.log(obj[key]) // foo })</pre><div class="contentsignin">ログイン後にコピー</div></div> を走査できます。さらに、Object.values()# もあります。 ## メソッドと Object.entries()

メソッド。これら 2 つのメソッドのスコープは

Object と同じです。 .keys() メソッドは似ているため、再度説明しません。 for in ループと Object.keys() メソッドは、オブジェクトの列挙不可能なプロパティを返しません

列挙不可能なプロパティをトラバースする必要がある場合プロパティを取得するには、前述の

Object.getOwnPropertyNames() メソッドを使用する必要があります。

Object.getOwnPropertyNames

Object.getOwnPropertyNames()

も新しいメソッドです。 ES5 の object メソッド。このメソッドは、列挙不可能なプロパティを含む、オブジェクト独自のプロパティ名で構成される配列を返します。配列の

forEach

メソッドを介して走査することもできます。

// 创建一个对象并指定其原型，bar 为原型上的属性
// baz 为对象自身的属性并且不可枚举
const obj = Object.create({
  bar: 'bar'
}, {
  baz: {
    value: 'baz',
    enumerable: false
  }
})

obj.foo = 'foo'

// 不包括不可枚举的 baz 属性
Object.keys(obj).forEach((key) => {
  console.log(obj[key]) // foo
})

// 包括不可枚举的 baz 属性
Object.getOwnPropertyNames(obj).forEach((key) => {
  console.log(obj[key]) // baz, foo
})

ES2015 では追加されています。オブジェクトのキーとして使用できる Symbol データ型。この型の場合、ES2015 では Object.getOwnPropertySymbols() メソッド Object .getOwnPropertySymbols

## も追加されています。 #Object.getOwnPropertySymbols() このメソッドは、文字列プロパティを除く、オブジェクト自体の Symbol プロパティで構成される配列を返します。

Object.getOwnPropertySymbols(obj).forEach((key) => {
  console.log(obj[key])
})

オブジェクトがまだシンボルを持っていないため、何もありません。属性

// 给对象添加一个不可枚举的 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

Reflect.ownKeys()

このメソッドは、ES2015 の新しい静的メソッドです。このメソッドは、次のすべてのプロパティ名で構成される配列を返します。オブジェクト自体。列挙不可能なプロパティとシンボル プロパティを含む

Reflect.ownKeys(obj).forEach((key) => {
  console.log(obj[key]) // baz, foo, Symbol baz, Symbol foo
})

コントラスト

#メソッド

基本プロパティ

プロトタイプ チェーン Non-enumerableSymbolはい ##NoNoObject.keys()YesNo##Object.getOwnPropertyNames()YesNoYesNoObject.getOwnPropertySymbols()NoNoYesYesReflect.ownKeys()YesNoYesYesJS チュートリアル 」

			##for in	Yes
			#No	No
	結論	for in ループのみがオブジェクト プロトタイプ チェーンのプロパティを取得します。他のメソッドはオブジェクト自体のプロパティにのみ適用できます	ES追加された新機能は、以前のコードに副作用をもたらしません。たとえば、ES2015 より前に存在した for in ループ、Object.keys() および Object.getOwnPropertyNames() は、Symbol プロパティを返しません。	推奨チュートリアル: 「

以上がJS でオブジェクトをトラバースするにはいくつかの方法がありますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。