使用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 相关文章推荐
引用外部js乱码问题分析及解决方案
Apr 12 Javascript
jquery等待效果示例
May 01 Javascript
表单验证正则表达式实例代码详解
Nov 09 Javascript
js实现拖拽效果(构造函数)
Dec 14 Javascript
jQuery取消特定的click事件
Feb 29 Javascript
Vue.js学习笔记之 helloworld
Aug 14 Javascript
tablesorter.js表格排序使用方法(支持中文排序)
Feb 10 Javascript
jQuery给表格添加分页效果
Mar 02 Javascript
Angular2仿照微信UI实现9张图片上传和预览的示例代码
Oct 19 Javascript
基于jQuery实现的设置文本区域的光标位置
Jun 15 jQuery
JavaScript函数式编程(Functional Programming)声明式与命令式实例分析
May 21 Javascript
使用Element的InfiniteScroll 无限滚动组件报错的解决
Jul 27 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程序
2006/10/09 PHP
一家之言的经验之谈php+mysql扎实个人基本功
2008/03/27 PHP
php中fsockopen用法实例
2015/01/05 PHP
php中实现可以返回多个值的函数实例
2015/03/21 PHP
php截取指定2个字符之间字符串的方法
2015/04/15 PHP
laravel框架语言包拓展实现方法分析
2019/11/22 PHP
javascript实现动态CSS换肤技术的脚本
2007/06/29 Javascript
在Node.js中实现文件复制的方法和实例
2014/06/05 Javascript
JQuery显示隐藏DIV的方法及代码实例
2015/04/16 Javascript
使用jQuery监听DOM元素大小变化
2016/02/24 Javascript
jQuery 选择同时包含两个class的元素的实现方法
2016/06/01 Javascript
详解Angular 4 表单快速入门
2017/06/05 Javascript
cocos creator Touch事件应用(触控选择多个子节点的实例)
2017/09/10 Javascript
react实现一个优雅的图片占位模块组件详解
2017/10/30 Javascript
element vue Array数组和Map对象的添加与删除操作
2018/11/14 Javascript
基于webpack4.X从零搭建React脚手架的方法步骤
2018/12/23 Javascript
Angular6 发送手机验证码按钮倒计时效果实现方法
2019/01/08 Javascript
JQuery Ajax跨域调用和非跨域调用问题实例分析
2019/04/16 jQuery
javascript获取select值的方法完整实例
2019/06/20 Javascript
Javascript异步编程async实现过程详解
2020/04/02 Javascript
微信小程序实现选项卡滑动切换
2020/10/22 Javascript
python+selenium实现京东自动登录及秒杀功能
2017/11/18 Python
python自动查询12306余票并发送邮箱提醒脚本
2018/05/21 Python
Numpy 改变数组维度的几种方法小结
2018/08/02 Python
python判断一个数是否能被另一个整数整除的实例
2018/12/12 Python
python tools实现视频的每一帧提取并保存
2020/03/20 Python
三步实现Django Paginator分页的方法
2019/06/11 Python
python脚本开机自启的实现方法
2019/06/28 Python
python+numpy按行求一个二维数组的最大值方法
2019/07/09 Python
css3的transition效果和transfor效果示例介绍
2013/10/30 HTML / CSS
Css3新特性应用之形状总结
2016/12/08 HTML / CSS
英国时尚配饰、珠宝和服装网站:KJ Beckett
2020/01/23 全球购物
实习生单位鉴定意见
2013/12/04 职场文书
铲车司机岗位职责
2014/03/15 职场文书
幼师辞职信怎么写
2015/02/27 职场文书
修辞手法有哪些?
2019/08/29 职场文书