Javascript 객체의 5가지 루프 순회 방법에 대한 자세한 설명

Javascript 객체를 반복하는 방법은 무엇입니까? 다음 글에서는 JS 객체 탐색 방법 5가지를 자세히 소개하고, 이 5가지 방법을 간략하게 비교해 보도록 하겠습니다.

1. 객체 탐색 방법

• for ... infor ... in

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

• Object.getOwnPropertyNames()

• Object.getOwnPropertySymbols()

• Reflect.ownKeys()

二、对象属性遍历次序规则

以上5种方法遍历对象的属性时都遵守同样的属性遍历次序规则

• 属性名为数值，按照数值升序排序

• 属性名为字符串，按照生成时间升序排序

• 属性名为Symbol，按照生成时间升序排序

三、遍历方法详解

1. for in

for…in 主要用于循环对象属性。循环中的代码每执行一次，就会对对象的属性进行一次操作。其语法如下：

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

其中两个参数：

• var：必须。指定的变量可以是数组元素，也可以是对象的属性。

• object：必须。指定迭代的的对象。

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()

这三个方法都用来遍历对象，它会返回一个由给定对象的自身可枚举属性（不含继承的和Symbol属性）组成的数组，数组元素的排列顺序和正常循环遍历该对象时返回的顺序一致，这个三个元素返回的值分别如下：

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

注意

• Object.keys()方法返回的数组中的值都是字符串，也就是说不是字符串的key值会转化为字符串。

• 结果数组中的属性值都是对象本身可枚举的属性，不包括继承来的属性。

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()返回属性key，但不包括不可枚举的属性，而Reflect.ownKeys()会返回所有属性key：

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)

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

Object.getOwnPropertyNames()객체의 속성을 순회할 때 동일한 속성 순회 순서 규칙을 따릅니다.value값String세대 시간Symbol세대 시간for…in은 주로 객체 속성을 반복하는 데 사용됩니다. 루프의 코드가 실행될 때마다 개체의 속성이 작동됩니다. 구문은 다음과 같습니다: 두 개의 매개변수: 객체: 필수입니다. 반복할 개체를 지정합니다. 출력 결과: 참고:

세 가지 방법을 모두 사용하여 탐색하세요. 객체의 고유한 열거 가능한 속성(상속 및 기호 속성 제외)으로 구성된 배열을 반환합니다. 배열 요소의 순서는 객체가 정상적으로 탐색될 때 반환되는 순서와 일치합니다. 각 요소별로 다음과 같습니다. Object.values(): 객체 키 값이 포함된 배열을 반환합니다. Object.entries(): 객체 키 이름과 키 값이 포함된 배열을 반환합니다. NoteObject.keys() 메서드에서 반환된 배열의 값은 모두 문자열이므로 문자열이 아닌 키 값은 문자열로 변환됩니다. 결과 배열의 속성 값은 상속된 속성을 제외한 객체 자체의 입니다.

3. Object.getOwnPropertyNames()

Object.getOwnPropertyNames() 메서드는 Object.keys()와 유사하며 object 매개 변수로 개체 자체의 모든 속성 이름을 포함하는 배열을 반환합니다. 하지만

	Object.getOwnPropertySymbols()		Reflect.ownKeys() code>		2. 객체 속성 순회 순서 규칙	위의 다섯 가지 방법은 모두
속성 이름은	입니다.	오름차순 정렬		속성 이름은	, 정렬 기준은	오름차순
속성 이름은	, 정렬 기준은	오름차순		3. 순회 방법에 대한 자세한 설명		1. for in
rrreee		var: 필수. 지정된 변수는 배열 요소 또는 객체 속성일 수 있습니다.			rrreee	rrreee
for in 메소드는 현재 객체의 열거 가능한 모든 속성을 순회할 뿐만 아니라 프로토타입 체인의 속성도 순회합니다.		2. Object.keys(), Object.values(), Object.entries()			Object.keys(): 객체 키 이름이 포함된 배열을 반환합니다.
	rrreee				열거 가능한 속성

열거 불가능한 속성을 반환할 수 있습니다.

rrreee두 메소드 모두 객체의 속성 수를 계산하는 데 사용할 수 있습니다. rrreee

4. Object.getOwnPropertySymbols()🎜🎜 🎜 Object.getOwnPropertySymbols() 메서드는 문자열 속성을 제외한 객체 자체의 Symbol 속성 배열을 반환합니다. 🎜rrreee🎜🎜5. ()🎜🎜🎜Reflect.ownKeys()는 객체 자체의 모든 속성을 포함하는 배열을 반환합니다. Object.keys()와 유사합니다. Object.keys()는 속성 키를 반환하지만 열거할 수 없는 속성은 포함하지 않는 반면 Reflect.ownKeys()는 모든 속성 키를 반환합니다. 🎜rrreee🎜참고: 🎜

🎜🎜 Object.keys(): 객체 속성 배열을 반환하는 것과 동일합니다. 🎜🎜🎜🎜Reflect.ownKeys(): Object.getOwnPropertyNames(obj).concat(Object.getOwnPropertySymbols(obj)와 동일합니다. 🎜🎜 🎜🎜4. 순회 방법 비교🎜🎜🎜🎜🎜순회 방법🎜🎜자체 속성🎜🎜상속 속성🎜🎜Traverse 기본 속성🎜🎜Traverse 비열거자 가능한 속성🎜🎜심볼 유형🎜🎜🎜 🎜🎜🎜for ... in🎜🎜self🎜🎜inherit🎜🎜yes🎜🎜yes🎜🎜no🎜🎜does not contain🎜🎜🎜🎜Object.keys()🎜🎜self🎜🎜🎜 🎜🎜예🎜🎜아니요 🎜 🎜No🎜🎜No 포함 🎜🎜🎜🎜Object.getOwnPropertyNames()🎜🎜self🎜🎜🎜🎜🎜 is 🎜🎜 no 🎜🎜 is 🎜🎜에 🎜🎜🎜이 포함되지 않음 🎜Object.getOwnPropertySymbols() 🎜🎜Self🎜🎜🎜 ㅋㅋㅋ 🎜에는 🎜🎜🎜🎜 🎜이 포함되어 있습니다.[관련 권장 사항: 🎜자바스크립트 학습 튜토리얼🎜🎜 】🎜🎜

위 내용은 Javascript 객체의 5가지 루프 순회 방법에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!