使用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 相关文章推荐
Prototype Date对象 学习
Jul 12 Javascript
表单的焦点顺序tabindex和对应enter键提交
Jan 04 Javascript
div拖拽插件——JQ.MoveBox.js(自制JQ插件)
May 17 Javascript
JavaScript中的ubound函数使用实例
Nov 04 Javascript
node.js中的path.isAbsolute方法使用说明
Dec 08 Javascript
JS自定义对象实现Java中Map对象功能的方法
Jan 20 Javascript
jQuery+PHP实现微信转盘抽奖功能的方法
May 25 Javascript
js判断数组key是否存在(不用循环)的简单实例
Aug 03 Javascript
巧用Javascript的逻辑运算符
Dec 02 Javascript
jQuery EasyUI Accordion可伸缩面板组件使用详解
Feb 28 Javascript
Javascript实现一个简单的输入关键字添加标签效果实例
Jun 01 Javascript
在Vuex使用dispatch和commit来调用mutations的区别详解
Sep 18 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 执行系统命令的方法
2009/07/07 PHP
PHP比较运算符的详细介绍
2015/09/29 PHP
php函数传值的引用传递注意事项分析
2016/06/25 PHP
js创建元素(节点)示例
2014/01/02 Javascript
jQuery 获取、设置HTML或TEXT内容的两种方法
2014/05/23 Javascript
JS实现的用来对比两个用指定分隔符分割的字符串是否相同
2014/09/19 Javascript
node.js中的http.response.write方法使用说明
2014/12/14 Javascript
jQuery多级弹出菜单插件ZoneMenu
2014/12/18 Javascript
JavaScipt中栈的实现方法
2016/02/17 Javascript
JavaScript获取css行间样式,内连样式和外链样式的简单方法
2016/07/18 Javascript
js动态生成form 并用ajax方式提交的实现方法
2016/09/09 Javascript
微信小程序 实例应用(记账)详解
2016/09/28 Javascript
jquery实现静态搜索功能(可输入搜索文字)
2017/03/28 jQuery
浅谈Angular路由复用策略
2017/10/04 Javascript
vue: WebStorm设置快速编译运行的方法
2018/10/18 Javascript
layui 选择列表,打勾,点击确定返回数据的例子
2019/09/02 Javascript
Vue开发中遇到的跨域问题及解决方法
2020/02/11 Javascript
[02:15]2014DOTA2国际邀请赛 专访LGD.lin小兔子是大腿
2014/07/14 DOTA
python实现的二叉树算法和kmp算法实例
2014/04/25 Python
Python 关于反射和类的特殊成员方法
2017/09/14 Python
Python使用crontab模块设置和清除定时任务操作详解
2019/04/09 Python
python3 sorted 如何实现自定义排序标准
2020/03/12 Python
Django扫码抽奖平台的配置过程详解
2021/01/14 Python
js实现移动端H5页面手指滑动刻度尺功能
2017/11/16 HTML / CSS
html5使用canvas绘制文字特效
2014/12/15 HTML / CSS
钉钉企业内部H5微应用开发详解
2020/05/12 HTML / CSS
澳大利亚设计的婴儿和女孩的衣服:Oobi
2018/12/16 全球购物
乌克兰电子和家用电器商店:Foxtrot
2019/07/23 全球购物
美国一站式电动和手动工具商店:International Tool
2020/11/26 全球购物
Java中有几种类型的流?JDK为每种类型的流提供了一些抽象类以供继承,请说出他们分别是哪些类?
2012/05/30 面试题
舞蹈教育学专业求职信
2014/06/29 职场文书
交通事故被告代理词
2015/05/23 职场文书
张丽莉观后感
2015/06/16 职场文书
JS一分钟在github+Jekyll的博客中添加访问量功能的实现
2021/04/03 Javascript
mysql联合索引的使用规则
2021/06/23 MySQL
Python实现自动玩连连看的脚本分享
2022/04/04 Python