深拷贝和浅拷贝

JS有两种数据类型

  • 基本数据类型 string/number/boolean/undefined/null/symbol(ES6)
  • 引用数据类型 object/array/function

基本数据类型储存在栈内存中,保存与复制都是数据本身
深拷贝和浅拷贝_第1张图片

引用数据类型储存在堆内存中,保存与复制都是指向对象的指针
深拷贝和浅拷贝_第2张图片

浅拷贝

对于基本数据类型来说,拷贝一份互不影响;而对于数组和对象来说,只会拷贝数组或者对象的引用,对新旧数组进行修改,两个数组都会发生变化。

基础的数组方法能够实现浅拷贝,例如concat()、slice();对象能够使用Object.assign()实现浅拷贝。

如果是嵌套数组和对象,上述方法不可行
let arr = [1, 2, 3, 4], arr1 = [1, 2, 3, [4, 5, 6]]

let copyarr = arr.slice(), copyarr1 = arr1.slice()

arr[1] = 5    //arr[1, 5, 3, 4], copyarr[1, 2, 3, 4]  

arr1[3][1] = 7   //arr1[1, 2, 3, [4, 7, 6]], copyarr1[1, 2, 3, [4, 7, 6]]

let obj = { a: 1, b: 2, c: 3 }, obj1 = { a: 1, b: 2, c: { d: 3, e: 4 } }

let copyobj = Object.assign({}, obj), copyobj1 = Object.assign({}, obj1)

obj.b = 4   //obj{ a: 1, b: 4, c: 3 }, copyobj{ a: 1, b: 2, c: 3 }

obj1.c.d = 6    //obj1{ a: 1, b: 2, c: { d: 6, e: 4 } }, copyobj1{ a: 1, b: 2, c: { d: 6, e: 4 } }
深拷贝

指完全的拷贝一个对象,即使嵌套了对象,两者也相互分离,修改一个对象的属性,也不会影响另一个。

  1. 可以使用JSON的两个函数方法实现深拷贝
let arr = ['old', 1, true, ['old1', 'old2'], {old: 1}]

let new_arr = JSON.parse( JSON.stringify(arr) );

arr[3][1] = 'old4'    //new_arr['old', 1, true, ['old1', 'old2'], {old: 1}]

但是缺点就是不能拷贝函数和undefined

  1. 深拷贝函数
function deepClone(obj) {
  function isObject(obj) {   //判断是不是对象
    return typeof obj !== null && typeof obj === 'object' || typeof obj === 'function'
  }

  if (!isObject(obj)) {
    return;
  }

  let newObj = Array.isArray(obj) ? [] : {}    //判断对象类型

  Object.keys(obj).forEach(key => {
    newObj[key] = isObject(obj[key]) ? deepClone(obj[key]) : obj[key]   //判断当前值是不是对象
  })

  return newObj
}

以上就是深浅拷贝的知识。?

你可能感兴趣的:(JavaScript)