js的部分遍历方法及使用场景

238 阅读2分钟

1.array.forEach(function(currentValue, index, arr))

说明:这个很简单,也最常用 它就只是一个遍历 按顺序为数组中的每个元素调用一次函数

 函数参数包含三个值 当前值,索引 数组本身;该方法没有返回值,没什么好说的

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

2.array.map(function(currentValue, index, arr))

 说明:map() 方法创建一个新数组,其结果是该数组中的每个元素都调用一个提供的函数后返回的结果;

 注意这段话“每个元素都调用一个提供的函数” 就是说,它生成一个新数组,但这个新数组并不是原数组遍历完成再生成的

 而是当一个元素执行函数后,就生成了一个新值,放入新数组中。下面我们看个例子:

 var arr = [1,2,3,4]
 var newarr = arr.map(item=>{  
    if(item>2){ 
       return item*2  
     } }) 
console.log(newarr)//[ undefined, undefined, 6, 8 ]

当前面两个值不符合判断条件 map不知道要干嘛 怎么去处理。 所以当1和2执行函数的时候,自然就返回undefined。

但是当大于2时,元素就会自身×2,然后返回6,8。那我们遇到这种问题,该怎么处理呢?

 var arr = [1,2,3,4]
 var newarr = arr.map(item=>{
     if(item>2){ 
        return item*2    
 }    
 return item
 })
 console.log(newarr)//[ 1, 2, 6, 8 ]

 这样就可以了。

 结论:map适用于当你想处理列表中的指定元素,而其他元素却需要保持不变的情况。

3.array.filter(function(currentValue,index,arr), thisValue)

说明:filter负责创建一个新数组,新数组里面的元素是原数组中通过函数调用符合条件的值,只对原始数组进行筛选,例子如下:

var arr = [1,2,3,4]
var newarr = arr.filter(item=>{
    item+=1
   if(item>3){
      return item 
  }  })console.log(newarr)//[3,4]

虽然执行了item+=1;想象中数组会变成[2,3,4,5],然后输出[4,5];这是不对的;实际上执行item+=1之后,在原数组中符合条件

 的是[3,4],所以输出[3,4]也就不以为然了。

 4.array.find(function(currentValue, index, arr),thisValue)

说明:find() 方法返回通过测试(函数内判断)的数组的第一个元素的值;当数组中的元素在测试条件时返回 true 时, find() 返回符合条件的元素,之后的值不会再调用执行函数。

// 如果没有符合条件的元素返回 undefined;find没什么好说的。

5.arr.includes(searchElement)

说明:includes() 方法用来判断一个数组是否包含一个指定的值,如果是返回 true,否则false。