踩坑系列 — for…of 、forEach、map 遍历数组不能改变元素

前言

for 、 for…in 、for…of、forEach、map 五种循环方式看起来只是写法不同，实则本质上还是有区别的，比如我之前遇到的 BUG：

踩坑

var arr1 = [5,5,5]
var arr2 = [5,5,5]
var arr3 = [5,5,5]
var arr4 = [5,5,5]
var arr5 = [5,5,5]
for(let i = 0 ; i < arr1.length ; i++){
    arr1[i] = 4
}
for(let index in arr2){
    arr2[index] = 4
}
for(let item of arr3){
    item = 4
}
arr4.forEach(item =>{
    item = 4
})
arr5.map(item =>{
    item = 4
})
console.log(arr1) // [4,4,4]
console.log(arr2) // [4,4,4]
console.log(arr3) // [5,5,5]
console.log(arr4) // [5,5,5]
console.log(arr5) // [5,5,5]
复制代码

很明显可以看出：for…of、forEach、map 循环都不能修改数组的元素，换句话说，for...of、forEach、map 循环不会修改原数组

剖析

for(let item of arr3){
    item = 4
}
复制代码

本质上相当于：

for(let i = 0 , item ; i < arr3.length ; i++){
    item = arr3[i]
    item = 4
}
复制代码

item 实际上是对数组元素临时拷贝一份出来进行操作的，所以这一点要相当注意，不要想当然地以为这样就能改变数组元素，forEach、map 两种循环方式也是一个道理

解决

• 如果要改变原数组的元素记得采用 for、for…in 两种循环方式
• 如果只是为了获取原数组元素进行处理，并保证原数组的元素不会被改变的话，采用 for…of、forEach、map 三种循环方式