快捷導航

js遍歷對象數(shù)組并獲取對象相應(yīng)的屬性值實例代碼

更新時間：2023年06月06日 11:32:56 作者：CottonRoseKing

對于數(shù)組或者對象的遍歷,篩選,提取等操作是前端開發(fā)中經(jīng)常有的需求,下面這篇文章主要給大家介紹了關(guān)于js遍歷對象數(shù)組并獲取對象相應(yīng)的屬性值的相關(guān)資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下

前言

JavaScript中遍歷對象數(shù)組的方法有很多種。以下是常見的四種常見的方法：for?循環(huán)，for...of?循環(huán)，forEach?方法和map?方法，在遍歷的同時，通過訪問對象的屬性來獲取相應(yīng)的值。

?for?循環(huán)：

const objArray = [
  { id: 1, name: 'Alice' },
  { id: 2, name: 'Bob' },
  { id: 3, name: 'Charlie' },
];
for (let i = 0; i < objArray.length; i++) {
  const obj = objArray[i];
  console.log(obj.id, obj.name);
}

?for...of?循環(huán)：

const objArray = [
  { id: 1, name: 'Alice' },
  { id: 2, name: 'Bob' },
  { id: 3, name: 'Charlie' },
];

for (const obj of objArray) {
  console.log(obj.id, obj.name);
}

?forEach?方法：

const objArray = [
  { id: 1, name: 'Alice' },
  { id: 2, name: 'Bob' },
  { id: 3, name: 'Charlie' },
];

objArray.forEach((obj) => {
  console.log(obj.id, obj.name);
});

?map?方法（通常用于創(chuàng)建一個新數(shù)組，但也可以用于遍歷）：

const objArray = [
  { id: 1, name: 'Alice' },
  { id: 2, name: 'Bob' },
  { id: 3, name: 'Charlie' },
];

objArray.map((obj) => {
  console.log(obj.id, obj.name);
  return obj;
});

以上方法都可以實現(xiàn)在遍歷對象數(shù)組的同時，提取對象中的屬性值。‍