微信小程序使用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数组的值了。

0 个评论

要回复文章请先登录注册