js遍历对象key，value

声明一个对象：

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(){returnthis.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 objectconst 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 orderconst arrayLikeObj2 ={100:"a",2:"b",7:"c"};
console.log(Object.values(arrayLikeObj2));// ['b', 'c', 'a']// getFoo is a non-enumerable propertyconst myObj = Object.create({},{getFoo:{value(){returnthis.foo;},},},);
myObj.foo ="bar";
console.log(Object.values(myObj));// ['bar']

方法二：for/in遍历

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)