有个关于forEach 很奇怪的问题,第一次遇到,想请大家帮忙看看,谢谢?

.then(res=>{
                    let data = res.data.data
                    this.fileList1 = data.memorandum_img
                    let price_url = this.price_url
                    this.fileList1.forEach(function(item){
                        item.url = price_url + item.url
                    })
                    console.log(this.fileList1,'this.fileList1111')
                    console.log(res,'res88')
                    
                })

我forEach this.fileList1 这个数组对象,给里面的一个item.url属性拼接了一个url字符串,
console.log(this.fileList1,'this.fileList1111') 这个结果是我想要的,也是拼接后的数据

但是 console.log(res,'res88') 这里也变成了拼接后的数据,正常显示应该是没拼接的数据,当我把

this.fileList1.forEach(function(item){
                        item.url = price_url + item.url
                    })

注释后, console.log(res,'res88') 这时候打印才是没拼接的数据,

难道forEach 循环 改变属性值 ,还会影响res里的数据吗?我第一次遇到,请问这是什么原因?如何解决呢?

阅读 2.4k
4 个回答
  1. 将 forEach 替换为 map 方法,同时使用一个变量去接收 map 方法的结果
  2. 将 res.data.data 深克隆给 data 变量,而不是直接使用 = 去赋值

js中数组,和JSON(键值对)都是引用类型。也就是说,改变其中一个,另一个也会跟着变。就像多个人使用同一张银行卡一样,任意一个人用了钱,卡里的钱都会变少

var a = [1,2,3]
var b = a
b[0] = '张三'

// a 和 b 都会变
console.log("结果", a, b)

如果要解决,就需要深度clone

let data = res.data.data

你这里的

data 和 res.data.data 是一个东西,在内存里是一个地址;

这个是个很基础的问题,我这样举个例子你看下能理解不

const a = { url: 'a.png' }

const b = { url: 'b.png' }

const data = [a, b]

const fileList1 = data;

fileList1.forEach((item, index) => {
    // 关键点,我们这里用第一项来分析,此时 item 即是 a
    item.url = index
    // 那么上面的操作就等价于 a.url = index
})

console.log(a); // { url: 0 }
console.log(b); // { url: 1 }
console.log(data); // [{ url: 0 }, { url: 1 }]
console.log(fileList1); // [{ url: 0 }, { url: 1 }]

顺便可以去了解一下 引用类型 的变量在内存中是如何存储的

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题