微信小程序使用splice操作会改变原有变量的值解决方法

在用uni-app开发微信小程序时,遇到一个很奇怪的问题。

使用splice操作,即使是通过var、let等赋值新变量数组。在更改新变量时,也仍然会改变原有变量的值。

	data() {
		return {
			players:['A','B','C','D'],
		}
	},
	onLoad:{
		this.change("E")
	},
	methods:{
		change(add_name){
			var new_players = this.players
			new_players.splice(new_players.length,0,add_name)
			console.log('new_players',new_players)//输出['A','B','C','D','E']
			console.log('this.players',this.players)//输出['A','B','C','D','E']
		}
	}

这个是js的基础知识,只是很容易被忽略了。

出现这个问题,其实是因为单个js里对象和数组的传递方式是传址。

在js的赋值中,有引用和复制两种方式,而他们的数据类型是不一样的

引用:对象、数组、函数
复制:数字、布尔

字符串类型有特殊性,无法确定是传递引用还是复制数值

举个简单的例子:

	var a = '1,2,3,4';
	var b = a;  //b赋的是a的复制值
	b = '4,3,2,1'
	console.log(a);  //这里会输出'1,2,3,4',说明b的修改不影响a

再看另一个案例

	var a = [1,2,3,4];
	var b = a;  //username赋的是nickname的复制值
	b[0] = 5
	console.log(a);  //这里会输出[5,2,3,4],说明b的修改会影响a

这就是在JS中,引用和复制,传址和传值的差别。具体的可以百度下了解,这里不展开说了。

那么针对这种情况,在小程序中使用 splice 如何不改变原有变量的值呢?

其实很简单,我们只需要使用concat() 方法,进行这样一个小改动,

	change(add_name){
		var new_players = [].concat(this.players)
		new_players.splice(new_players.length,0,add_name)
		console.log('new_players',new_players)//输出['A','B','C','D','E']
		console.log('this.players',this.players)//输出['A','B','C','D']
	}

concat() 方法是用于连接两个或多个数组,这个方法不会改变现有的数组,仅仅只会返回被连接数组的一个副本。

所以这样去赋值,在小程序里使用splice操作就不会改变原有的this.players数组的值了。

版权声明:
作者:junxiaochen
链接:https://www.junxiaochen.com/14.html
来源:君笑尘博客
文章版权归作者所有,未经允许请勿转载。

THE END
分享
二维码
< <上一篇
下一篇>>