vue var that=this；的一点小问题

先复原一下场景，很简单的一个从图库里选图片。

//这里是给两个集合初始化值。

img

//这里是method，我只给标红的一个集合赋了我上传的图片的路径

img

//下面是输出结果

img

最上面两行的undefined我大概了解了，但是下面两行输出为什么，我只给了一个赋值，而两个都有？？

这里涉及到的知识点是JS中引用数据类型的存放方式，数组、对象等都是引用数据类型，他们的实际值是存放在内存中的堆区。所以我们在代码中定义一个数组或者一个对象时，这个变量只是保存了指向真实地址的地址，也就是说这个变量是对于真实值的一个引用。结合下面代码来讲。第一行定义了一个数组[1,2,3]，这个数组就会存放在内存当中的一个位置，并且arr这个变量中保存了这个位置，第二行把arr的值赋值给变量a,其实是把数组[1,2,3]的地址给了a， 第三行把a赋值给变量b，那么b也保存了数组[1,2,3]的地址，即a, b, arr保存的值都是一样的，都是指向[1,2,3,]的地址，所以对其中一个变量进行操作就同时对他们都操作了。

let arr = [1, 2, 3];
let a = arr；
let b = a; 
console.log(a); // [1,2,3]
console.log(b); // [1,2,3]
console.log(arr); // [1,2,3]
b.push(4);
console.log(a); // [1,2,3,4]
console.log(b); // [1,2,3,4]
console.log(arr); // [1,2,3,4]

你在第一图里面标红的地方，分别把imglist复制给了this.htPiclist和this.arrayImgs， 那么同样的，this.htPiclist/ this.arrImgs和imglist这三个变量都是指向了同一个地址，对其他一个进行操作，就是对所有的进行操作。

如果想要解决这个问题，那么就需要在给this.htPiclist和this.arrayImgs赋值的时候，不要给原始的imglist， 而是给一个复制品，如下代码：

this.htPiclist = [... imglist]; 
this.arrayImgs = [...imglist] ; // 这个[...imglist] 解构是在内存中重新生成了一个新的数组，并把imglist的值拷贝到新数组，然后把新数组的地址给了等号前面的变量。这样this.htPiclist和this.arrayImgs就是指向内存中的不同地址，可以分家了。

因为imglist是个数组，是引用类型的，变量只不过指向它的地址


JSON.parse(JSON.stringify(imglist))

这么赋值

  1. sucess:(res)=>{} 这样写 就可以不用 转换this 了
  2. js里对象 赋值 ，都只是 内存地址 赋值。可能跟这个有关。 如果你想备份一个数据需要 深拷贝（json.stingfly） 。直接赋值是浅拷贝

img


这是imglist输出

  • 这篇博客: Vue语法，看这一篇就够了中的 2. 闭包解决var没有作用域引发的问题（函数有自己的作用域） 部分也许能够解决你的问题, 你可以仔细阅读以下内容或跳转源博客中阅读:
    1. 问题（打印出的全是最后一个的值）
    var btns=document.getElementsByTagName('button');
for(var i=0;i<btns.length;i++){
	btns[i].addEventListener('click',function(){
		console.log(i);
	})
}
    1. 解决
    var btns=document.getElementsByTagName('button');
for(var i=0;i<btns.length;i++){
	(function(i){
	btns[i].addEventListener('click',function(){
		console.log(i);
	})
	})(i)
}