#foreach
对数组的每一项进行操作,不会产生新数组
let arr = [1, 2, 3]
arr.forEach((item, index, value) => {
console.log(item) // 每一项的值1,2,3
console.log(index) // 每一项的下标0,1,2
console.log(value) // 整个数组[1,2,3],[1,2,3],[1,2,3]
})
#map
会产生一个新的数组需要容器来接收,必须带return
let arr = [1, 2, 3]
let arrs = arr.map((item, index, value) => {
console.log(item) // 每一项的值1,2,3
console.log(index) // 每一项的下标0,1,2
console.log(value) // 整个数组[1,2,3],[1,2,3],[1,2,3]
return item * item
})
console.log(arrs) // [1,4,9]
#filter
也会产生一个新的数组需要容器来接收,只不过return满足条件的值
let arr = [1, 2, 3]
let arrs = arr.filter((item, index, value) => {
console.log(item) // 每一项的值1,2,3
console.log(index) // 每一项的下标0,1,2
console.log(value) // 整个数组[1,2,3],[1,2,3],[1,2,3]
return item >= 3 ? false : true // 当条件满足则为true才会把这一项即item返回
})
console.log(arrs) // [1,2]
#小麻烦
map和filter在处理多层结构的数组时,其方式是浅拷贝使用时就不太方便,在vue中
data () {
return {
arr: [
{
id: 1,
menu: [1,2,3]
},
{
id: 2,
menu: [1,2]
},
{
id: 3,
menu: [1,2,3,4]
}
]
}
},
mounted () {
this.test()
},
method: {
test () {
let arrs = this.arr.filter(item => {
console.log(item.id) // 5,2,3并不是1,2,3
return item.id >= 3 ? false : true
})
console.log('before', arrs[0].id) // 5
this.arr[0].id = 5 // 这里改变arr中的值会影响到数组的遍历
console.log(arrs[0].id) // 5,这里符合浅拷贝,但是上面的原因应该是双向绑定造成的,待考究
}
}
解决方式可参考这个最后的多层数组深拷贝部分
https://blog.csdn.net/HockJerry/article/details/113561772