使用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的目的分析
Jan 05 Javascript
找到了一篇jQuery与Prototype并存的冲突的解决方法
Aug 29 Javascript
JavaScript 页面编码与浏览器类型判断代码
Jun 03 Javascript
常用的JavaScript验证正则表达式汇总
Nov 26 Javascript
node.js中的require使用详解
Dec 15 Javascript
javascript单页面手势滑屏切换原理详解
Mar 21 Javascript
学JavaScript七大注意事项【必看】
May 04 Javascript
深入理解JS函数的参数(arguments)的使用
May 28 Javascript
JS中常用的输出方式(五种)
Jun 12 Javascript
Angular2 多级注入器详解及实例
Oct 30 Javascript
JS使用canvas中的measureText方法测量字体宽度示例
Feb 02 Javascript
JQuery+Bootstrap 自定义全屏Loading插件的示例demo
Jul 03 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
解决出现SoapFault (looks like we got no XML document)的问题
2017/06/24 PHP
PHP抽象类与接口的区别实例详解
2019/05/09 PHP
jquery ajax 登录验证实现代码
2009/09/23 Javascript
关于Jqzoom的使用心得 jquery放大镜效果插件
2010/04/12 Javascript
javascript之querySelector和querySelectorAll使用介绍
2011/12/20 Javascript
JS简单实现String转Date的方法
2016/03/02 Javascript
sencha ext js 6 快速入门(必看)
2016/06/01 Javascript
利用原生JS与jQuery实现数字线性变化的动画
2017/02/24 Javascript
Angular 4依赖注入学习教程之简介(一)
2017/06/04 Javascript
原生js实现简单的链式操作
2017/07/04 Javascript
Form表单上传文件(type="file")的使用
2017/08/03 Javascript
jQuery选择器之属性过滤选择器详解
2017/09/28 jQuery
React组件内事件传参实现tab切换的示例代码
2018/07/04 Javascript
vue使用原生js实现滚动页面跟踪导航高亮的示例代码
2018/10/25 Javascript
javascript原型链学习记录之继承实现方式分析
2019/05/01 Javascript
vue中使用 pako.js 解密 gzip加密字符串的方法
2019/06/10 Javascript
javascript实现的字符串转换成数组操作示例
2019/06/13 Javascript
vue 地区选择器v-distpicker的常用功能
2019/07/23 Javascript
使用JavaScript计算前一天和后一天的思路详解
2019/12/20 Javascript
Python学习之asyncore模块用法实例教程
2014/09/29 Python
python实现发送邮件及附件功能
2021/03/02 Python
Django实现学员管理系统
2019/02/26 Python
如何用Django处理gzip数据流
2021/01/29 Python
python爬虫破解字体加密案例详解
2021/03/02 Python
使用CSS3 制作一个material-design 风格登录界面实例
2016/12/12 HTML / CSS
html table呈现个人简历以及单元格宽度失效的问题解决
2021/01/22 HTML / CSS
德国高品质男装及配饰商城:Cultizm(Raw Denim原色牛仔裤)
2018/04/16 全球购物
eBay加拿大站:eBay.ca
2019/06/20 全球购物
音乐表演专业毕业生求职信
2013/10/14 职场文书
诉讼代理人授权委托书
2014/10/11 职场文书
大学生自我推荐信范文
2015/03/24 职场文书
2016公司中秋节寄语
2015/12/07 职场文书
Canvas跟随鼠标炫彩小球的实现
2021/04/11 Javascript
Centos7中MySQL数据库使用mysqldump进行每日自动备份的编写
2021/08/02 MySQL
Python+Selenium实现读取网易邮箱验证码
2022/03/13 Python
MySQL数据库之内置函数和自定义函数 function
2022/06/16 MySQL