数组的遍历、迭代forEach, map, filter, every, some

293 阅读4分钟

一直被数组的各种遍历搞的晕头转向,老是记不住,想着写一篇文章来加深自己的印象。如有不对请多多指教

forEach

forEach的参数

返回值:foreach没有返回参数或者说返回参数是undefined

forEach 的参数
forEach(参数1,参数2,参数3)
参数1:item 当前正在遍历的元素
参数2:index 当前正在遍历元素的索引值
参数3:Array 当前正在遍历的数组

代码举例

    let arr = [1,2,3]
    arr.forEach((item,index,array) =>{
        console.log('当前正在遍历的元素item:' + item);
        console.log('当前正在遍历的元素的索引值index:' + index);
        console.log('当前正在遍历的数组array:' + array);
        console.log('----------------------------');
    })

打印结果

当前正在遍历的元素item:1
当前正在遍历的元素的索引值index:0
当前正在遍历的数组array:1,2,3
----------------------------
当前正在遍历的元素item:2
当前正在遍历的元素的索引值index:1
当前正在遍历的数组array:1,2,3
----------------------------
当前正在遍历的元素item:3
当前正在遍历的元素的索引值index:2
当前正在遍历的数组array:1,2,3
----------------------------

forEach能否中断执行

结论:不能中断执行,遍历全部数组元素

forEach对原数组的影响

结论:当数组是简单数据类型,forEach不影响原数组
当数组是引用数据类型,对整体进行操作时不影响原数组,对内部的属性操作时可以影响原数组

代码举例

// 当数组是简单数据类型时

let arr = [1,2,3]
    
arr.forEach(item =>{
    item = item*3
})
console.log(arr)       //输出结果:[1,2,3]
    
    
//当数组是引用数据类型时

let arr = [
  {name:'大头儿子',age:12},
  {name:'小头爸爸',age:32}
]

//1.改变整体时
arr.forEach(item => {
    item = {name:'漂亮妈妈',age:26}
})
console.log(arr)       //输出结果:[{name:'大头儿子',age:12},{name:'小头爸爸',age:32}]

//2.改变内部属性时

arr.forEach(item => {
    item.name = '漂亮妈妈'
})
console.log(arr)       //输出结果:[{name:'漂亮妈妈',age:12},{name:'漂亮妈妈',age:32}]

Map

Map的参数

返回参数:map返回的是一个新的数组,数组内的内容是经过map内部函数处理后的返回值
Map(参数1,参数2,参数3)
参数1:item 当前正在遍历的元素
参数2:index 当前正在遍历元素的索引值
参数3:Array 当前正在遍历的数组

代码举例

let arr = [1, 2, 3]
let newarr = arr.map(item => {
    return item * 3
})
console.log(newarr) //输出结果[3,6,9]
console.log(arr) //输出结果[1,2,3]

Map能否中断执行

结论:不能中断执行,遍历全部数组元素

Map对原数组的影响

结论:不影响原数组,返回新数组

every

every的参数

返回参数:布尔值Boolean
当数组中所有的元素都满足every内部的函数条件时,返回结果为true,否则返回false every(参数1,参数2,参数3)
参数1:item 当前正在遍历的元素
参数2:index 当前正在遍历元素的索引值
参数3:Array 当前正在遍历的数组

代码实例

let arr = [1,2,3]

let stateFalse = arr.every(item => item>2)
let stateTrue = arr.every(item => item<4)

console.log(stateFalse)                         //输出结果 false
console.log(stateTrue)                         //输出结果 true

console.log(arr)                               //输出结果 [1,2,3]

every能否中断执行

结论:可以中断执行

every对原数组的影响

结论:不影响原数组

some

some的参数

返回参数:布尔值Boolean
当数组中有一个元素满足some内部函数条件时,返回true,否则返回false some(参数1,参数2,参数3)
参数1:item 当前正在遍历的元素
参数2:index 当前正在遍历元素的索引值
参数3:Array 当前正在遍历的数组

代码实例

let arr = [1,2,3]

let state = arr.some(item => {
  return item>2
})
console.log(arr)                            //输出结果 [1,2,3] 
console.log(state)                         //输出结果 true

some能否中断执行

结论:可以中断执行

some对原数组的影响

结论:不影响原数组

filter

filter的参数

返回值:过滤出满足函数条件的数组作为新数组

filter(参数1,参数2,参数3)
参数1:item 当前正在遍历的元素
参数2:index 当前正在遍历元素的索引值
参数3:Array 当前正在遍历的数组

代码实例

let arr = [1, 2, 3]
let newarr = arr.filter(item => item >= 2)

console.log(newarr);     //输出结果:[2,3]
console.log(arr);        //输出结果:[1,2,3]

filter能否中断执行

结论:不能中断执行

filter对原数组的影响

结论:不影响原数组

总结:

  1. every,some的返回值是布尔值,其他的是数组
  2. every,some 可以中断执行
  3. forEach对数组内的引用数据类型的属性更改时可以改变原数组,其他不可以 4.参数都是一致的,item,index,array。这三个参数只是他们最基本的第一个参数函数内的三个参数。