map、filter、forEach区别

318 阅读1分钟

1. map使用【map 和 filter参数是相同的】

  // map 用法
  // 参数: item:当前元素(必选);[index:当前元素的索引];[arr:原数组]
  var new_arr=arr.map(function callback(item,index,arr){
      return值组成新数组 
  })
  
  const useMapData = reactive([1, 2, 3, 4, 5])
  const getMapData = useMapData.map((item, index, arr) => {
    return item
  })
  console.log('getMapData', getMapData)
  console.log('useMapData', useMapData) // 不改变原数组;不会对空数组进行检测

2. filter使用

// filter 用法
// 参数: item:当前元素(必选);[index:当前元素的索引];[arr:原数组]
// 过滤操作,筛选符合条件的所有元素,若为true则返回,组成新数组;
  const useFilterData = reactive([3, 4, 5, 6, 7, 8])
  const getFilterData = useFilterData.filter((item, index, arr) => {
    return item % 2 === 0
  })
  console.log('getFilterData', getFilterData) // [4, 6, 8]
  console.log('useFilterData', useFilterData) // 不改变原数组
  
  // 另外,filter可过滤NaN、null、undefined、0
  const arr = [NaN, null, undefined, '0', 0, 1, 2, 3]
  const newArr = arr.filter(item => item)
  console.log(newArr) // ["0", 1, 2, 3]

3. forEach使用

// 不改变新数组,返回值 undefined
  const useForEachData = reactive([5, 4, 3, 2, 1])
  const getForEachData = useForEachData.forEach((item, index, arr) => {
    console.log('item', item)
    return item
  })
  console.log('getForEachData', getForEachData) // undefined