一、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. Java开发学习(三十六)----SpringBoot三种配置文件解析

    一. 配置文件格式 我们现在启动服务器默认的端口号是 8080,访问路径可以书写为 http://localhost:8080/books/1 在线上环境我们还是希望将端口号改为 80,这样在访问的时 ...

  2. 文本数据挖掘---课后作业shuffle函数洗牌C++

    题目: 代码如下:#include <iostream> #include <random> #include <algorithm> #include <v ...

  3. pycharm下载与使用

    pycharm下载与使用 PyCharm是一种Python IDE(Integrated Development Environment,集成开发环境),带有一整套可以帮助用户在使用Python语言开 ...

  4. 华为路由器RIP路由协议配置命令

    RIP路由协议配置 rip 创建开启协议进程 network + ip 对指定网段接口使能RIP功能IP地址是与路由器直连的网段 debugging rip 1 查看RIP定期更新情况 termina ...

  5. [题解] Atcoder Regular Contest ARC 151 A B C D E 题解

    点我看题 昨天刚打的ARC,题目质量还是不错的. A - Equal Hamming Distances 对于一个位置i,如果\(S_i=T_i\),那么不管\(U\)的这个位置填什么,对到\(S\) ...

  6. Go | 基本数据类型详解

    前言 基本数据类型,变量存的就是值,也叫值类型.每一种数据都定义了明确的数据类型,在内存中分配了不同大小的内存空间. Printf 和 Println 的区别 printf 输出后不换行, print ...

  7. golang中的errgroup

    0.1.索引 https://waterflow.link/articles/1665239900004 1.串行执行 假如我们需要查询一个课件列表,其中有课件的信息,还有课件创建者的信息,和课件的缩 ...

  8. rabbitmq原理和应用

    0.1.索引 https://blog.waterflow.link/articles/1663772504649 RabbitMQ 是一个轻量级且易于部署的消息队列.它支持开箱即用的多种消息传递协议 ...

  9. 35.ListSerializer详解

    ListSerializer继承了BaseSerializer 一般情况下我们不直接使用ListSerializer ListSerializer会自动调用,序列化many=True的字段时,会自动调 ...

  10. python(牛客)试题解析1 - 入门级

    导航: 一.NC103 反转字符串 二.NC141 判断是否为回文字符串 三.NC151 最大公约数 四.NC65 斐波那契数列 - - - - - - - - - - 分-割-线 - - - - - ...