​大家好,我在这里总结分享了JavaScript中的闹腾的数组循环家族。

1、大家最常用的for循环,我就不解释了;

for(let i = 0; i < 5 ; i++){
console.log(i) // 结果 0 - 4
}

  

2、forEach,用法其实和for循环一样;

var arr = [1,2,3,4]
arr.forEach(e =>{
console.log(e) // 结果1 -4
})

  

进入下面两个循环之前,先教大家一个口诀,删filter改map

 

3、filter,删除不符合条件的参数;必须有返回,结果只能是boolean类型,

是true就删除,false就留下;

var arr = [1,2,3,4]
let newarr = arr.filter(e =>{
return e != 2 // 判断e(arr) 不是2的才会输出
})
console.log(newarr) // 1,3,4

  

4、map,只修改数组里面的值,不删除参数;

var arr = [1,2,3,4]
let newarr = arr.map(e =>{
if(e == 2){ // 如果e(arr)里面的值是2,就进来执行,变成'二'
return '二'
}
return e;
})
console.log(newarr) // [1, "二", 3, 4]

  

5、some,有一个符合条件就返回true,否则就返回false;

var arr = [1,2,3,4]
var newarr = arr.some(e =>{
return e < 2
})
console.log(newarr) // e(arr),里面有参数小于2的,所有返回true;

  

6、every,l所有条件都符合才返回true,否则返回false;

var arr = [1,2,3,4]
var newarr = arr.every(e =>{
return e > 0
})
console.log(newarr) // e(arr),里面所有参数都大于0,所以返回true;

7、reduce,可用作快速求和,求阶乘,从左往右;

var arr = [1,2,3,4]
var newarr = arr.reduce((e,v) =>{
return e += v
})
console.log(newarr) //
 

8、reduceRight,从右往左;........

var arr = [1,2,3,4]
var newarr = arr.reduceRight((e,v) =>{
return e += v
})
console.log(newarr) //

9、for or

const arr = ['mini', 'mani', 'mo'];
for (let val of arr) {
console.log(val); // 数组值:mini mani mo
}
for (let index of arr.keys()) {
console.log(index);// 数组x下标
}
for (let item of arr.entries()) {
console.log(item); // 数组下标和值
}

如果喜欢您,大家可以关注下“前端伪大叔”公众号,将会定期为您推送前端的知识点!谢谢!

JavaScript里面9种数组遍历!的更多相关文章

  1. JavaScript 的 4 种数组遍历方法: for VS forEach() VS for/in VS for/of

    我们有多种方法来遍历 JavaScript 的数组或者对象,而它们之间的区别非常让人疑惑.Airbnb 编码风格禁止使用 for/in 与 for/of,你知道为什么吗? 这篇文章将详细介绍以下 4 ...

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

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

  3. JS几种数组遍历方式以及性能分析对比

    前言 这一篇与上一篇 JS几种变量交换方式以及性能分析对比 属于同一个系列,本文继续分析JS中几种常用的数组遍历方式以及各自的性能对比 起由 在上一次分析了JS几种常用变量交换方式以及各自性能后,觉得 ...

  4. js几种数组遍历方法.

    第一种:普通的for循环 ; i < arr.length; i++) { } 这是最简单的一种遍历方法,也是使用的最多的一种,但是还能优化. 第二种:优化版for循环 ,len=arr.len ...

  5. Effective JavaScript Item 49 对于数组遍历,优先使用for循环,而不是for..in循环

    本系列作为Effective JavaScript的读书笔记. 对于以下这段代码,能看出最后的平均数是多少吗? var scores = [98, 74, 85, 77, 93, 100, 89]; ...

  6. javascript数组遍历的几种常用方法性能分析对比

    前言: 数组遍历有很多种方法,虽然不同方法有不同的特性及适用环境,除了普通飞for循环之外,for...in能直接输出数组元素的索引,for...of能直接输出数组元素的值,map则可以直接生成新的数 ...

  7. JavaScript 中的12种循环遍历方法

    原文:JavaScript 中的12种循环遍历方法 题目:请介绍 JavaScript 中有哪些循环和遍历的方法,说说它们的应用场景和优缺点? 1.for 循环 let arr = [1,2,3];f ...

  8. javascript中常见的几种循环遍历

    项目开发中,不管是建立在哪个框架基础上,对数据的处理都是必须的,而处理数据离不开各种遍历循环.javascript中循环遍历有很多种方式,记录下几种常见的js循环遍历. 一.for循环 for循环应该 ...

  9. 浅谈6种JS数组遍历方法的区别

    本篇文章给大家介绍一下6种JS数组遍历方法:for.foreach.for in.for of.. each. ().each的区别.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. ...

随机推荐

  1. Laravel 中如何区别 Model 或者是 Builder?

    User::where('id',1)->update([])  和  User::find(1)->update([]) 有异曲同工之效.   额? 当你通过 Laravel 与数据库交 ...

  2. Jmeter之Cookie和Session处理

    Jmeter之Cookie和Session处理 1.Cookie 添加方式:线程组-配置元件-HTTP Cookie 管理器,如下图: 2.Session 添加方式:线程组-前置处理器 -HTTP U ...

  3. pyqt5-实时刷新页面(QApplication.processEvents())

    对于执行很耗时的程序来说,由于PyQt需要等待程序执行完毕才能进行下一步,这个过程表现在界面上就是卡顿,而如果需要执行这个耗时程序时不断的刷新界面.那么就可以使用QApplication.proces ...

  4. 使用 joblib 对 Pandas 数据进行并行处理

    使用 joblib 对 Pandas 数据进行并行处理 如果需要对一个很大的数据集进行操作,而基于一列数据生成新的一列数据可能都需要耗费很长时间. 于是可以使用 joblib 进行并行处理. 假设我们 ...

  5. spring-boot集成4:集成mybatis,druid和tk.mybatis

    Why mybatis? mybatis提供了ORM功能,相比于其他ORM框架,其需要编写更多的sql,也给了我们编写特殊/复杂sql和进行sql优化的机会. Why druid? Druid是阿里巴 ...

  6. Cocos2d-x入门之旅

    Cocos通过动作(Action)让精灵动起来,把数个动作组成序列(Sequence)就能让精灵做出连续的动作,在动作中我们可以改变精灵的位置,旋转角度,缩放比例,等等 动作(Action)# 首先我 ...

  7. Docker在windows环境下的安装部署

    一.准备 系统环境:Windows 10 64bit Docker安装包:Docker for Windows Installer.exe 二.安装步骤 1.开启系统的hyper-v 2. 重启电脑后 ...

  8. 怎么在 localhost 下访问多个 Laravel 项目,通过一个IP访问多个项目(不仅仅是改变端口哦)

    server { listen 80; server_name blog.sweetsunnyflower.com; index index.html index.htm index.php; cha ...

  9. JavaScript Cookie常用设置

    cookie是一种早期的客户端存储机制,起初是针对服务器端脚本设计使用的,只适合存储少量文本数据.从最底层来看,作为HTTP协议的一种扩展实现它.cookie数据会自动在Web浏览器和Web服务器之间 ...

  10. Unity中的动画系统和Timeline(2) 按钮动画和2D精灵动画

    按钮动画 1 创建按钮后,按钮的Button组件中,Transition我们平时用的时Tint,这次选择Animation 选择Auto Generate Animation,创建一个按钮动画 2 后 ...