使用angularjs.foreach时return的问题解决


Posted in Javascript onSeptember 30, 2018

AngularJS中当我们需要遍历某个数组的时候,我们会用到forEach语法。AngularJS中forEach的用法如下:

angular.forEach(array,function(obj,index){
doSomething();
})

array表示需要遍历的数组,obj表示遍历时的每个元素,index表示遍历时元素的下标。index不是必须的参数,可以不写。可以根据需要添加与否。

在写一个比较数组对象中是否存在一个对象,存在返回true,失败返回false.在return时,发现并没有退出方法,自己测试了一下.

首先先写一个数组对象,然后用angularjs的forEach方法循环比较,当存在名字为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然后程序结束,但输出结果却是这样的:

使用angularjs.foreach时return的问题解决

结果发现在forEach里的return 居然只起到了for循环里的continue作用.

再把forEach循环的返回值和执行函数的返回值打印出来:

使用angularjs.foreach时return的问题解决

forEach函数返回的是循环的数组,函数的返回值是false.说明在forEach里return 并没有奏效,仅仅起到了continue的作用.
去网上搜了一下,并没有原因说明..

解决方案:用一个临时变量存储结果,当条件成立相同时将结果改为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());

使用angularjs.foreach时return的问题解决

这样虽然能获得正确的返回值,但却无法阻止forEach的循环,想来forEach应该是用在历遍数组元素来做一些操作,像这样的应该用for循环比较好一些.

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
intro.js 页面引导简单用法 分享
Aug 06 Javascript
Js点击弹出下拉菜单效果实例
Aug 12 Javascript
input链接页面、打开新网页等等的具体实现
Dec 30 Javascript
Js实现滚动变色的文字效果
Jun 16 Javascript
jQuery操作表单常用控件方法小结
Mar 23 Javascript
JavaScript简单实现弹出拖拽窗口(二)
Jun 17 Javascript
AngularJS ng-style中使用filter
Sep 21 Javascript
BootstrapValidator超详细教程(推荐)
Dec 07 Javascript
vue2.0 axios前后端数据处理实例代码
Jun 30 Javascript
elementUI多选框反选的实现代码
Apr 03 Javascript
js利用递归与promise 按顺序请求数据的方法
Aug 30 Javascript
Vue通过for循环随机生成不同的颜色或随机数的实例
Nov 09 Javascript
angular将html代码输出为内容的实例
Sep 30 #Javascript
详解Vue.js iview实现树形权限表(可扩展表)
Sep 30 #Javascript
对angularJs中$sce服务安全显示html文本的实例
Sep 30 #Javascript
vue  自定义组件实现通讯录功能
Sep 30 #Javascript
对angularJs中2种自定义服务的实例讲解
Sep 30 #Javascript
angularJs在多个控制器中共享服务数据的方法
Sep 30 #Javascript
iview Upload组件多个文件上传的示例代码
Sep 30 #Javascript
You might like
Yii配置与使用memcached缓存的方法
2016/07/13 PHP
thinkphp 字母函数详解T/I/N/D/M/A/R/U
2017/04/03 PHP
Laravel中log无法写入问题的解决
2017/06/17 PHP
在textarea文本域中显示HTML代码的方法
2007/03/06 Javascript
onkeydown事件解决按回车键直接提交数据的需求
2013/04/11 Javascript
ExtJS[Desktop]实现图标换行示例代码
2013/11/17 Javascript
深入分析JQuery和JavaScript的异同
2014/10/23 Javascript
JQuery动态添加和删除表格行的方法
2015/03/09 Javascript
JS实现的相册图片左右滚动完整实例
2016/11/23 Javascript
vue+axios实现登录拦截的实例代码
2017/05/22 Javascript
小程序从手动埋点到自动埋点的实现方法
2019/01/24 Javascript
vue实现分环境打包步骤(给不同的环境配置相对应的打包命令)
2019/06/04 Javascript
nodejs中使用worker_threads来创建新的线程的方法
2021/01/22 NodeJs
[54:33]2018DOTA2亚洲邀请赛小组赛 A组加赛 Liquid vs Optic
2018/04/03 DOTA
Python内置函数bin() oct()等实现进制转换
2012/12/30 Python
pygame播放音乐的方法
2015/05/19 Python
Python爬取网易云音乐上评论火爆的歌曲
2017/01/19 Python
微信跳一跳python代码实现
2018/01/05 Python
使用11行Python代码盗取了室友的U盘内容
2018/10/23 Python
python 同时读取多个文件的例子
2019/07/16 Python
tensorflow 实现自定义梯度反向传播代码
2020/02/10 Python
Python实现动态循环输出文字功能
2020/05/07 Python
浅析python 字典嵌套
2020/09/29 Python
Python 使用SFTP和FTP实现对服务器的文件下载功能
2020/12/17 Python
地图可视化神器kepler.gl python接口的使用方法
2020/12/22 Python
用python-webdriver实现自动填表的示例代码
2021/01/13 Python
写一个用矩形法求定积分的通用函数
2012/11/08 面试题
心理健康心得体会
2014/01/02 职场文书
创新型城市实施方案
2014/03/06 职场文书
经贸日语专业个人求职信范文
2014/04/29 职场文书
装修施工安全责任书
2014/07/24 职场文书
科技馆观后感
2015/06/08 职场文书
2016年质量月活动总结报告
2016/04/05 职场文书
HTML+VUE分页实现炫酷物联网大屏功能
2021/05/27 Vue.js
python读取并查看npz/npy文件数据以及数据显示方法
2022/04/14 Python
类和原型的设计模式之复制与委托差异
2022/07/07 Javascript