js的浅拷贝和深拷贝和应用场景

nemo 发布于2019-08-22 15:17 / 1250人阅读

摘要：而大多数实际项目中，我们想要的结果是两个变量初始值相同互不影响。所以就要使用到拷贝分为深浅两种深浅拷贝的区别浅拷贝只复制一层对象的属性，而深拷贝则递归复制了所有层级。

为什么会用到浅拷贝和深拷贝

首先来看一下如下代码

let a = b = 2
a = 3
console.log(a)
console.log(b)
let c = d = [1,2,3]
let e = f = {a:1,b:2,c:3}
c[0] = 2
e.a = 2
console.log(d[0])
console.log(f.a)

你会发现，同一个Array或者Object赋值给两个不同变量时，变量指向的是同一个内存地址，所以就会造成其中一个变量改变属性值，同时改变了另外一个变量的对应属性值。

而大多数实际项目中，我们想要的结果是两个变量（初始值相同）互不影响。所以就要使用到拷贝（分为深浅两种）

深浅拷贝的区别

浅拷贝只复制一层对象的属性，而深拷贝则递归复制了所有层级。
浅拷贝有效性针对的是单一层级对象 [1,2,3]或者{a:1,b:2}
深拷贝有效性针对的是单层或者多层级对象 [1,2,3]或者{a:1,b:2}或者[1,[1],{a:1}]或者{a:[1],b:{c:2}}

浅拷贝

如何实现

// 数组
let a = [1,2]
let b = a.slice()
// {}
let e = {a:[1],b:{d:1},2}
let f = Object.create(e)
function shallowCopy (obj) {
    if (typeof obj === "object" && obj !== null) {
        if (Array.isArray(obj)) {
            return obj.slice()
        } else {
            let result = {}
            Object.keys(obj).forEach((item,i) = > {
                console.log(i)
                result[item] = obj[item]
            })
            return result
        }
    } else {
        return obj
    }
}

应用场景
对于一层结构的Array和Object想要拷贝一个副本时使用
vue的mixin是浅拷贝的一种复杂型式

深拷贝

如何实现

// 利用JSON（它能正确处理的对象是Number, String, Boolean, Array, 扁平对象）
let g = JSON.parse(JSON.stringify(obj))
// 适用于
function deepCopy (obj) {
  if (typeof obj === "object" && obj !== null) {
    let objKeys = Object.keys(obj)
    let result
    if (Array.isArray(obj)) {
      result = []
    } else {
      if (obj.constructor === Object) {
        result = {}
      } else {
        return obj
      }
    }
    objKeys.forEach((item) => {
      if (typeof obj[item] === "object" && obj[item] !== null) {
        switch (obj[item].constructor) {
          case Array:
            result[item] = deepCopy(obj[item])
            break
          case Object:
            result[item] = deepCopy(obj[item])
            break
          case Date:
            result[item] = new Date(obj[item])
            break
          case RegExp:
            let attributes = ""
            attributes += obj[item].global ? "g" : ""
            attributes += obj[item].ignoreCase ? "g" : ""
            attributes += obj[item].multiline ? "g" : ""
            result[item] =  new RegExp(obj[item].source, attributes);
            break
          default:
            result[item] = obj[item]
            break
        }
      } else {
        result[item] = obj[item]
      }
    })
    return result
  } else {
    return obj
  }
}

应用场景
复制深层次的object数据结构

对深拷贝的应用想法
在实际工作中是不是用继承来实现更好？需要大家来讨论，提意见

GPU云服务器云服务器深拷贝和浅拷贝 js拷贝内存数据库 cdn和应用场景后拷贝预拷贝

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/93332.html

js的浅拷贝和深拷贝和应用场景

摘要：而大多数实际项目中，我们想要的结果是两个变量初始值相同互不影响。所以就要使用到拷贝分为深浅两种深浅拷贝的区别浅拷贝只复制一层对象的属性，而深拷贝则递归复制了所有层级。为什么会用到浅拷贝和深拷贝首先来看一下如下代码 let a = b = 2 a = 3 console.log(a) console.log(b) let c = d = [1,2,3] let e = f = {a:...

MartinDai 2019-08-30 14:08 评论0 收藏0
js的浅拷贝和深拷贝和应用场景

摘要：而大多数实际项目中，我们想要的结果是两个变量初始值相同互不影响。所以就要使用到拷贝分为深浅两种深浅拷贝的区别浅拷贝只复制一层对象的属性，而深拷贝则递归复制了所有层级。为什么会用到浅拷贝和深拷贝首先来看一下如下代码 let a = b = 2 a = 3 console.log(a) console.log(b) let c = d = [1,2,3] let e = f = {a:...

lavor 2019-08-01 18:40 评论0 收藏0
JavaScript中的浅拷贝和深拷贝

摘要：在中可以通过添加一个参数来实现递归，调用就可以实现一个深拷贝。利用序列化实现一个深拷贝在JavaScript中，对于Object和Array这类引用类型值，当从一个变量向另一个变量复制引用类型值时，这个值的副本其实是一个指针，两个变量指向同一个堆对象，改变其中一个变量，另一个也会受到影响。这种拷贝分为两种情况：拷贝引用和拷贝实例，也就是我们说的浅拷贝和深拷贝浅拷贝（shallow...

ernest.wang 2019-08-21 11:34 评论0 收藏0
实现JS中的浅拷贝和深拷贝

摘要：浅拷贝和浅拷贝的问题，不仅在日常应用中需要注意，而且在面试和笔试中也常被用来考察应聘者，属于文体两开花的。基本数据类型引用数据类型等等基本数据类型是按值访问的，对其的拷贝会直接复制其值保存在新变量中。方法手工遍历法方法方法方法方法浅拷贝和浅拷贝的问题，不仅在日常应用中需要注意，而且在面试和笔试中也常被用来考察应聘者，属于文体两开花的points。什么是深拷贝和浅拷贝呢？名称 ...

huangjinnan 2019-08-26 13:38 评论0 收藏0