赋值后数组同步变更求助：修改filter数组为何影响Selected数组？

嘿，这个问题我做项目时也踩过一模一样的坑！核心原因其实很简单：JavaScript中的数组和对象都属于引用类型，和数字、字符串这类值类型的赋值逻辑完全不一样。

当你执行this.awesombarservice.filter = this.awesombarservice.Selected这行代码时，并没有把Selected数组的内容复制一份给filter，而是让filter变量和Selected指向了内存里的同一个数组对象。打个比方，就像两个人共用一把钥匙开同一扇门，不管谁开门修改门里的东西，另一个人看到的都是同一个结果。

给你看个直观的小例子：

let selected = [{id:1, value:"20180101"},{id:1, value:"20180103"}];
let filter = selected;
filter.push({id:1, value:"20180105"});
console.log(selected); // 会输出 [{id:1, value:"20180101"},{id:1, value:"20180103"},{id:1, value:"20180105"}]

解决办法 #

要让两者互不影响，你需要创建一个原数组的副本，让filter指向这个新的数组对象。常用的几种方式：

1. 扩展运算符（推荐，语法简洁）

this.awesombarservice.filter = [...this.awesombarservice.Selected];

2. Array.from()方法

this.awesombarservice.filter = Array.from(this.awesombarservice.Selected);

3. slice()方法

this.awesombarservice.filter = this.awesombarservice.Selected.slice();

⚠️ 注意：上面的方法都是浅拷贝——如果数组里的元素是对象（比如你的例子），拷贝后的数组里的对象仍然和原数组的对象指向同一个内存地址。如果之后你需要修改filter里对象的属性（比如filter[0].value = "20240101"），原数组Selected里的对应对象也会跟着变。

如果需要彻底隔绝，就要用深拷贝，最常用的简单方法是：

this.awesombarservice.filter = JSON.parse(JSON.stringify(this.awesombarservice.Selected));

不过这个方法有局限性，比如无法处理函数、undefined、循环引用这些情况，但对于你例子里的普通对象数组完全够用。

内容的提问来源于stack exchange，提问作者Udit Gogoi