使用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 相关文章推荐
ext checkboxgroup 回填数据解决
Aug 21 Javascript
Dojo 学习要点
Sep 03 Javascript
IE6-8中Date不支持toISOString的修复方法
May 04 Javascript
jQuery自定义添加"$"与解决"$"冲突的方法
Jan 19 Javascript
javascript中indexOf技术详解
May 07 Javascript
原生JS轮播图插件
Feb 09 Javascript
vue.js实现插入数值与表达式的方法分析
Jul 06 Javascript
Angular angular-file-upload文件上传的示例代码
Aug 23 Javascript
解决JavaScript中0.1+0.2不等于0.3问题
Oct 23 Javascript
Flutter实现仿微信底部菜单栏功能
Sep 18 Javascript
js实现mp3录音通过websocket实时传送+简易波形图效果
Jun 12 Javascript
微信小程序向Java后台传输参数的方法实现
Dec 10 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
PHP error_log()将错误信息写入一个文件(定义和用法)
2013/10/25 PHP
php简单smarty入门程序实例
2015/06/11 PHP
PHP常用设计模式之委托设计模式
2016/02/13 PHP
PHP实现微信退款功能
2018/10/02 PHP
如何在PHP中使用AES加密算法加密数据
2020/06/24 PHP
jquery 学习之二 属性相关
2010/11/23 Javascript
javascript-简单的计算器实现步骤分解(附图)
2013/05/30 Javascript
js函数参数设置默认值的一种变通实现方法
2014/05/26 Javascript
javascript实现C语言经典程序题
2015/11/29 Javascript
js实现无缝滚动特效
2015/12/20 Javascript
Node.js+Express配置入门教程详解
2016/05/19 Javascript
jQuery四种选择器使用及示例
2016/06/05 Javascript
jQuery用FormData实现文件上传的方法
2016/11/21 Javascript
JS瀑布流实现方法实例分析
2016/12/19 Javascript
JS实现的3des+base64加密解密算法完整示例
2018/05/18 Javascript
浅谈ElementUI中switch回调函数change的参数问题
2018/08/24 Javascript
Vue CLI3搭建的项目中路径相关问题的解决
2018/09/17 Javascript
详解微信小程序「渲染层网络层错误」的解决方法
2021/01/06 Javascript
[20:57]Ti4主赛事第三天开幕式
2014/07/21 DOTA
Flask入门教程实例:搭建一个静态博客
2015/03/27 Python
Python利用全连接神经网络求解MNIST问题详解
2020/01/14 Python
python文件和文件夹复制函数
2020/02/07 Python
浅谈CSS3动画的回调处理
2016/07/21 HTML / CSS
Smashbox官网:美国知名彩妆品牌
2017/01/05 全球购物
英国女士家居服网站:hush
2017/08/09 全球购物
Groupon法国官方网站:特卖和网上购物高达-70%
2019/09/02 全球购物
简历中自我评价分享
2013/10/09 职场文书
物业前台接待岗位职责
2015/04/03 职场文书
2015年工程师工作总结
2015/04/30 职场文书
焦裕禄纪念馆观后感
2015/06/09 职场文书
小学副班长竞选稿
2015/11/21 职场文书
求职信:会计求职的写作技巧
2019/04/24 职场文书
优秀大学生申请书
2019/06/24 职场文书
关于redisson缓存序列化几枚大坑说明
2021/08/04 Redis
Springboot/Springcloud项目集成redis进行存取的过程解析
2021/12/04 Redis
浅析Python OpenCV三种滤镜效果
2022/04/11 Python