快捷導(dǎo)航

js遍歷對象key和value實戰(zhàn)舉例

更新時間：2023年07月26日 11:29:31 作者：殘憶2迷惘

這篇文章主要給大家介紹了關(guān)于js遍歷對象key和value的相關(guān)資料,隨著JavaScript在web應(yīng)用程序中的廣泛使用,遍歷對象的key和value成為了編寫復(fù)雜代碼所必需的技能,需要的朋友可以參考下

聲明一個對象：

let obj = {
    name: 'Kamen',
    age: '23',
    hobby: 'eat eat eat'
  }

方法一：轉(zhuǎn)化為操作數(shù)組forEach遍歷

遍歷對象屬性

//遍歷對象屬性
Object.keys(obj).forEach(key => {
    console.log(key)
  })

關(guān)于Object.keys()方法Object.keys() 方法會返回一個由一個給定對象的自身可枚舉屬性組成的數(shù)組，數(shù)組中屬性名的排列順序和正常循環(huán)遍歷該對象時返回的順序一致。

例子

// 簡單數(shù)組
const arr = ['a', 'b', 'c'];
console.log(Object.keys(arr)); // console: ['0', '1', '2']

// 類數(shù)組對象
const obj = { 0: 'a', 1: 'b', 2: 'c' };
console.log(Object.keys(obj)); // console: ['0', '1', '2']

// 具有隨機(jī)鍵順序的類數(shù)組對象
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)
})

關(guān)于Object.values()方法object .values()靜態(tài)方法返回給定對象自己的可枚舉字符串鍵屬性值的數(shù)組。

例子

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