对象属性遍历es6

对象遍历的几种方式

方式一：for...in...

要使用 (const i in obj) 而不是 (i in obj)，因为后者将会创建一个全局变量。

// Object 原型链上扩展的方法也会被遍历出来
Object.prototype.fun = () => {};
const obj = { name: 'zhangsan', age: 13 };
for (const i in obj) {
  console.log(i, ':', obj[i]);
} 
// name : zhangsan
// age : 13
// fun : () => {}

使用 for...in... 循环时，返回的是所有能够通过对象访问的、可枚举的属性，既包括存在于实例中的属性，也包括存在于原型中的实例。如果只需要获取对象的实例属性，可以使用 hasOwnProperty 进行过滤。

// 不属于自身的属性将被 hasOwnProperty 过滤
Object.prototype.fun = () => {};
const obj = { name: 'zhangsan', age: 13 };
for (const i in obj) {
  if (Object.prototype.hasOwnProperty.call(obj, i)) {
    console.log(i, ':', obj[i]);    
  }
}
// name : zhangsan
// age : 13

for...in... 的循环顺序，参考《JavaScript 权威指南（第7版）》6.6.1。

• 先列出名字为非负整数的字符串属性，按照数值顺序从最小到最大。这条规则意味着数组和类数组对象的属性会按照顺序被枚举。
• 在列出类数组索引的所有属性之后，在列出所有剩下的字符串名字（包括看起来像整负数或浮点数的名字）的属性。这些属性按照它们添加到对象的先后顺序列出。对于在对象字面量中定义的属性，按照他们在字面量中出现的顺序列出。
• 最后，名字为符号对象的属性按照它们添加到对象的先后顺序列出。

方式二：Object.keys

用于获取对象自身所有的可枚举的属性值，但不包括原型中的属性，然后返回一个由属性名组成的数组。

Object.prototype.fun = () => {};

const str = 'helloworld';
console.log(Object.keys(str));
// ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"]

const arr = ['a', 'b', 'c'];
console.log(Object.keys(arr));
// ["0", "1", "2"]

const obj = { name: 'zhangsan', age: 13 };
console.log(Object.keys(obj));
// ["name", "age"]

方式三：Object.values

用于获取对象自身所有的可枚举的属性值，但不包括原型中的属性，然后返回一个由属性值组成的数组。

Object.prototype.fun = () => {};

const str = 'helloworld';
console.log(Object.values(str));
// ["h", "e", "l", "l", "o", "w", "o", "r", "l", "d"]

const arr = ['a', 'b', 'c'];
console.log(Object.values(arr));
// ["a", "b", "c"]

const obj = { name: 'zhangsan', age: 13 };
console.log(Object.values(obj));
// ["zhangsan", 13]

方式四：Object.entries

用于获取对象自身所有的可枚举的属性值，但不包括原型中的属性，然后返回二维数组。每一个子数组由对象的属性名、属性值组成。

是一种可以同时拿到属性名与属性值的方法。

const str = 'hello';
for (const [key, value] of Object.entries(str)) {    
  console.log(`${key}: ${value}`);
}
// 0: h
// 1: e
// 2: l
// 3: l
// 4: o

const arr = ['a', 'b', 'c'];
for (const [key, value] of Object.entries(arr)) {    
  console.log(`${key}: ${value}`);
}
// 0: a
// 1: b
// 2: c

const obj = { name: 'zhangsan', age: 13 };
for (const [key, value] of Object.entries(obj)) {    
  console.log(`${key}: ${value}`);
}
// name: zhangsan
// age: 13

方式五：Object.getOwnPropertyNames

用于获取对象自身所有的可枚举的属性值（不包括 Symbol 值作为名称的属性），但不包括原型中的属性，然后返回一个由属性名组成的数组。

Object.prototype.fun = () => {};
Array.prototype.fun = () => {};

const str = 'hello'
console.log(Object.getOwnPropertyNames(str));
// ["0", "1", "2", "3", "4", "length"]

const arr = ['a', 'b', 'c'];
console.log(Object.getOwnPropertyNames(arr));
// ["0", "1", "2", "length"]

const obj = { name: 'zhangsan', age: 13 };
const symbol1 = Symbol('symbol1')
const symbol2 = Symbol('symbol2')
obj[symbol1] = 'hello'
obj[symbol2] = 'world'
console.log(Object.getOwnPropertyNames(obj));
// ["name", "age"]

方式六：Object.getOwnPropertySymbols()

用于获取指定对象的所有 Symbol 属性名。该方法返回一个数组，成员是当前对象的所有用作属性名的 Symbol 值。

const obj = { name: 'zhangsan', age: 13 };
const symbol1 = Symbol('symbol1')
const symbol2 = Symbol('symbol2')
obj[symbol1] = 'hello'
obj[symbol2] = 'world'
console.log(Object.getOwnPropertySymbols(obj));
// [Symbol(symbol1), Symbol(symbol2)]

方式七：Reflect.ownKeys()

返回一个数组，包含对象自身的所有属性，不管是属性名是 Symbol 或字符串，也不管是否可枚举。

const obj = { name: 'zhangsan', age: 13 };
const symbol1 = Symbol('symbol1')
const symbol2 = Symbol('symbol2')
obj[symbol1] = 'hello'
obj[symbol2] = 'world'
console.log(Reflect.ownKeys(obj));
// ["name", "age", Symbol(symbol1), Symbol(symbol2)]