JS-遍历对象与映射

遍历对象

1. 遍历对象所有的可枚举属性（自有的+继承的属性），使用 for…in
2. 遍历对象自有的所有可枚举属性（非继承属性），使用 Object.keys() 或 for…in + Objec.hasOwnProperty()
3. 获取对象所有继承属性（非自有属性），可以使用 for…in + Object.keys()
4. 遍历对象自有的所有可枚举和不可枚举属性（非继承属性），使用 Object.getOwnPropertyNames()
5. 获取对象自有的所有可枚举、不可枚举属性和继承属性，使用 for…in + Object.getOwnPropertyNames(obj) 或 for…in + Object.keys() + Object.getOwnPropertyNames(obj)

const obj = {
	name: 'Scarlett',
	age: 37,
	occupation: 'actress', // 不可枚举属性
	[Symbol()]: 'Johansson', // symbol
}

Reflect.ownKeys() ⭐

• Reflect.ownKeys() 返回指定对象自身的所有属性（包含不可枚举属性和 Symbol 属性）组成的数组。它的返回值等同于 Object.getOwnPropertyNames(target).concat(Object.getOwnPropertySymbols(target))

// 接上demo
Reflect.ownKeys(obj).map((key) => {
	console.log(key, obj[key])
})

/* 输出结果：
name Scarlett
age 37
occupation actress
Symbol() "Johansson"
*/

for…in

• 用于以任意顺序遍历对象所有的可枚举属性（包括对象自身的和继承的可枚举属性，不含 Symbol 属性）

for (let key in obj) {
	console.log(key) // name age
}

for…of

• 可以使用的范围包括 Array、Set 和 Map 结构、类数组对象（比如 arguments 对象、DOM NodeList 对象）、字符串等
• 类数组对象
  • 虽然不是所有的类数组对象都具有 Iterator 接口，但可以使用 Array.from()方法转化

// 字符串 | arguments对象
for (let s of str | arguments) {
	console.log(s)
}
// DOM元素集合
let domList = document.querySelectorAll('p') // 选择器
for (let p of domList) {
	p.classList.add('test')
}

• 普通对象
  • 不能直接使用 for…of 结构，需要使用 Object.keys()方法将对象的键名生成一个数组，然后遍历。

for (var key of Object.keys(obj)) {
	console.log(key)
}

Object.keys()

• 该方法接收一个对象为参数，返回一个数组，包含该对象自有的可枚举属性（不含继承的和 Symbol 属性），数组中属性名的排列顺序和正常循环遍历该对象时返回的顺序一致 。
• 该方法如果参数不是一个对象，将被强制转换为一个对象。
• 只能遍历对象的可枚举属性

Object.keys(obj).map((key) => {
	console.log(key) // name  age
})

1. Object.entries() 返回指定对象自身的可枚举属性的键值对（不含继承的和 Symbol 属性）数组；
2. Object.values() 返回指定对象自身的所有可枚举属性的值（不含继承的和 Symbol 属性）组成的数组；

Object.getOwnPropertyNames()

• 接收一个对象为参数，返回该对象所有可枚举和不可枚举属性的属性名（不含 Symbol 属性）组成的数组。
  • for…in 结合 Object.getOwnPropertyNames() 获取对象自有的所有可枚举、不可枚举属性和继承属性

const getAllPropertyNames = (obj) => {
	let props = Object.assign([], Object.getOwnPropertyNames(obj))
	// 得到所有的可枚举属性（自有的和继承的属性）
	for (let key in obj) {
		// 过滤自有的不可枚举属性
		if (!Object.getOwnPropertyNames(obj).includes(key)) {
			props.push(key)
		}
	}
	return props
}
getAllPropertyNames(obj) // ["name", "age", "occupation", "nationality"]

Object.getOwnPropertySymbols()

• 返回指定对象自身所有的 Symbol 属性的数组。

Object.getOwnPropertySymbols(obj).map((key) => {
	console.log(key, obj[key]) // Symbol() "Johansson", Symbol(aa) "localSymbol"
})