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