当前位置: 首页 > Web前端 > vue.js

js数组实现了深拷贝,但是修改其中一个数组的值会改变其他数组的值吗?

时间:2023-03-31 14:28:37 vue.js

js变量分为值类型和引用类型,数组是引用类型。值类型vara=100;varb=a;a=200;console.log(b);//100**值类型的特点:每个变量可以存储自己的值,不会互相影响**引用类型vara={age:20};varb=a;b.age=21;console.log(a.age);//21**引用类型的特点:不同变量之间的值会相互作用相互影响**`值类型和引用类型的特性:从内存的角度来看,值类型是将每个值存储在变量内存的位置,比如a保存100,将b赋值给a,而b的位置保存了数字100,a的位置由100变为200,b的位置等于100,还是100,所以他们不会互相影响。引用类型不同。引用类型就是把a赋值给一个对象。这个对象存在于另一个地方。a的内存位置由指针指向。当b赋值给a时,其实定义了一个b,b的指针指向那个对象所在的位置,所以这个age=20的对象只有一份,a和b同时指向这个对象,所以在执行到第三行b.age=21的时候,age的值已经变成了21,所以a也指向了这个对象,所以a.age也是21。为什么引用类型要这样做而不是直接复制和存储副本?引用类型可以无限扩展属性。例如,现在它有一个年龄属性。我们还可以添加名称属性、等级属性和许多其他属性。添加更多属性后,会出现内存占用问题。在值类型中,a=100,把b赋值给a,相当于把100复制一份,再保存一次。没关系,因为100不会占用很多内存。如果这个地方把a赋给一个对象,但是又很大,把b赋给a,把b也复制过来,会占用很大的空间,不合理,所以为了共享内存空间,将出现引用类型的方式。深拷贝letarr=[{name:'111',title:'111',children:[{name:'111-1',title:'111-1'},{name:'111-2',title:'111-2'}]}]letnewArr=arr.slice(0)for(letiofnewArr){vararr2=i.children.filter((item2)=>{returnitem2.name==='111-1'})i.children=arr2}console.log('arr',arr)console.log('newArr',newArr)根据上面的打印我们可以看到arr的值还是改变了深拷贝,这个有时候我们可以使用JSON.parse和JSON.stringify来实现。让arr=[{name:'111',title:'111',children:[{name:'111-1',title:'111-1'},{name:'111-2',title:'111-2'}]}]letnewArr=JSON.parse(JSON.stringify(arr))for(letiofnewArr){vararr2=i.children.filter((item2)=>{returnitem2.name==='111-1'})i.children=arr2}console.log('arr',arr)console.log('newArr',newArr)这样arr就不会受到影响。