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

 更新时间:2018年09月30日 14:05:58   作者:鲸冬香  
这篇文章主要介绍了使用angularjs.foreach时return的问题解决,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

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然后程序结束,但输出结果却是这样的:

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

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

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());

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

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

相关文章

  • Angular2里获取(input file)上传文件的内容的方法

    Angular2里获取(input file)上传文件的内容的方法

    这篇文章主要介绍了Angular2里获取(input file)上传文件的内容的方法,非常具有实用价值,需要的朋友可以参考下
    2017-09-09
  • 在AngularJS应用中实现一些动画效果的代码

    在AngularJS应用中实现一些动画效果的代码

    这篇文章主要介绍了在AngularJS应用中实现一些动画效果的代码,AngularJS是一款热门的JavaScript库,需要的朋友可以参考下
    2015-06-06
  • AngularJS使用拦截器实现的loading功能完整实例

    AngularJS使用拦截器实现的loading功能完整实例

    这篇文章主要介绍了AngularJS使用拦截器实现的loading功能,结合完整实例形式分析了AngularJS拦截器的设置、调用及loading功能实现技巧,需要的朋友可以参考下
    2017-05-05
  • angularJS实现不同视图同步刷新详解

    angularJS实现不同视图同步刷新详解

    今天小编就为大家分享一篇angularJS实现不同视图同步刷新详解,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-10-10
  • angular学习之动态创建表单的方法

    angular学习之动态创建表单的方法

    这篇文章主要介绍了angular学习之动态创建表单的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-12-12
  • 实践中学习AngularJS表单

    实践中学习AngularJS表单

    表单是最常用的一种组建。在Angular.js中,其实并没有单独的为表单添加多少特殊功能。但是,利用Angular.js框架本身的特点,可以更友好的呈现表单。下面将介绍几种常用的功能在Angular中是如何巧妙实现的
    2016-03-03
  • angular2 组件之间通过service互相传递的实例

    angular2 组件之间通过service互相传递的实例

    今天小编就为大家分享一篇angular2 组件之间通过service互相传递的实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-09-09
  • angularjs性能优化的方法

    angularjs性能优化的方法

    这篇文章主要介绍了angularjs性能优化的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-09-09
  • angular select 默认值设置方法

    angular select 默认值设置方法

    下面小编就为大家带来一篇angular select 默认值设置方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-06-06
  • AngularJS解决ng界面长表达式(ui-set)的方法分析

    AngularJS解决ng界面长表达式(ui-set)的方法分析

    这篇文章主要介绍了AngularJS解决ng界面长表达式(ui-set)的方法,通过具体问题的分析并结合实例形式给出了AngularJS长表达式的相关使用技巧,需要的朋友可以参考下
    2016-11-11

最新评论