咱们先来看下第一段代码:数组
const arr1 = [ { id: 1, value: 1 }, { id: 2, value: 2 }, { id: 3, value: 3 }, { id: 4, value: 4 }, { id: 5, value: 5 }, ] arr1.forEach((item, index) => { if (item.id === 1) { item.value *= 10 } })
将第一段代码放入浏览器控制台执行完以后,打印数组arr1浏览器
[ 0: {id: 1, value: 10} 1: {id: 2, value: 2} 2: {id: 3, value: 3} 3: {id: 4, value: 4} 4: {id: 5, value: 5} ]
接着咱们来看下第二段代码:函数
const arr2 = [ { id: 1, value: 1 }, { id: 2, value: 2 }, { id: 3, value: 3 }, { id: 4, value: 4 }, { id: 5, value: 5 }, ] arr2.forEach((item, index) => { if (item.id === 1) { item = { id: 6, value: 6 } } })
将第二段代码放入浏览器控制台执行完以后,打印数组arr2:翻译
[ 0: {id: 1, value: 1} 1: {id: 2, value: 2} 2: {id: 3, value: 3} 3: {id: 4, value: 4} 4: {id: 5, value: 5} ]
咱们能够发现arr2中 [id = 1] 的元素并无被替换成咱们指望code
{ id: 6, value: 6 }
固然,最后我会说怎么在forEach遍历过程当中去替换原数组中的元素,如今咱们先来讨论下,为何会出现 [id = 1] 的元素为何没有被替换掉:对象
要想探究缘由,咱们就得将上述数组用照妖镜照一照,看看它的真面目到底是如何内存
js中的数组类型,分为两大类,
一类是值类型 数值、布尔值、null、undefined
一类是引用类型 对象、数组、函数虚拟机
看下面代码,简单说明js字面量建立对象的过程 :it
let obj = { id: 1, name: 2 } # 虚拟机在执行到 { id: 1, name: 2 } 就会在内存中建立一个对象 # 这个对象在内存中的地址假如为 0x1110,再将此地址赋值给变量obj # 此时obj的值实际为0x1110
理解了上述js建立过程,那么咱们来揭开arr2数组的真实面纱io
# 内存地址是16进制数表示,如下地址仅为说明问题 const arr2 = [ 0x1110, 0x1111, 0x1112, 0x1113, 0x1114 ]
看到arr2的真实面目,相信各位小伙伴应该明白了,上面展现的第二段代码为何无效
# 那么咱们就来看看为何下面item没有被替换 arr2.forEach((item, index) => { # 咱们在遍历的过程当中,咱们拿到的item值实际上是 # 0x1110, 0x1111, 0x1112, 0x1113, 0x1114 5个地址 if (item.id === 1) { # { id: 6, value: 6 } 是对象的字面量建立方式,会在内存中 # 建立一个对象,并返回对象地址 假如为 0x1115 item = { id: 6, value: 6 } # 咱们再将 item = { id: 6, value: 6 } 语句翻译一下 # 0x1110 = 0x1115 # 看到问题了吗?将一个16进制数赋值给另一个16进制数 # 其实这段是无效的赋值,也就被浏览器给忽略了,因此咱们在 # 打印出得结果中发现 元素{id: 1, value: 1}并无被 # 替换成{id: 6, value: 6} } })
可能有些初学小伙伴有疑问,既然咱们在遍历的过程当中拿到的是一个内存地址,那么在最开始第一段代码中,为何又能将元素{ id: 1, value: 1 }的value值改变为10呢,那么请给我留言,不在这里展开这个问题。
最后总结,forEach和map遍历中 若是想改原数组,经过下面方式就好了
arr.forEach((item, index) => { if (condition) { arr[index] = something; } })
之因此会聊到这个问题,也是团队小伙伴谈到forEach遍历过程当中不能修改原数组,可是殊不知道为何不能修改,以及真的要修改,又如何去修改。后面想了下,可能也有其余的小伙伴有时也不太清楚,索性写了篇小记,帮助理解。