js遍历find, forEach, filter, map区别

 

find, forEach, filter, map都可以遍历数组

arr.find((e, i) => {
	console.log(e, i)
})
arr.forEach((e, i) => {
	console.log(e, i)
})
arr.filter((e, i) => {
	console.log(e, i)
})
arr.map((e, i) => {
	console.log(e, i)
})

区别:
    1.只有find里达到条件时会中断循环,其它的不管满不满足条件,都不中       断。
   2.如果有return返回值:
    (1) find 会返回符合条件的第一个值,如果都没有符合条件,则返回undefined

let arr = [1,2,3]
let a = arr.find((e, i) => {
	return e < 3
})
let b = arr.find((e, i) => {
	return e > 3
})
console.log(a) // 1 
console.log(b) // undefined

// 中断测试
arr.find((e, i) => {
  console.log(e)
  return e > 1
})
// 控制台打印1,2,因为2 > 1 满足条件,中断循环

(2) forEach,不管有没有return, 返回值都是undefined,一般只做简单的遍历循环用(return 不能打断forEach循环)

let arr = [1,2,3]
let b = arr.forEach((e, i) => {
  return e
})
console.log(b) // undefined

let c = arr.forEach((e, i) => {
  console.log(e)
  return true
})
// 控制台打印 1, 2, 3

(3) filter, 返回值是一个新数组,数组里的元素是原数组的元素,如果条件都不满足,则返回空数组(不写return也会返回空数组)

let arr = [1,2,3]
let b = arr.filter((e, i) => {
  return e > 1
})
let c = arr.filter((e, i) => {
  return e > 4
})
let d = arr.filter((e, i) => {
  return true
})
let e = arr.filter((e, i) => {
  return false
})
let f = arr.filter((e, i) => {
  // 不写return
})
console.log(b) // [2, 3]
console.log(c) // []
console.log(d) // [1, 2, 3]
console.log(e) // []
console.log(f) // []

(4) map,返回新数组,新数组里的元素为return字段后面的值,就是你return 啥,值就是啥(不写return,则返回的数组里面的值都是undefined,如最后一个例子)

let arr = [1,2,3]
    let a = arr.map((e, i) => {
      return e
    })
    let b = arr.map((e, i) => {
      return e * 2
    })
    let c = arr.map((e, i) => {
      return e > 1
    })
    let d = arr.map((e, i) => {
      return e > 4
    })
    let e = arr.map((e, i) => {
      return true
    })
    let f = arr.map((e, i) => {
      return false
    })
    let g = arr.map((e, i) => {
      
    })
    console.log(a) // [1, 2, 3]
    console.log(b) // [2, 4, 6]
    console.log(c) // [false, true, true]
    console.log(d) // [false, false, false]
    console.log(e) // [true, true, true]
    console.log(f) // [false, false, false]
    console.log(g) // [undefined, undefined, undefined]

重点,那么它们会不会改变原数组:

  

var a = [1, 2, 3, 4]
    var b = [{x: 1}, {x: 2}, {x: 3}, {x: 4}]
    var m = [{x: 1}, {x: 2}, {x: 3}, {x: 4}]
    var n = [{x: 2}, {x: 2}, {x: 2}, {x: 2}]
// filter 会不会改变原数组------------------------------------- start
    // (1) filter遍历子元素为 基本类型 的数组
    var c = a.filter(e => {
      e = 6
      return e 
    })
    console.log(c) // [1, 2, 3, 4]
    console.log(a) // [1, 2, 3, 4]

    // (2) filter遍历子元素为 引用类型 的数组
    var d = b.filter(e => {
      e.x = 6
      return e
    })
    console.log(d) // [{x: 6}, {x: 6}, {x: 6}, {x: 6}]
    console.log(b) // [{x: 6}, {x: 6}, {x: 6}, {x: 6}]

  // 结果,fliter遍历的数组,如果操作子元素,子元素如果是基本类型,那么原数组并不改变,如果是引用类型,会改变

// filter 会不会改变原数组------------------------------------- end

// map 会不会改变原数组------------------------------------- start
    // (1) filter遍历子元素为 基本类型 的数组
    var j = a.map(e => {
      e = e +'hello'
      return e
    })
    console.log(j) // ["1hello", "2hello", "3hello", "4hello"]
    console.log(a) // [1, 2, 3, 4]

    var k = m.map(e => {
      e.x = 3
      return e
    })
    console.log(k) // [{x: 3}, {x: 3}, {x: 3}, {x: 3}]
    console.log(m) // [{x: 3}, {x: 3}, {x: 3}, {x: 3}]
    // 结果,map遍历的数组,如果操作子元素,子元素如果是基本类型,那么原数组并不改变,如果是引用类型,会改变
// map 会不会改变原数组------------------------------------- end

// forEach---------------------------------------------------start
  var o = a.forEach(e => {
    e = e* 8
  })
  var p = n.forEach(e => {
    e.x = e.x*8
  })
  console.log(a) // [1, 2, 3, 4]
  console.log(n) // [{x: 16}, {x: 16}, {x: 16}, {x: 16}]
/* 总结,
  (1) 如果在遍历过程中操作子元素,如果子元素是引用类型,那么不管是filter,map,forEach等等,原数组会改变;
  如果是基本类型,操作了元数据也不会发生变化; =》 这是js数据类型指向的知识
  (2)当然,如果在遍历过程中没有操作到子元素,那肯定是不会改变的
  */
落魄前端-小陈
0
0
1
评论
浏览
收藏