数组的深拷贝和浅拷贝

502 阅读1分钟

浅拷贝

如果数组中没有引用类型,那么我们可以直接使用浅拷贝的方法。

比如

var source_array = [1,2,3,'four',5,'six',7,'eight'];
var copy_arr = []; 

下面的方法都是浅拷贝方法:

  • 方法一、for循环
for (let i = 0; i < source_array.length; i++) {
  const element = source_array[i];
  copy_arr.push(element)
}

console.log(copy_arr)
  • 方法二、concat
var copy_arr1 = []
copy_arr1 = source_array.concat()
console.log(copy_arr1)
  • 方法三、slice方法
var copy_arr2 = []
copy_arr2 = source_array.slice(0)
console.log(copy_arr2)
  • 方法四、...拓展运算符
var copy_arr3 = [];
[...copy_arr3] = source_array
console.log(copy_arr3)
  • 方法五、Array.from
var copy_arr4 = []
copy_arr4 = Array.from(source_array)
console.log(copy_arr4)
  • 方法六、Array.of
var copy_arr5 = []
copy_arr5 = Array.of(...source_array)
console.log(copy_arr5)
  • 方法七、Object.assign
var copy_arr6 = [];
copy_arr6 = Object.assign([],source_array,[]);
console.log(copy_arr6)

我们可以随意改变原始的值然后看下新的值有没有改变

console.log(copy_arr)
console.log(copy_arr1)
console.log(copy_arr2)
console.log(copy_arr3)
console.log(copy_arr4)
console.log(copy_arr5)
console.log(copy_arr6)

如果原始的值包含一个引用类型比如

如果数组里边包含引用类型

比如:

var source_array = [{key: 12},2,3,4,5,6,7,8];

我们使用简单的浅拷贝就不行了,如果改变新的数组的值,依然会影响到原来的数组

 source_array[0].key = 9

此时此刻我们使用上边的浅拷贝方法,发现新的值也被改了。这个就是我们使用浅拷贝的缺点。

深拷贝

深拷贝:即便数组内部包含了对象、数组或者函数等引用类的类型也可以拷贝

  • 方法一、下面是我们写的一个函数
let cloneObj = function(obj){
  let str, newobj = obj.constructor === Array ? [] : {};
  if(typeof obj !== 'object'){
      return;
  } else if(JSON || window.JSON){
      str = JSON.stringify(obj), //系列化对象
      newobj = JSON.parse(str); //还原
  } else {
      for(var i in obj){
          newobj[i] = typeof obj[i] === 'object' ? 
          cloneObj(obj[i]) : obj[i]; 
      }
  }
  return newobj;
};

let oldArr = [{value0: {value1: 12}},{key0: {key1: {key2: 'ceshi'}}}];
let newArr = cloneObj(oldArr);

console.log(newArr)
newArr = [{value0: {value1: 45}},{key0: {key1: 'gaibian'}}];
console.log(oldArr)
console.log(newArr)
  • 方法二、
let oldArr1 = [{value0: {value1: 12}},{key0: {key1: {key2: 'ceshi'}}}];
let newArr1 = JSON.parse(JSON.stringify(oldArr1))
console.log(newArr1)
newArr1 = [{value0: {value1: 45}},{key0: {key1: 'gaibian'}}];
console.log(oldArr1)
console.log(newArr1)