js对象的遍历总结（看这一篇就够了）

1. for in

Object.prototype.fun = () => {};
const obj = { 2: 'a', 1: 'b' };
for (let i in obj) {
  console.log(i, ':', obj[i]);
}
// 1: b
// 2: a
// fun : () => {} Object 原型链上扩展的方法也被遍历出来

for (let i in obj) {
  if (Object.prototype.hasOwnProperty.call(obj, i)) {
      console.log(i, ':', obj[i]);
    }
}
// 1: b
// 2: a

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

2. Object.keys

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

const str = 'abc';
console.log(Object.keys(str));
// ['0', '1', '2']

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

const obj = { 1: 'b', 2: 'a' };
console.log(Object.keys(obj));
// ['1', '2']

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

3. Object.values

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

const str = 'abcd';
console.log(Object.values(str));
// ['a', 'b', 'c', 'd']

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

const obj = { 1: 'b', 0: 'a' ,2:'c'};
console.log(Object.values(obj));
// ['a', 'b', 'c']

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

4. Object.entries

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

示例1 -- 传入对象
const obj = { foo: 'bar', baz: 'abc' }; 
console.log(Object.entries(obj));  // [['foo', 'bar'], ['baz', 'abc']]

示例2 -- 数组
const arr = [1, 2, 3]; 
console.log(Object.entries(arr));  // [['0', 1], ['1', '2'], ['2', '3']]

示例3 -- 数组（数组中包含对象）
const arr1 = [{ a: 1 }, 2, 3]; 
console.log(Object.entries(arr1));  // [['0', { a: 1 }], ['1', '2'], ['2', '3']]

示例4 -- 数组（数组中的值全部为对象）
const arr2 = [{ a: 1 }, { b: 2 }, { c: 3 }]; 
console.log(Object.entries(arr2));  // [['0', { a: 1 }], ['1', { b: 2 }], ['2', { c: 3 }]]

示例5 -- 字符串
const str = '123'; 
console.log(Object.entries(str));  // [['0', '1'], ['1', '2'], ['2', '3']]

Object.entries() 方法返回一个给定对象自身可枚举属性的键值对数组，其排列与使用 for...in 循环遍历该对象时返回的顺序一致（区别在于 for-in 循环也枚举原型链中的属性）。

通俗点就是 Object.entries() 可以把一个对象的键值以数组的形式遍历出来，结果和 for...in 一致，但不会遍历原型属性。

5. Object.getOwnPropertyNames

const str = 'ab';
console.log(Object.getOwnPropertyNames(str));
// ['0', '1', 'length']

Array.prototype.fun = () => {};
const arr = ['a', 'b'];
console.log(Object.getOwnPropertyNames(arr));
// ['0', '1', 'length']

Object.prototype.fun = () => {};
const obj = { 1: 'b', 0: 'a' };
console.log(Object.getOwnPropertyNames(obj));
// ['0', '1']

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

对于一般的对象来说，Object.keys()和Object.getOwnPropertyNames()返回的结果是一样的。只有涉及不可枚举属性时，才会有不一样的结果。Object.keys方法只返回可枚举的属性，Object.getOwnPropertyNames方法还返回不可枚举的属性名。

数组的length属性是不可枚举的属性，所以只出现在Object.getOwnPropertyNames方法的返回结果中。