使用angularjs.foreach時return的問題解決
AngularJS中當我們需要遍歷某個數(shù)組的時候,我們會用到forEach語法。AngularJS中forEach的用法如下:
angular.forEach(array,function(obj,index){ doSomething(); })
array表示需要遍歷的數(shù)組,obj表示遍歷時的每個元素,index表示遍歷時元素的下標。index不是必須的參數(shù),可以不寫??梢愿鶕?jù)需要添加與否。
在寫一個比較數(shù)組對象中是否存在一個對象,存在返回true,失敗返回false.在return時,發(fā)現(xiàn)并沒有退出方法,自己測試了一下.
首先先寫一個數(shù)組對象,然后用angularjs的forEach方法循環(huán)比較,當存在名字為2的對象時,輸出true并返回,否則輸出false并返回.
self.test = function() { var testArray = [{name: 1},{name:2},{name:3}]; angular.forEach(testArray, function(value, key){ if (value.name == 2) {console.log(true + ' pass the test');return;} console.log(value.name + ' pass'); }); console.log(false + ' pass the test'); return false; }();
剛開始認為,當找到value.name == 2的元素時,方法就會直接返回,所以應該只輸出1 pass,true pass the test然后程序結(jié)束,但輸出結(jié)果卻是這樣的:
結(jié)果發(fā)現(xiàn)在forEach里的return 居然只起到了for循環(huán)里的continue作用.
再把forEach循環(huán)的返回值和執(zhí)行函數(shù)的返回值打印出來:
forEach函數(shù)返回的是循環(huán)的數(shù)組,函數(shù)的返回值是false.說明在forEach里return 并沒有奏效,僅僅起到了continue的作用.
去網(wǎng)上搜了一下,并沒有原因說明..
解決方案:用一個臨時變量存儲結(jié)果,當條件成立相同時將結(jié)果改為true:
self.test = function() { var testArray = [{name: 1},{name:2},{name:3}]; var result = false; angular.forEach(testArray, function(value, key){ if (value.name == 2) {result = true;} }); return result; }; console.log(self.test());
這樣雖然能獲得正確的返回值,但卻無法阻止forEach的循環(huán),想來forEach應該是用在歷遍數(shù)組元素來做一些操作,像這樣的應該用for循環(huán)比較好一些.
以上就是本文的全部內(nèi)容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。
相關文章
Angular6實現(xiàn)拖拽功能指令drag實例詳解
這篇文章主要為大家介紹了Angular6實現(xiàn)拖拽功能指令drag實例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-11-11AngularJS頁面訪問時出現(xiàn)頁面閃爍問題的解決
這篇文章主要介紹了AngularJS框架使用中出現(xiàn)頁面閃爍問題的解決方法,閃爍問題一般是初始化未加載完畢造成的,需要的朋友可以參考下2016-03-03angular.JS實現(xiàn)網(wǎng)頁禁用調(diào)試、復制和剪切
這篇文章主要給大家介紹了angular.JS實現(xiàn)網(wǎng)頁禁用調(diào)試、復制和剪切的相關資料,文中介紹的非常詳細,相信對大家具有一定的參考價值,需要的朋友們下面來一起看看吧。2017-03-03angularJs中$scope數(shù)據(jù)序列化的實例
今天小編就為大家分享一篇angularJs中$scope數(shù)據(jù)序列化的實例,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09整理AngularJS框架使用過程當中的一些性能優(yōu)化要點
這篇文章主要介紹了AngularJS框架使用過程當中的一些性能優(yōu)化要點,Angular通常被用來制作大型單頁應用,因而性能問題也是必須考慮的因素,需要的朋友可以參考下2016-03-03用WebStorm進行Angularjs 2開發(fā)(環(huán)境篇:Windows 10,Angular-cli方式)
這篇文章主要介紹了用WebStorm進行Angularjs 2開發(fā)(環(huán)境篇:Windows 10,Angular-cli方式),小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2018-12-12