解决vue改变一个数组另一个数组也会改变的问题(数组或者对象的引用问题)

今天写vue的时候遇到这样的问题，由于没有和后端交互，但是要实现数组搜索的功能，并展示到页面中，而且页面中只显示搜索到的数据，没有搜索到的数据就不显示，我想了好久都没有想到vue有什么方法可以做这件事。然后我就想到，可以先把页面渲染的数组备份一份，搜索备份的数组，然后把原来的数组数据全部删掉，再把搜索到的备份数据push进页面的数组，这样就完成了。但是这个时候又有问题出现了，就是js中存储数组，对象这些复杂数据类型的时候都是存储的内存地址而不是数据，所以我直接赋值的话两个数组还是用的同一条数据，这样两个数组就会同时改变。所以说要解决这个问题就不能让他们的数据存在同一个内存地址中，下面是我想到的几种解决问题的方案：

1、...扩展运算符

扩展运算符会把数组（对象）的每一项数据拿出来，然后把这些拿出来的数据拿出来再赋值给备份数组就行了。

let arr1 = [1,2,3,4,5];
let arr2 = [];

arr2 = [...arr1];//这里的arr1就相当于1,2,3,4,5

//对象也是一样
let obj1 = {
    name: "张三",
    age: 18
};
let obj2 = {};

obj2 = {...obj1};

2、for和forEach等数组遍历

let arr1 = [1,2,3,4,5];
let arr2 = [];

for(let i=0;i

这两种方法都是把数组的每一项都拿出来，然后分别存储到另一个数组，这个时候存储的就不是同一个内存地址。