js数组直接赋值的问题(js数组的浅拷贝与深拷贝方法)
作者:子夜_秋
JS数组在直接赋值时属于数组的浅拷贝,新数组保存的是原数据的内存地址,修改新数组或原数组其中一个数组,另一个数组也会相应的变化,数组的直接赋值属于数组的浅拷贝,JS存储对象都是存内存地址
1、数组的直接赋值属于数组的浅拷贝,JS存储对象都是存内存地址,所以浅拷贝会导致新数组和旧数组共用同一块内存地址,其中一个数组变化,另一个数组也会相应的变化。
var a =[1,2,3]; var b=a; a[0]=30; console.log(a,b); //结果: [30, 2, 3] [30, 2, 3]
2、数组内部不含有引用类型,使用slice() 、concat() 和 assign() 方法都属于数组的深拷贝,一个数组变化,另一个数组不受影响。
数组的concat方法
var a=[1,2,3]; var b=[].concat(a); a[0]=30; console.log(a,b); //结果:[30, 2, 3] [1, 2, 3]
使用es6的展开操作符: …arr
var a=[1,2,3]; var b=[].concat(a); var c=[...a]; a[0]=30; console.log(a,b,c); //结果:[30, 2, 3] [1, 2, 3] [1, 2, 3]
利用split join map方法
let arr1=[1,2,3]; var newArr4 = arr1.join(" ").split(" ").map(function(i){ return parseInt(i); }); arr1[0]=30; console.log(arr1,newArr4); //VM1175:1 (3) [30, 2, 3] (3) [1, 2, 3]
3、数组内部含有引用类型,使用slice() 、concat() 和 assign() 方法,非引用类型的值属于深拷贝,引入类型的值属于浅拷贝,一个数组变化,另一个也会相应的变化。
4、深拷贝就是指完全的拷贝一个对象,即使嵌套了对象,两者也相互分离,修改一个对象的属性,也不会影响另一个。
1、通过JSON.stringify转化成字符串再通过JSON.parse()解析成原数组。
let arr=[{a:1,b:2},{a:3,b:4}]; let arr1=JSON.parse(JSON.stringify(arr)); arr[0].a=10; console.log(arr,arr1); //输出结果如下 (2) [{…}, {…}] 0: {a: 10, b: 2} 1: {a: 3, b: 4} (2) [{…}, {…}] 0: {a: 1, b: 2} 1: {a: 3, b: 4}
2、利用jQuery的$.extend方法。
let arr=[{a:1,b:2},{a:3,b:4}]; let arr1=$.extend(true,[],arr); arr[0].a=10; console.log(arr,arr1); //输出结果如下 (2) [{…}, {…}] 0: {a: 10, b: 2} 1: {a: 3, b: 4} (2) [{…}, {…}, contains: ƒ, each: ƒ, uniquelize: ƒ] 0: {a: 1, b: 2} 1: {a: 3, b: 4}
更多关于js数组直接赋值的问题和js数组的浅拷贝,深拷贝方法请查看下面的相关文章