啥子是迭代?可以简单地理解为按顺序访问目标(数组、对象等)中的每一项(其实和遍历概念没什么差别)

数组的迭代被我分为两种:

  • 查找
  • 遍历

查找:

  1.indexOf(item,start) 

    该方法搜索指定元素值位置,并返回下标。

    参数:item是要查找的值,start是指你要从哪里开始找(该参数可选)。ps:start是可以取负值的,举个栗子indexOf(x,-5)表示从倒数第6个开始(因为倒数第一个是0嘛),一直找到正序的第0个

    如果多次出现,则返回第一次出现的下标(其实找到了就不会接着往后找了);如果没出现,返回-1。

    var fruits = ["Apple", "Orange", "Apple", "Mango"];
    var a = fruits.indexOf("Apple");
    console.log(a);//0

  

  2.lastIndexOf(item,start)  与上面方法用法一样,不同的地方是,他是逆行,是从结尾开始找的。start也能指定负值,如果start取-5,则表明从下标为5的地方开始,一直往前找。

    var fruits = ["Apple", "Orange", "Apple", "Mango"];
    var a = fruits.lastIndexOf("Apple");
    console.log(a);//2

  3.find()  方法返回通过测试函数的第一个数组元素的值。

  参数:(项目值,项目索引,数组本身)

var numbers = [4, 9, 16, 25, 29];
var first = numbers.find(myFunction); function myFunction(value, index, array) {
return value > 18;
}

  

  4.findIndex()  方法返回通过测试函数的第一个数组元素的索引。

  参数:(项目值,项目索引,数组本身)

var numbers = [4, 9, 16, 25, 29];
var first = numbers.findIndex(myFunction); function myFunction(value, index, array) {
return value > 18;
}

上面的几个方法没什么好讲的,接下来才是重点。

遍历:这类方法有7个

  1.some()

  2.every()

    两者的函数都接受三个值(项目值,项目索引,数组本身)

    这两个方法都是依次对数组的每项进行判断,返回boolean类型的值。不同的是,some是只要有一项满足条件就返回true,而every要求所有项都满足条件才会返回true。

    举个栗子: 

  var a=[1,2,3,4,5,4,3,2,1];
  var everyResult=a.every(function(item,index,a){
  return (item>2);
  });
  var someResult=a.some(function(item,index,a){
  return (item>2);
  });
  alert("everyResult:"+everyResult);//false
  alert("someResult:"+someResult);//true

当然,也可以也成箭头函数的形式:

a.some((item)=>{return item>2})

  这两个方法只做判断,都不会对数组进行改变。

  3.forEach()

  4.filter()

  5.map()

  为什么这三个一起讲,因为他们像,与前面some,every一起常作为面试题考。

  三者的函数都接受三个值(项目值,项目索引,数组本身)

  forEach:其就和for循环异曲同工,循环遍历,对每项进行操作。

  map:和forEach非常相似,其返回的是 每次函数调用后的结果所组成的数组

  filter:与上面两者相似,但是其返回的是 函数调用结果值为true的项 (将调用的函数理解成表达式,即返回符合这个表达式所有项组成的新数组)

  区别:

    map和foreach其实用法上没啥子区别,但是!还是有点差别的,foreach是没有返回值的

    然后,filter顾名思义,过滤器,是过滤掉数组不符合条件的项。所以用途上,filter会有很大的不同,常用于筛选掉不要的数组项。

    我还是举栗子吧:

  var a=[1,2,3,4,5,4,3,2,1];
  var filterResult=a.filter(function(item,index,a){
return (item>2);
});
var mapResult=a.map(function(item,index,a){
return item*2;
});
  var foreachResult=a.forEach(function(item,index,a){
  if(item<5) a[index]=0;
  });
  alert("filterResult:"+filterResult);  //3,4,5,4,3
  alert("mapResult:"+mapResult);     //2,4,6,8,10,8,6,4,2
  alert("foreachResult:"+foreachResult); //underfined
  alert("foreachResult:"+a);        //0,0,0,0,5,0,0,0,0

  6.reduce()  

  7.reduceRight()

  参数: 

    • 总数(初始值/先前返回的值)
    • 项目值
    • 项目索引
    • 数组本身

  这次我直接举栗子:

var a=[1,2,3,4,5,4,3,2,1];

var sum=a.reduce(function (prev,cur,index,array){
  return prev+cur;
})
alert("sum:"+sum);

  上诉用法是最常用的用法,用于对数组所有项进行求和。事实上求积也是可以的,这个方法的灵魂就是有了这个prev值,具体看你如何以应用(不过事实上用的不多,在外部var一个sum变量也可以做到)

  ps:reduce()和reduceRight()对于空数组是不会执行回调函数的。

  补充一点,注意:forEach,filter,every,some会跳过空位,map会跳过空位,但是会保留这个值。

  个人愚见,不喜憋着。

JS中的迭代(数组)的更多相关文章

  1. js中对arry数组的各种操作小结

    最近工作比较轻松,于是就花时间从头到尾的对js进行了详细的学习和复习,在看书的过程中,发现自己平时在做项目的过程中有很多地方想得不过全面,写的不够合理,所以说啊,为了在以后的工作中写出最优化的代码,我 ...

  2. js中的伪数组

    一, 伪数组 1. 具有length属性 2. 按索引方式存储数据 3. 不具有数组的方法, 比如push(),pop()等 二, 生成伪数组的方法 在js中生成伪数组的方法比较多 1. functi ...

  3. js中字符串与数组的相互转换

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  4. js中对arry数组的各种操作小结 瀑布流AJAX无刷新加载数据列表--当页面滚动到Id时再继续加载数据 web前端url传递值 js加密解密 HTML中让表单input等文本框为只读不可编辑的方法 js监听用户的键盘敲击事件,兼容各大主流浏览器 HTML特殊字符

    js中对arry数组的各种操作小结   最近工作比较轻松,于是就花时间从头到尾的对js进行了详细的学习和复习,在看书的过程中,发现自己平时在做项目的过程中有很多地方想得不过全面,写的不够合理,所以说啊 ...

  5. js课程 3-10 js中字符串函数数组函数和其它语言中对应函数的区别和联系是什么

    js课程 3-10  js中字符串函数数组函数和其它语言中对应函数的区别和联系是什么 一.总结 一句话总结:js中是对象点方法的形式,这些方法都是对象的方法,而在php.java中却不是这样. 1.j ...

  6. JS中map list 数组的迭代

    后台传给前台一个map 前台如何迭代呢 $.post("getSys.jhtml", function(data){ var temp = ""; $.each ...

  7. [undefined,1] 和 [,1]的区别在哪里--认识js中的稀疏数组

    事情是这样的 今天我想写一个能快速生成一个自然数数组的函数,就是[0,1,2,3]这样的,然后我写了下面的代码: new Array(10).map((item, index) => { ret ...

  8. Js中的字符串/数组中常用的操作

    JS为每种数据类型都内置很多方法,真的不好记忆,而且有些还容易记混,现整理如下,以便以后查看: 一.String ①charAt()方法用于返回指定索引处的字符.返回的字符是长度为 1 的字符串. 语 ...

  9. js中 map 遍历数组

    map 方法会迭代数组中的每一个元素,并根据回调函数来处理每一个元素,最后返回一个新数组.注意,这个方法不会改变原始数组. 在我们的例子中,回调函数只有一个参数,即数组中元素的值 (val 参数) , ...

  10. js中关于一个数组中最大、最小值以及它们的下标的输出的一种解决办法

    今天在学习js中的数组时,遇到的输出一个数组中最大.最小值以及它们的下表,以下是自己的解决方法! <script type="text/javascript"> var ...

随机推荐

  1. redux 介绍及配合 react开发

    前言 本文是 Redux 及 Redux 配合 React 开发的教程,主要翻译自 Leveling Up with React: Redux,并参考了 Redux 的文档及一些博文,相对译文原文内容 ...

  2. 一、bootstrap-datepicker

    一.bootstrap-datepicker <!DOCTYPE html> <html> <head> <title></title> & ...

  3. Mac利用分屏spliter

    有时候一台电脑学习很鸡肋,特别是在照葫芦画瓢阶段,只能来回的切换页面,效率极其低下,一直希望可以将其分别显示,互不干扰.今天在mac发现此方法,大大提高了学习效率,所以今天分享给大家: 方法一:长按窗 ...

  4. 带你逐行阅读redux源码

    带你逐行阅读redux源码 redux版本:2019-7-17最新版:v4.0.4 git 地址:https://github.com/reduxjs/redux/tree/v4.0.4 redux目 ...

  5. php操作redis常用方法代码示例

     redis 的连接 描述:实例连接到一个Redis. 参数:host: string,port: int 返回值:BOOL 成功返回:TRUE;失败返回:FALSE $redis = new Red ...

  6. java模式-----单例模式

    什么是单例设计模式? 单例模式,是一种常用的软件设计模式.在它的核心结构中只包含一个被称为单例的特殊类.通过单例模式可以保证系统中,应用该模式的类一个类只有一个实例.即一个类只有一个对象实例. 类结构 ...

  7. Hands Off for Mac如何卸载?完全卸载Hands Off的方法

    Hands Off for Mac如何卸载?hands off是一款超好用的防火墙软件,在Mac系统上强大且易用,能够控制所有应用的网络连接和文件系统访问,保护我们的隐私数据和系统安全性,如果不需要了 ...

  8. php floor()函数 语法

    php floor()函数 语法 floor函数是什么意思? php floor()函数用来向下舍入为最接近的整数.语法是floor(number),表示返回不大于参数number的下一个整数,有小数 ...

  9. MDK(keil)4.7中文注释乱码解决

    由于编码使用不统一导致别的开发环境下的文件在MDK(keil)下打开中文显示乱码,解决这一问题需要进行码制转换, 可以先将欲打开的文件转换成UTF-8格式(如在notepad中进行转换),也可以在打开 ...

  10. BZOJ 4421: [Cerc2015] Digit Division(思路)

    传送门 解题思路 差点写树套树...可以发现如果几个数都能被\(m\)整除,那么这几个数拼起来也能被\(m\)整除.同理,如果一个数不能被\(m\)整除,那么它无论如何拆,都无法拆成若干个可以被\(m ...