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

• 返回指定对象自身的所有属性（包含不可枚举属性和 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
  })

Object.entries() — ES8

• 返回指定对象自身的可枚举属性的键值对（不含继承的和 Symbol 属性）数组
• 示例：

  let obj = {a: 1, b: 2};
  Object.entries(obj); // [['a', 1], ['b', 2]]

Object.values() — ES8

• 返回指定对象自身的所有可枚举属性的值（不含继承的和 Symbol 属性）组成的数组
• 示例：

  let obj = {a: 1, b: 2};
  Object.values(obj);         // [1, 2]

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"
  })