【js学习之路】遍历数组api之 `filter `和 `map`的区别

👉一、前言

数组是我们在项目中经常使用的数据类型，今天我们主要简述作用于遍历数组的api，filter和map的区别。

👉 二、filter和map的共同点

首先，我们主要阐述一下 filter 和 map 的共同点

• api的参数都是回调函数callback
  • map : arr.map(()=>{})
  • filter : arr.filter(()=>{})
• 回调函数的参数都相同，item代表 数组内的每一个元素，index代表每一个元素的下标
  • map : arr.map((item,index)=>{})
  • filter : arr.filter((item,index)=>{})
• 回调函数中都要写 return
  • map : arr.map((item,index)=>{ return xxx})
  • filter : arr.map((item,index)=>{ return xxx})
• map和filter 都会遍历整个数组

👉三、filter和map的不同点

下面，我们来简要阐述一下filter和map的区别

• 返回值不同

  • map 返回的是整个数组，通常被用来计算数组中每个元素的值
  • filter 返回的是数组中满足以return作为条件的元素。

• 代码展示

  // map作筛选  无意义 × 
  var a = [1,2,3,4,5];
  var b = 1;
  var c = a.map(item=>{return item === b});
  console.log(c)  [true, false, false, false, false
  
  // filter 作筛选   √
  var a = [1,2,3,4,5];
  var b = 1;
  var c = a.filter(item=>{return item === b});
  console.log(c) [1]
  
  // map 作计算   √
  var a = [1,2,3,4,5];
  var b = 1;
  var c = a.map(item=>{return item +1}); 
  console.log(c)  // [2, 3, 4, 5, 6]
  
  // filter 作元素的计算  无意义 ×
  var a = [1,2,3,4,5];
  var b = 1;
  var c = a.filter(item=>{return item +1}); 
  console.log(c)  //  [1, 2, 3, 4, 5]