首頁 web前端 js教程 JavaScript的屬性枚舉方法有哪些

JavaScript的屬性枚舉方法有哪些

Jan 15, 2019 pm 02:37 PM

這篇文章我們來看看枚舉屬性的方法,文章中我們將主要學習如何使用forEach()、map()、filter()方法,下面我們就來看看具體的內容。

JavaScript的屬性枚舉方法有哪些

我們在上一篇文章中為大家介紹了關於JavaScript的屬性枚舉方法有哪些中Object.keys取得物件屬性的方法,接下來我們就來看看JavaScript的屬性枚舉方法有哪些列舉屬性的方法。

先來看常見的物件資料

var obj = {
  name: '张 三',  
  age: 30,  
  area: '北京'
}
登入後複製
透過forEach()列舉屬性

forEach()是一個可用來陣列的方法,但由於Object.keys ()的回傳值是一個數組,因此相容性很好。

要列舉屬性,請看如下描述。

Object.keys(obj).forEach(function(data) {
  console.log(data);
})
登入後複製

執行結果

name
age
area
登入後複製

請注意,我們將函數定義為forEach()的參數。

透過這樣描述,可以對每個屬性執行任意函數。

順便說一句,也可以使用像「obj [data]」這樣的格式輸出屬性的值!

透過map()枚舉屬性

基本用法與forEach()相同,但它是一個作為陣列傳回值取得屬性的函數。

請看下面的範例!

var result = Object.keys(obj).map(function(data) {
    return data;
})
登入後複製

執行結果

["name", "age", "area"]
登入後複製
登入後複製

請注意map()參數中指定函數的內容。

透過filter()枚舉屬性

filter()和map()的用法幾乎一樣。

請看下面的範例

var result = Object.keys(obj).filter(function(data) {
    return data;
})
登入後複製

執行結果

["name", "age", "area"]
登入後複製
登入後複製

在這個範例中,我們只是用filter()取代了map()部分,但執行結果是相同的。

filter()的特徵是可以描述僅在滿足特定條件時取得值的過程。

例如,「return data ==='name'」僅在屬性具有「name」時才傳回值。

如果使用filter(),例如只提取30歲以上的用戶也會很容易。

以上是JavaScript的屬性枚舉方法有哪些的詳細內容。更多資訊請關注PHP中文網其他相關文章!

本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn

熱門文章

兩個點博物館:邦格荒地地點指南
4 週前 By 尊渡假赌尊渡假赌尊渡假赌
倉庫:如何復興隊友
3 週前 By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒險:如何獲得巨型種子
3 週前 By 尊渡假赌尊渡假赌尊渡假赌

熱門工具標籤

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

在JavaScript中替換字符串字符 在JavaScript中替換字符串字符 Mar 11, 2025 am 12:07 AM

在JavaScript中替換字符串字符

jQuery檢查日期是否有效 jQuery檢查日期是否有效 Mar 01, 2025 am 08:51 AM

jQuery檢查日期是否有效

jQuery獲取元素填充/保證金 jQuery獲取元素填充/保證金 Mar 01, 2025 am 08:53 AM

jQuery獲取元素填充/保證金

前5個日期操縱JS插件 前5個日期操縱JS插件 Feb 28, 2025 am 12:34 AM

前5個日期操縱JS插件

10值得檢查jQuery插件 10值得檢查jQuery插件 Mar 01, 2025 am 01:29 AM

10值得檢查jQuery插件

10個jQuery手風琴選項卡 10個jQuery手風琴選項卡 Mar 01, 2025 am 01:34 AM

10個jQuery手風琴選項卡

jQuery添加捲軸到Div jQuery添加捲軸到Div Mar 01, 2025 am 01:30 AM

jQuery添加捲軸到Div

自定義Google搜索API設置教程 自定義Google搜索API設置教程 Mar 04, 2025 am 01:06 AM

自定義Google搜索API設置教程

See all articles