JavaScript数组迭代

喊救命的蜘蛛侠
153 阅读5分钟

迭代的概念：来让我们看一下百度是怎么说的

迭代是重复反馈过程的活动，其目的通常是为了逼近所需目标或结果。每一次对过程的重复称为一次“迭代”，而每一次迭代得到的结果会作为下一次迭代的初始值。

重复执行一系列运算步骤，从前面的量依次求出后面的量的过程。此过程的每一次结果，都是由对前一次所得结果施行相同的运算步骤得到的。例如利用迭代法*求某一数学问题的解。

对计算机特定程序中需要反复执行的子程序*(一组指令)，进行一次重复，即重复执行程序中的循环，直到满足某条件为止，亦称为迭代。

JavaScript 数组迭代

数组迭代方法对每个数组项进行操作。

forEach()

官网的说法是为每个数组调用一次函数（回调函数）

我的理解就是一个加了参数的for循环 基本上也是遍历数组 哈哈

该函数接受三个参数：

  • 项目值（当前数组元素）
  • 项目索引 （数组元素下标）
  • 数组本身 （数组）
var txt = null
var numbers = [ 45, 4, 9, 16, 25 ];
var ss = numbers.forEach(myfunction)
function myfunction( value, index, array){
    console.log(value, index, array) // 输出来看一下
  //^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  //这里如果你练习了 你应该可以看到 
  //第一列数字对应得就是当前项目值
  //第二列数字对应得就是当前项目索引值
  //第三列就是我们得数组
  //所以三个参数一一对应 ，参数顺序不可随意改变
    txt = txt + value  //实现累加得效果
}
console.log(txt)  // 99

map()

map() 方法通过每个数组元素执行函数来创建新数组 不会对没有值的得数组元素执行函数，也不会改变原数组

 console.log(value,'numbers2Value') //这里说明一下输出语句后面的'numbers2Value'
 //这个是我随便写的因为输出语句较多这样可以方便我查看具体是哪句输出得

var numbers1 = [ 45, 4, 9, 16, 25 ];
var numbers2 = numbers1.map(myMapFunction)
function myMapFunction(value, index, array){
    console.log(value,'numbers2Value') 
    console.log(index,'numbers2Index')
    console.log(array,'numbersArray')
  //^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ 这里同样输出三个参数观察一下
    return value*2
}
console.log(numbers2,'numbers2') //[ 90, 8, 18, 32, 50 ] numbers2 
//^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
//可以看到原数组中每个数组元素都已经被乘2并且返回到了一个新的数组中

filter()

filter() 方法创建一个包含通过测试得数组元素新数组

//同样也是可以接受三个参数 项目值，项目索引，数组本身
var filterNumber = [ 45, 4, 9, 16, 25 ]
var returnFilterNumber = filterNumber.filter(myFilter)
function myFilter(value,index,array){
    return value>18
}
console.log(returnFilterNumber,'reutnFilterNumber') //[ 45, 25 ] reutnFilterNumber
//通过结果来看以可看出 原数组中只有符合函数内的数组元素才会返回到一个新数组中

reduce()

在每个数组元素上运行函数，以生成（减少他）当个值 不会减少原数组默认是从左到右工作 如果想要从右向左工作使用 reduceRight() 即可

//array.reduce() 传统的累加使用方法
//注意此函数接受的是4个参数 总数:初始值/先前返回的值 (项目值（数组元素）,项目索引（数组元素索引--下标），数组本身)
var reduceNumber = [ 45, 4, 9, 16, 25 ]
var returnReduceNumber = reduceNumber.reduce( myReduce )
// var returnReduceRightNumber = reduceNumber.reduceRight( myReduce )
function myReduce( total, value, index, array  ) {
    console.log(value)
    return total+value  //这里可以实现累加功能哦
}
console.log(returnReduceNumber,'returnReduceNumber')        //99 'returnReduceNumber'
console.log(returnReduceRightNumber,'reduceRightReduceNumber')//99 'reduceRightReduceNumber'

为了加深对reduce()得理解 我有准备一个小示例

其实通过上一个例子我们已经发现 当第一次执行函数得时候出现的是我们数组中第二个元素 此时第一个元素在total中 而在之前案例中实现累加得效果是return total+value（当前元素）也就是说 total得值 其实是每一次执行函数return得值

那么我们换一种想法 如果我想每一次都可以观察到上一个元素该怎么办呢！请看以下操作

var reduceNumber = [ 45, 4, 9, 16, 25 ]
var returnReduceNumber = reduceNumber.reduce( myReduce )
function myReduce( total, value, index, array  ) {
    console.log(total+'------'+value)
    return value  //返回当前函数给total
}
怎么样理解了这个之后是不是对reduce又有了新的认识呢

还有一个需要注意的地方上面都是默认无参得写法所以会value会直接访问元素组中第二个元素 并把第一个元素放在total中，请注意观察接下来有参的写法

var reduceNumber = [ 45, 4, 9, 16, 25 ]
var returnReduceNumber = reduceNumber.reduce( myReduce ,100)
function myReduce( total, value, index, array  ) {
    console.log(total+'------'+value,'index',index)//输出 去观察一下 
    return total+value  //这里可以实现累加功能哦
}
console.log(returnReduceNumber,'returnReduceNumber') //199 returnReduceNumber

every()

every() 方法检查所有数组值是否通过测试 返回的是一个Boolean类型的值

//同样该函数接受三个函数 项目值（数组元素）,项目索引（数组元素索引--下标），数组本身
var everyNumbers = [ 45, 4, 9, 16, 25 ]
var ruturnEveryNumbers = everyNumbers.every(myEvery)
function myEvery(value,index,arrary){
    return value<108 //我们可以更改这个条件来控制输出结果
}
console.log(ruturnEveryNumbers,'ruturnEveryNumbers') //true ruturnEveryNumbers

some ()

some() 方法检查的是某些数组值是否满足通过测试 遇见满足条件则会弹出停止继续向下执行

简单的来说当他遇见第一个满足条件的数组元素就会弹出

//同样该函数接受三个函数 项目值（数组元素）,项目索引（数组元素索引--下标），数组本身
var someNumbers = [ 45, 4, 9, 16, 25 ]
var returnSomeNumbers = someNumbers.some(mySome)
function mySome(value,index,Array){
    return value<18
}
console.log(returnSomeNumbers,'returnSomeNumbers') //true returnSomeNumbers

indexOf()

indexOf() 在方法中搜索元素值并且返回位置

var indexOfNumebers = [ "Apple","Orange","Apple","Mango" ]
var reutrnIndexOfNumbers = indexOfNumebers.indexOf("Apple")
console.log(reutrnIndexOfNumbers,'returnIndexOfNumbers') //0

当然有了从左到右 也肯定需要从右到左😏 那么此时此刻就需要到 indexOf() 的"仇人"lastIndexOf()

var lastIndexOfNumbers = [ "Apple","Orange","Apple","Mango" ]
var returnLastIndexOfNumbers = lastIndexOfNumbers.lastIndexOf("Apple")
console.log(returnLastIndexOfNumbers,"returnLastIndexOfNumbers") //2

find()

find() 通过测试函数返回一个数组元素的值，查找到符合要求的一个则不会继续向下执行了

var findNumbers = [ 45, 4, 9, 16, 25 ]
var returnFindNumber = findNumbers.find(myFind)
function myFind(value,index,arrary){
    return value>18
}
console.log(returnFindNumber,'returnFindNumber') // 45 returnFindNumber

当然我们不可能只满足于获取数组中的元素，那我想要数组中元素的索引（这里也就是指的数组下标）虽然说通过 find() 也可以实现 但是会不会有更简单得方法呢 废话 当然有 (￣、￣) 有请接下来的巨星 findIndex()

来吧 展示！

var findIndexNumbers = [ 45, 4, 9, 16, 25 ]
var returnfindIndexNumber = findIndexNumbers.findIndex(myFindIndexNumber)
function myFindIndexNumber(value,index,array){
    return value>18
}
console.log(returnfindIndexNumber,'returnfindIndexNumber') //0 returnfindIndexNumber

脑图总结

image.png

image.png

image.png 脑图完整链接稍后更新

回忆一下

来去想一想这些方法的参数还有返回值和特性！巩固一下吧

Array.forEach()
Array.map()
Array.filter()
Array.reduce()
Array.reduceRight()
Array.some()
Array.every()
Array.find()
Array.findIndex()
Array.indexOf()
Array.lastIndexOf()

w3chool 数组迭代

avatar
文章
阅读
粉丝