使用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 相关文章推荐
javascript 模式设计之工厂模式学习心得
Apr 27 Javascript
js实现运动logo图片效果及运动元素对象sportBox使用方法
Dec 25 Javascript
.net,js捕捉文本框回车键事件的小例子(兼容多浏览器)
Mar 11 Javascript
使用js+jquery实现无限极联动
May 23 Javascript
javascript判断两个IP地址是否在同一个网段的实现思路
Dec 13 Javascript
jquery实现简单的无缝滚动
Apr 15 Javascript
基于jQuery封装的分页组件
Jun 26 jQuery
利用ECharts.js画K线图的方法示例
Jan 10 Javascript
vue better-scroll插件使用详解
Jan 25 Javascript
原生JS实现图片懒加载之页面性能优化
Apr 26 Javascript
Vue 解决多级动态面包屑导航的问题
Nov 04 Javascript
jquery插件实现悬浮的菜单
Apr 24 jQuery
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保存session到memcache服务器的方法
2016/01/19 PHP
关于取不到由location.href提交而来的上级页面地址的解决办法
2009/07/30 Javascript
JS判断当前日期是否大于某个日期的实现代码
2012/09/02 Javascript
js控制页面控件隐藏显示的两种方法介绍
2013/10/09 Javascript
JavaScript中的定时器之Item23的合理使用
2015/10/30 Javascript
ES6中非常实用的新特性介绍
2016/03/10 Javascript
Nodejs如何搭建Web服务器
2016/03/28 NodeJs
使用Web Uploader实现多文件上传
2016/06/08 Javascript
微信小程序 WXDropDownMenu组件详解及实例代码
2016/10/24 Javascript
jquery插件ContextMenu设置右键菜单
2017/03/13 Javascript
React Native使用Modal自定义分享界面的示例代码
2017/10/31 Javascript
nodejs操作mongodb的填删改查模块的制作及引入实例
2018/01/02 NodeJs
js中this对象用法分析
2018/01/05 Javascript
webpack构建的详细流程探底
2018/01/08 Javascript
js中Object.defineProperty()方法的不详解
2018/07/09 Javascript
GOJS+VUE实现流程图效果
2018/12/01 Javascript
Vue开发Html5微信公众号的步骤
2019/04/11 Javascript
vue-父子组件和ref实例详解
2019/11/10 Javascript
[01:09]2014DOTA2国际邀请赛 TI4西雅图DOTA2 中国美女coser加油助威
2014/07/20 DOTA
详解Python程序与服务器连接的WSGI接口
2015/04/29 Python
一个基于flask的web应用诞生 记录用户账户登录状态(6)
2017/04/11 Python
python使用json序列化datetime类型实例解析
2018/02/11 Python
将TensorFlow的模型网络导出为单个文件的方法
2018/04/23 Python
Python3处理HTTP请求的实例
2018/05/10 Python
Python闭包执行时值的传递方式实例分析
2018/06/04 Python
python覆盖写入,追加写入的实例
2019/06/26 Python
Python计算两个矩形重合面积代码实例
2019/09/16 Python
Python urllib request模块发送请求实现过程解析
2020/12/10 Python
德国价格合理的品牌商品购物网站:averdo
2019/03/21 全球购物
介绍一下Ruby中的对象,属性和方法
2012/07/11 面试题
商务日语毕业生自荐信
2013/11/23 职场文书
“四风”问题的主要表现和危害思想汇报
2014/09/19 职场文书
毕业实习计划书
2015/01/16 职场文书
公安干警正风肃纪心得体会
2016/01/15 职场文书
浅谈JavaScript浅拷贝和深拷贝
2021/11/07 Javascript
浅谈css实现背景颜色半透明的两种方法
2021/12/06 HTML / CSS