JS에서 객체를 탐색하는 방법에는 여러 가지가 있습니다.

얼마 전 친구가 Object.getOwnPropertyNames()가 무엇에 사용되는지 물었습니다. Object.getOwnPropertyNames() 是干什么用的

平时还真没有使用到这个方法，一时不知如何回答

从方法名称来分析，应该是返回的是对象自身属性名组成的数组

那和 Object.keys() 方法不就一样了吗

感觉事情并不这么简单，于是我仔细看了一下这几种遍历对象的方法的区别

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 属性就被过滤掉了

Object.keys

Object.keys() 是 ES5 新增的一个对象方法，该方法返回对象自身属性名组成的数组，它会自动过滤掉原型链上的属性，然后可以通过数组的 forEach() 方法来遍历

Object.keys(obj).forEach((key) => {
  console.log(obj[key]) // foo
})

另外还有 Object.values() 方法和 Object.entries() 方法，这两方法的作用范围和 Object.keys() 方法类似，因此不再说明

for in 循环和 Object.keys() 方法都不会返回对象的不可枚举属性

如果需要遍历不可枚举的属性，就要用到前面提到的 Object.getOwnPropertyNames() 方法了

Object.getOwnPropertyNames

Object.getOwnPropertyNames() 也是 ES5 新增的一个对象方法，该方法返回对象自身属性名组成的数组，包括不可枚举的属性，也可以通过数组的 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 属性

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

저는 평소에는 이 방법을 잘 사용하지 않습니다.

메서드 이름 분석에서 반환되는 것은 객체 자체의 속성 이름으로 구성된 배열입니다.Object.keys() 메서드와 동일하지 않나요? ?

for in

for in 루프가 가장 기본입니다 객체를 탐색하는 방법은 객체 프로토타입 체인의 속성도 가져옵니다객체를 볼 수 있습니다. 프로토타입의 속성도 재활용됩니다이 경우 객체의 hasOwnProperty() 메서드<th>rrreee</th>이때 프로토타입의 bar 속성은 필터링됩니다

Object.keys

Object.keys( )는 ES5의 새로운 객체 메소드입니다. 이 메소드는 객체의 자체 속성 이름으로 구성된 배열을 반환합니다. 프로토타입 체인의 속성은 자동으로 필터링된 다음 forEach를 통해 탐색될 수 있습니다. () methodrrreee

Object.getOwnPropertyNames

Object.getOwnPropertyNames()는 ES5의 새로운 객체 메서드이기도 합니다. 이 메서드는 열거할 수 없는 속성을 포함하여 객체 자체 속성 이름의 배열을 반환합니다. forEachrrreeeES2015의 /code> 메소드에는 객체의 키로 사용할 수 있는 Symbol 데이터 유형이 추가되었습니다. ES2015에서는 이 유형의 <code>Object .getOwnPropertySymbols() 메소드도 추가했습니다. h3 id="objectgetownpropertysymbols">Object.getOwnPropertySymbolsObject.getOwnPropertySymbols() 메서드는 문자열을 제외한 객체 자체의 Symbol 속성으로 구성된 배열을 반환합니다. rrreee 속성에는 아무것도 없습니다. 객체에 아직 Symbol 속성이 없습니다 Yes예예결론그 중 for in 루프만이 객체 프로토타입 체인의 속성을 가져오고, 다른 방법은 객체 자체의 속성에만 적용 가능합니다 ES 언어에 나중에 추가된 새로운 기능은 이전 코드에 영향을 미치지 않습니다. ES2015 이전에 존재했던 for in 루프와 같은 부작용을 생성하는 Object.keys() 및 Object.getOwnPropertyNames()는 확실히 Symbol 속성을 반환하지 않습니다. 추천 튜토리얼: "

그렇게 간단하지 않다고 느껴서 이 방법들을 자세히 살펴보았습니다. 객체를 순회하는 방법의 차이점		Reflect.ownKeys(obj).forEach((key) => {   console.log(obj[key]) // baz, foo, Symbol baz, Symbol foo })
Object.values() 메서드와 Object.entries() 메서드도 있는데, 이 두 메서드의 범위는 비슷합니다. Object.keys() 메서드에 추가하므로	for in 루프와 Object.keys는 다시 설명되지 않습니다. () 메서드는 비를 반환하지 않습니다. 열거 가능하지 않은 속성을 탐색해야 하는 경우 앞서 언급한 Object.getOwnPropertyNames() 메서드를 사용해야 합니다.
rrreee Reflect.ownKeys	Reflect.ownKeys() 이 메서드는 ES2015의 새로운 정적 메서드입니다. 이 메서드는 배열을 반환합니다. 열거할 수 없는 속성과 기호 속성을 포함하여 객체 자체의 모든 속성 이름으로 구성됩니다.	Object.getOwnPropertyNames()	예	No
No		Object.getOwnPropertySymbols()	No	No
예		Reflect.ownKeys()	예	아니요
예

JS Tutorial

"

위 내용은 JS에서 객체를 탐색하는 방법에는 여러 가지가 있습니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!