JavaScript 对象遍历的几种方式

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

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


//如果只需要获取对象的实例属性，可以使用 hasOwnProperty 进行过滤
const obj = { name: 'zhangsan', age: 13,fun: ()=>{}};
for (const i in obj) {
  if (Object.prototype.hasOwnProperty.call(obj, i)) {
    console.log(i, ':', obj[i]);    
  }
}
// name : zhangsan
// age : 13

方式二：Object.keys

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

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

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

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