JS中的forEach()和map()方法介绍

JS中的forEach()和map()方法介绍

forEach()

forEach 是ES5扩展的语法，可以使用它遍历数组，对象。forEach()方法用于调用数组的每个元素，并将元素传递给回调函数。
注意：forEach()对于空数组是不会执行回调函数的，并且它不会改变原数组

语法：

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

• 参数 ：回调函数function(currentValue,index,arr) 必需，数组中每个元素需要调用的函数。
  函数参数：currentValue(必需)：当前元素，index(可选)：当前元素的索引值， arr(可选)：当前元素所属的数组对象(可以理解为当前遍历的数组对象)。
  thisValue(可选)：传递给函数的值一般用"this"值。如果这个参数为空，"undefined"会传递给"this"值。

简单的例子：

let sum = 0;
let arr = [1,2,3,4];
const myFunction = (item)=>{
    sum += item;
}
arr.forEach(myFunction);
console.log(sum);//10
//我们一般直接将回调函数写到里面
let num1 = 0;
arr.forEach((item,index,arr)=>{
    num1 += item;
})
console.log(num1)//10

但是要注意的是：在forEach中不支持continue、break关键字。

• 我们可以使用return来跳出当次循环，相当于continue。

let arr = [1,2,3,4,5];
arr.forEach((item)=>{
     if(item == 3) return;
     console.log(item);
 });
 // 运行后，我们发现3被跳过了

• 我们可以利用 try catch/every代替 break, 这里统一为遍历到3结束
  • 利用try catch代替break

   try{
        let arr = [1,2,3,4,5];
        arr.forEach((item)=>{
            console.log(item)
            if(item == 3) throw new Error("EndTterative");
  
        })
    }catch(e){
        if(e.message!="EndTterative") throw e;
    }
  

  • 利用every()代替break

   let arr = [1,2,3,4,5];
   arr.every((item)=>{   
        console.log(item);
        return item !== 3;
    })
  

map()

map()方法是ES6的新语法，和forEach类似。它返回一个新数组，数组中的元素为原始数组元素调用函数处理后的值。map()方法按照原始数组元素顺序依次处理元素。
注意：map()不会对空数组进行检测，map()不会改变原始数组

语法：

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

• 参数：回调函数function(currentValue,index,arr) 必需，数组中每个元素需要调用的函数。
  函数参数：currentValue(必需)：当前元素，index(可选)：当前元素的索引值， arr(可选)：当前元素属于的数组对象(可以理解为当前遍历的数组对象)。
  thisValue(可选)：对象作为该执行回调时使用，传递给函数，用作"this"的值。如果省略了thisValue，或者传入null、undefined，那么回调函数的this为全局对象。

简单例子

 //扩大5倍，并返回新数组
 let arr = [1,2,3,4,5]; 
 let newArr = arr.map((item)=>{
      return item * 5; 
  })
  console.log(newArr);//[5,10,15,20,25]

• map()同样不支持break和continue。map()中的return 是将每次迭代遍历时处理后的元素添加到map()返回值中。调用map()的返回值是一个新数组，新数组中的每个元素为每次map()迭代时return的值。