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ù)組的同時，提取對象中的屬性值。
附：js數(shù)組對象中提取每個對象里的某個值
使用map直接將需要的值return出來（上圖是將res這個數(shù)組中的sn全部返回并生成一個新的數(shù)組）
返回結(jié)果如下圖
總結(jié)
到此這篇關(guān)于js遍歷對象數(shù)組并獲取對象相應(yīng)的屬性值的文章就介紹到這了,更多相關(guān)js遍歷對象數(shù)組內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
JavaScript中最常用的10種代碼簡寫技巧總結(jié)
這篇文章主要總結(jié)了JavaScript中最常用的10種代碼簡寫技巧的相關(guān)資料，其中包括三元操作符、短路求值簡寫方式、聲明變量簡寫方法、if存在條件簡寫方法及JavaScript循環(huán)簡寫方法等等，分別給出了詳細的示例代碼供大家參考，需要的朋友們下面來一起看看吧。2017-06-06
這篇文章主要為大家詳細介紹了微信小程序?qū)崿F(xiàn)計算器，含歷史記錄，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-09-09
這篇文章主要介紹了JavaScript對象拷貝與賦值操作,結(jié)合實例形式分析了javascript對象定義、拷貝、賦值等相關(guān)操作技巧與注意事項,需要的朋友可以參考下2018-12-12
Javascript實現(xiàn)滑塊滑動改變值的實現(xiàn)代碼
一個功能,值得一說的是本頁面的滑塊實現(xiàn)由于對美工不是很熟悉所以上圖了,感興趣的朋友可以了解下哈2013-04-04
這篇文章介紹了JS實現(xiàn)簡單的Canvas畫圖實例代碼，有需要的朋友可以參考一下2013-07-07
這篇文章主要給大家介紹了關(guān)于JavaScript實現(xiàn)頁面中錄音功能的相關(guān)資料，文中通過示例代碼介紹的非常詳細，對大家學(xué)習(xí)或者使用JavaScript具有一定的參考學(xué)習(xí)價值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2019-06-06
今天小編就為大家分享一篇layer父頁獲取彈出層輸入框里面的值方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09
這篇文章主要介紹了基于JS開發(fā)微信網(wǎng)頁錄音功能的實例代碼,代碼簡單易懂，非常不錯，具有一定的參考借鑒價值，需要的朋友可以參考下2019-04-04
使用javascript過濾html的字符串(注釋標(biāo)記法)
本篇文章是對使用javascript過濾html的字符串進行了詳細的分析介紹，需要的朋友參考下2013-07-07
微信小程序開發(fā)（二）圖片上傳+服務(wù)端接收詳解
本篇文章主要介紹了微信小程序開發(fā)（二）圖片上傳+服務(wù)端接收，具有一定的參考價值，有興趣的可以了解一下。2017-01-01