一、for loop

for (let i = 0; i < products.length; i++) {
console.log(products[i]);
}

支持循环中断,可以用break中断

二、forEach()循环

forEach()Array.prototype上的方法,可以使用它对数组进行循环遍历,forEach中传入要执行的回调函数,函数有三个参数。第一个参数为数组元素(必选),第二个参数为数组元素索引值(可选),第三个参数为数组本身(可选)。没有返回值,只是针对每个元素调用回调函数

let arr = ['a','b','c','d','e'];
arr.forEach((item,index,arr)=> {
console.log(item); // a b c d e
console.log(index); // 0 1 2 3 4
console.log(arr); // ['a','b','c','d','e']
})

不需要先去计算数组的总数才能循环,直接用就可以了

forEach不支持中断循环,如果不需要条件中断循环数组的话,采用forEach是最好的选择.

三、map()循环

map()中传入要执行的回调函数,函数有三个参数。第一个参数为数组元素(必选),第二个参数为数组元素索引值(可选),第三个参数为数组本身(可选)。map() 按照原始数组元素顺序依次处理元素,返回值是一个新的数组,每个元素为调用回调函数的结果

//栗子一:
let arr = [
{name: 'a', age:'18'},
{name: 'b', age:'20'},
{name: 'c', age:'19'},
];
arr.map(function(item, index){
if(item.name === 'b'){
console.log(index) // 1
}
}) //栗子二:
let list = [1, 2, 3, 4, 5];
let other = list.map((item, index) => {
return item* 2;
});
console.log(other); // [2, 4, 6, 8, 10]

四、filter()循环

filter()中传入要执行的回调函数,函数有三个参数。第一个参数为数组元素(必选),第二个参数为数组元素索引值(可选),第三个参数为数组本身(可选)。filter() 方法会依次执行数组的每个元素,返回一个符合回调函数条件的元素组成的数组

let list = [1, 2, 3, 4, 5];
let other = list.filter((d, i) => {
return d % 2;
});
console.log(other); // [1, 3, 5]

五、some()循环

some()中传入要执行的回调函数,函数有三个参数。第一个参数为数组元素(必选),第二个参数为数组元素索引值(可选),第三个参数为数组本身(可选)。some() 方法会依次执行数组的每个元素,如果有一个元素满足条件,则表达式返回true , 剩余的元素不会再执行检测;如果没有满足条件的元素,则返回false。

let list = [1, 2, 3, 4, 5];
list.some((d, i) => {
console.log(d, i); // 1,0 2,1 3,2 4,3
return d > 3; // return true
});

六、every()循环

every()中传入要执行的回调函数,函数有三个参数。第一个参数为数组元素(必选),第二个参数为数组元素索引值(可选),第三个参数为数组本身(可选)。every() 方法会依次执行数组的每个元素,如果有一个元素不满足条件,则表达式返回false , 剩余的元素不会再执行检测;如果所有元素都满足条件,则返回true。

七、for...in...

for...in循环可用于循环对象和数组,推荐用于循环对象,可以用来遍历json

let obj = {
name: '王大锤',
age: '18',
weight: '70kg'
}
for(var key in obj) {
console.log(key); // name age weight
console.log(obj[key]); // 王大锤 18 70kg
}
let arr = ['a','b','c','d','e'];
for(var key in arr) {
console.log(key); // 0 1 2 3 4 返回数组索引
console.log(arr[key]) // a b c d e
}

for...in不应该用于迭代一个 Array,其中索引顺序很重要。并且如果为了过滤迭代继承的属性方法,又要用hasOwnProperty这些方法,非常繁琐。总之通常情况下不会去要迭代继承而来的属性,因此不太推荐使用for...in...。

八、for...of...

在可迭代对象(包括 Array,Map,Set,String,TypedArray,arguments 对象等等)上创建一个迭代循环,调用自定义迭代钩子,并为每个不同属性的值执行语句。

for...of提供了三个新方法:

  • key()是对键名的遍历;
  • value()是对键值的遍历;(默认)
  • entries()是对键值对的遍历;
let arr = ['科大讯飞', '政法BG', '前端开发'];
for (let item of arr) {
console.log(item); // 科大讯飞 政法BG 前端开发
}
// 输出数组索引
for (let item of arr.keys()) {
console.log(item); // 0 1 2
}
// 输出内容和索引
for (let [item, val] of arr.entries()) {
console.log(item + ':' + val); // 0:科大讯飞 1:政法BG 2:前端开发
}

js迭代循环的更多相关文章

  1. js 模板引擎 jade使用语法

    Jade是一款高性能简洁易懂的模板引擎,Jade是Haml的Javascript实现,在服务端(NodeJS)及客户端均有支持. 功能 · 客户端支持 · 超强的可读性 · 灵活易用的缩进 · 块扩展 ...

  2. JS数组与对象的遍历方法大全

    本文简单解析各种数组和对象属性的遍历方法: 原生for循环.for-in及forEach ES6 for-of方法遍历类数组集合 Object.key()返回键名的集合 jQuery的$.each() ...

  3. 基于JS的ajax的实现,JSON和JSONP,基于JQuery的ajax的实现

    基于JS的ajax的实现,JSON和JSONP,基于JQuery的ajax的实现1.基于JS的ajax的实现 step1: var xmlhttp = XMLHttprequest() #实例化一个对 ...

  4. JS几种数组遍历方式总结

    JS数组遍历的几种方式 JS数组遍历,基本就是for,forin,foreach,forof,map等等一些方法,以下介绍几种本文分析用到的数组遍历方式以及进行性能分析对比 第一种:普通for循环 代 ...

  5. Js遍历数组总结

    Js遍历数组总结 遍历数组的主要方法为for.forEach.map.for in.for of for var arr = [1,2,3,4,5]; var n = arr.length; // 直 ...

  6. Vue.js 和 MVVM 小细节

    MVVM 是Model-View-ViewModel 的缩写,它是一种基于前端开发的架构模式,其核心是提供对View 和 ViewModel 的双向数据绑定,这使得ViewModel 的状态改变可以自 ...

  7. js学习笔记:操作iframe

    iframe可以说是比较老得话题了,而且网上也基本上在说少用iframe,其原因大致为:堵塞页面加载.安全问题.兼容性问题.搜索引擎抓取不到等等,不过相对于这些缺点,iframe的优点更牛,跨域请求. ...

  8. js学习笔记:webpack基础入门(一)

    之前听说过webpack,今天想正式的接触一下,先跟着webpack的官方用户指南走: 在这里有: 如何安装webpack 如何使用webpack 如何使用loader 如何使用webpack的开发者 ...

  9. JS调用Android、Ios原生控件

    在上一篇博客中已经和大家聊了,关于JS与Android.Ios原生控件之间相互通信的详细代码实现,今天我们一起聊一下JS调用Android.Ios通信的相同点和不同点,以便帮助我们在进行混合式开发时, ...

  10. jquery和Js的区别和基础操作

    jqery的语法和js的语法一样,算是把js升级了一下,这两种语法可以一起使用,只不过是用jqery更加方便 一个页面想要使用jqery的话,先要引入一下jqery包,jqery包从网上下一个就可以, ...

随机推荐

  1. (四)JPA - JQPL 实现增删改查

    (一)JPA的快速入门 建议在需要使用时,看看之前的文章,先把环境搭起来. 5.JPQL JPQL和SQL 1.JPQL和SQL很像,查询关键字都是一样的 2.唯一的区别是:JPQL是面向对象的 JP ...

  2. [题解] Atcoder ARC 142 E Pairing Wizards 最小割

    题目 建图很妙,不会. 考虑每一对要求合法的巫师(x,y),他们两个的\(a\)必须都大于\(min(b_x,b_y)\).所以在输入的时候,如果\(a_x\)或者\(a_y\)小于\(min(b_x ...

  3. 关于Oracle-VM-VirtualBox的安装与说明

    VirtualBox 是一款开源虚拟机软件.VirtualBox 是由德国 Innotek 公司开发,由Sun Microsystems公司出品的软件 使用Qt编写,在 Sun 被 Oracle 收购 ...

  4. 浅谈-动态路由之OSPF的理解

    路由 在网络中,路由相当于就是一张地图,让路由器知道这个对应的IP数据包应该往哪端口.网段走:而这个"地图"我们称之为路由表,不同的目的IP路由表的下一个跳也不同,其生成方式有又有 ...

  5. python的基本运用

    python基础 Python语言是一种解释型.面向对象.动态数据类型的高级程序设计语言 开发者:Guido van Rossum(人称龟叔) 基本概念 1.变量 变量名必须是大小写英文字母.数字或下 ...

  6. 计算机网络(Learning Records)

    背景:没想到本专业并不开设这门课程,感觉过于逆天,之前开发的时候了解过相关知识 但是从来没有系统地学过,就自己看了书,总结一下 参考:<TCP/IP详解 卷1:协议> 概述 大多数网络应用 ...

  7. 【C++】GoogleTest进阶之gMock

    gMock是什么 当我们去写测试时,有些测试对象很单纯简单,例如一个函数完全不依赖于其他的对象,那么就只需要验证其输入输出是否符合预期即可. 但是如果测试对象很复杂或者依赖于其他的对象呢?例如一个函数 ...

  8. C语言编译环境中的 调试功能及常见错误提示

    文章目录 1 .调试功能 2 . 编译中的常见错误例析 3 .常见错误信息语句索引 1 .调试功能 1.常用健 <F10> : 激活系统菜单 <F6> : 将光标在编辑窗口和. ...

  9. 【JavaWeb】学习笔记——JSP

    概念 全称:Java Server Pages, Java服务端页面 描述:一种动态的网页技术,可以在其中定义HTML.JS.CSS等静态内容,以及Java代码的动态内容 说明:JSP = HTML ...

  10. k8s运维之pod排错

    k8s运维之pod排错 K8S是一个开源的,用于管理云平台中多个主机上的容器化应用,Kubernetes的目标是让部署容器化变得简单并且高效 K8S的核心优势: 1,基于yaml文件实现容器的自动创建 ...