如何在 AngularJS 中有效地求和數組屬性?
Dec 19, 2024 am 01:05 AMAngularJS 中的高級數組求和
在 AngularJS 中,對數組屬性求和可能是一項常見任務。基本方法包括迭代數組並累積屬性值。然而,當面對多個陣列和不同的屬性名稱時,這種方法會變得乏味。
為了解決這個問題,需要一種更靈活、可重用的解決方案,它允許對任何數組屬性進行方便的求和。這可以使用reduce()方法來實現,該方法提供了一種強大的方法來聚合數組值。
考慮以下範例:
$scope.traveler = [ { description: 'Senior', Amount: 50}, { description: 'Senior', Amount: 50}, { description: 'Adult', Amount: 75}, { description: 'Child', Amount: 35}, { description: 'Infant', Amount: 25 }, ];
登入後複製
對陣列的「Amount」屬性求和旅行者陣列使用reduce(),我們可以寫如下方法:
$scope.sum = function(items, prop){ return items.reduce( function(a, b){ return a + b[prop]; }, 0); };
登入後複製
在這個方法中,我們使用帶有回呼的reduce()方法函數接受兩個參數:累加值(a) 和陣列的目前元素(b)。在回調中,我們存取要求和的屬性 (prop) 並將其新增至累加值。
要將此方法應用於我們的旅行者數組,我們可以執行以下操作:
$scope.travelerTotal = $scope.sum($scope.traveler, 'Amount');
登入後複製
使用這種方法,我們可以輕鬆地對AngularJS 應用程式中任何數組的屬性值求和。透過定義可重複使用的方法,我們避免了冗餘程式碼並確保求和計算的一致性。
以上是如何在 AngularJS 中有效地求和數組屬性?的詳細內容。更多資訊請關注PHP中文網其他相關文章!
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn

熱門文章
倉庫:如何復興隊友
3 週前
By 尊渡假赌尊渡假赌尊渡假赌
擊敗分裂小說需要多長時間?
3 週前
By DDD
Hello Kitty Island冒險:如何獲得巨型種子
3 週前
By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.能量晶體解釋及其做什麼(黃色晶體)
1 週前
By 尊渡假赌尊渡假赌尊渡假赌
公眾號網頁更新緩存難題:如何避免版本更新後舊緩存影響用戶體驗?
3 週前
By 王林

熱門文章
倉庫:如何復興隊友
3 週前
By 尊渡假赌尊渡假赌尊渡假赌
擊敗分裂小說需要多長時間?
3 週前
By DDD
Hello Kitty Island冒險:如何獲得巨型種子
3 週前
By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.能量晶體解釋及其做什麼(黃色晶體)
1 週前
By 尊渡假赌尊渡假赌尊渡假赌
公眾號網頁更新緩存難題:如何避免版本更新後舊緩存影響用戶體驗?
3 週前
By 王林

熱門文章標籤

記事本++7.3.1
好用且免費的程式碼編輯器

SublimeText3漢化版
中文版,非常好用

禪工作室 13.0.1
強大的PHP整合開發環境

Dreamweaver CS6
視覺化網頁開發工具

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