循环遍历的区别

news/2024/7/11 0:40:44 标签: javascript, es6

循环遍历的区别

forEach

直接循环数组,没有返回值

如何结束循环:

是结束本次循环是可以使用return,但是结束全部循环return无效,
原因:好像是因为forEach不管符不符合都会走完所有的循环,所以return结束本次循环后,会继续其他的循环,只是我的通俗理解
解决:

javascript">1. 抛出错误,中断循环
var BreakException = {};
try {
  [1, 2, 3].forEach(function(el) {
    console.log(el);
    if (el === 2) throw BreakException;
  });
} catch (e) {
  if (e !== BreakException) throw e;
}
javascript">2. 使用[Array#some]
some() 为数组中的每一个元素执行一次 callback 函数,
直到找到一个使得 callback 返回一个“真值”(即可转换为布尔值 true 的值)。
如果找到了这样一个值,some() 将会立即返回 true[1, 2, 3].some(function(el) {
  console.log(el);
  return el === 2;
});

for

循环数组,对数组的每一项进行加工,并返回一个新的数组

filter

循环并过滤数组,得到想要的内容

javascript">let arr = [1,2,3,4,5,6,7,8,9];
arr.filter((item,index)=>{
	if(item % 2 == 0){   //偶数
		return true           //返回true(留下偶数)
	}else{                //奇数
		return false           //返回false(去除奇数)
})

reduce

对数组进行整合,将数组中每一项通过加工成一个值

javascript">let arr = [1,2,3,4,5,6,7,8,9];
arr.reduce((pre,next,index)=>{
	return pre + next;         //数组相加得45
},0)      //0为初始值

for…in

用于遍历对象,不适用于数组

javascript">let obj = {
	name:"neinei",
	age:10
}
for(let key in obj){}

for…of

遍历数组、数组对象、字符串等

javascript">const iterable = ['mini', 'mani', 'mo'];
for (const value of iterable) {
  console.log(value);
}

http://www.niftyadmin.cn/n/1660010.html

相关文章

报错笔记——serve : “vue-cli-service serve“

报错笔记——serve:“vue-cli-service serve” 项目运行编译时报错如图所示,网上搜的删除node_modules并重新npm install根本没有用; 原因:node版本过高,出现不兼容 解决办法:卸载当前node,并安装v10及…

elementui——带建议的输入框远程搜索

elementui——带建议的输入框远程搜索 <el-autocompletev-model"state":fetch-suggestions"querySearchAsync"placeholder"请输入内容"select"handleSelect" ></el-autocomplete> <script>export default {data() …

element——时间选择器当天之后,后一选择器时间不超过前时间选择器

element——时间选择器当天之后&#xff0c;后一选择器时间不超过前时间选择器 <el-date-picker type"date"placeholder"请选择"v-model"startTime" :picker-options"pickerOptions" value-format"yyyy-MM-dd"></e…

element——表单的复杂数组渲染

element——表单的数组渲染及校验(vue) 常见表单渲染及校验 <template><div classtest><el-form ref"form" :model"form" :rules"rules"><el-form-item label"活动名称" propname><el-input v-model&quo…

swiper——轮播slider最后一个元素显示不全

轮播slider最后一个元素显示不全&#xff0c;能拖出来&#xff0c;松手弹回去 slidesPerView: ‘auto’,重要的属性设置&#xff0c;有的人说要给slider元素设置宽高&#xff0c;或者去掉所有的padding&#xff0c;但是slidesPerView: auto’设置过后会使轮播元素长度呈现一行…

ie浏览器兼容——scrollTop

ie浏览器兼容——scrollTop 报错 无法获取未定义或 null 引用的属性“scrollTop” 因为ie不支持scrollingElement 解决 polyfill document.scrollingElement.js https://github.com/yangg/scrolling-element npm install scrolling-element --save 页面或main.js中引入 i…

js——纯js模拟双向数据绑定

js——纯js模拟双向数据绑定 是不是很多人只是知道双向数据绑定的实现效果&#xff0c;并不知道其原理&#xff0c;或是知道其原理并不明白的&#xff0c; 使用js模拟一个简单的双向数据绑定案例吧&#xff0c;就会变得容易理解 Object.defineProperty() vue双向数据绑定的原…

JB的阅读之旅-管理就是解决问题

书籍信息 出版社&#xff1a;金城出版社 作者&#xff1a;李培翔 印次&#xff1a;2018年9月 小结 全篇看完&#xff0c;都是比较基础&#xff0c;中期以解决问题介绍了N种方法&#xff0c;都是比较实在的内容&#xff0c;值得一看&#xff0c;大概3分钟可以快速阅览完&#xf…