let obj = { name: 'Kamen', age: '23', hobby: 'eat eat eat' }
方法一:转化为操作数组forEach遍历
遍历对象属性
//遍历对象属性 Object.keys(obj).forEach(key => { console.log(key) })
关于Object.keys()方法
Object.keys() 方法会返回一个由一个给定对象的自身可枚举属性组成的数组,数组中属性名的排列顺序和正常循环遍历该对象时返回的顺序一致。
例子
// 简单数组 const arr = ['a', 'b', 'c']; console.log(Object.keys(arr)); // console: ['0', '1', '2'] // 类数组对象 const obj = { 0: 'a', 1: 'b', 2: 'c' }; console.log(Object.keys(obj)); // console: ['0', '1', '2'] // 具有随机键顺序的类数组对象 const anObj = { 100: 'a', 2: 'b', 7: 'c' }; console.log(Object.keys(anObj)); // console: ['2', '7', '100'] // getFoo 是一个不可枚举的属性 const myObj = Object.create({}, { getFoo: { value() { return this.foo; } } }); myObj.foo = 1; console.log(Object.keys(myObj)); // console: ['foo']
遍历对象属性值
//遍历对象属性值 Object.values(obj).forEach(val => { console.log(val) })
关于Object.values()方法
object .values()静态方法返回给定对象自己的可枚举字符串键属性值的数组。
例子
const obj = { foo: "bar", baz: 42 }; console.log(Object.values(obj)); // ['bar', 42] // Array-like object const arrayLikeObj1 = { 0: "a", 1: "b", 2: "c" }; console.log(Object.values(arrayLikeObj1)); // ['a', 'b', 'c'] // Array-like object with random key ordering // When using numeric keys, the values are returned in the keys' numerical order const arrayLikeObj2 = { 100: "a", 2: "b", 7: "c" }; console.log(Object.values(arrayLikeObj2)); // ['b', 'c', 'a'] // getFoo is a non-enumerable property const myObj = Object.create( {}, { getFoo: { value() { return this.foo; }, }, }, ); myObj.foo = "bar"; console.log(Object.values(myObj)); // ['bar']
for( let key in obj ){ //遍历对象属性 console.log(key) //遍历对象属性值 console.log(obj[key]) }
注意:该方法会继承原型链的所有属性,例如:
Object.prototype.pet = 'open' for( let key in obj ){ console.log(key) console.log(obj[key]) } console.log(obj)
上述情况可以使用hasOwnProperty避免:
Object.prototype.pet = 'open' for( let key in obj ){ if (obj.hasOwnProperty(key) === true){ console.log(key) console.log(obj[key]) } } console.log(obj)