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)当然,如果在遍历过程中没有操作到子元素,那肯定是不会改变的
*/