JS数组遍历方法

126 阅读1分钟

forEach:不会改变原数组,没有返回值

三个参数,遍历值,索引值,数组本身

map:不会改变原数组,有返回值(以数组形式返回)

三个参数,遍历值,索引值,数组本身

实际用法:将一个数组的每个对象的某个元素拿出来遍历,变为数组

EB27929C-D569-4F17-9431-CC9CD82D8B28.png

filter:过滤数组,有返回值,返回值包含符合条件的数组

遍历值

Snipaste_2022-08-05_13-00-41.png

for...of:返回是数组的元素,对象的属性值,不能遍历普通对象

reduce: 接收一个函数,作为累加器

函数有两个参数,一参:计算后返回的值/初始值,二参:当前元素

Snipaste_2022-08-05_13-04-54.png

所有代码如下:

  //  JS数组遍历方法
  var arr = [1, 2, 3, 4, 5, 6];

  console.log('--------1. forEach----------');
  //forEach:不会改变原数组,没有返回值
  //三个参数,遍历值,索引值,数组本身
  let resultFor=arr.forEach((item,index,arr)=>{
    console.log('item:',item);
    console.log('index:',index);
    console.log('arr:',arr);
    return index*2
  })



  console.log('--------2. map----------');
  //map:不会改变原数组,有返回值(以数组形式返回  )
 let resultMap= arr.map((item,index,arr)=>{
    console.log('item:',item);
    console.log('index:',index);
    console.log('arr:',arr);
    return index*2
  })
  console.log('resultFor是',resultFor);
  console.log('resultMap是',resultMap);



  console.log('--------3. filter----------');
    //filter:过滤数组,有返回值,返回值包含符合条件的数组 
      let resultFilter=arr.filter((item)=>{
        console.log(item);
        return item>3
      })
console.log('resultFilter是',resultFilter);




console.log('--------4. for----------');
//for...of:返回是数组的元素,对象的属性值,不能遍历普通对象
for(let value of arr){
    console.log(value);
}



console.log('--------5. reduce----------');
// reduce: 接收一个函数,作为累加器
//函数有两个参数,一参:计算后返回的值/初始值,二参:当前元素

let resultReduce= arr.reduce((pre,item)=>{
    console.log('pre',pre );
    console.log('item',item);
    return pre+item 
},0)
console.log('resultReduce',resultReduce);