JavaScript的深浅拷贝

zhunjiee 发布于2019-08-22 15:55 / 573人阅读

摘要：什么是深浅概念深拷贝浅拷贝只针对像这样的对象，对于基本类型而言，可以理解为是没有深浅的区别的。和指向了同一块内存深拷贝重新开辟了一个空间，修改对象的属性，彼此不会影响。并不会更改使用递归适用于对象里面有对象

什么是深浅 概念

深拷贝、浅拷贝只针对像Object/Array这样的对象，对于基本类型而言，可以理解为是没有深浅的区别的。

浅拷贝复制的是引用，修改对象的属性，会彼此影响。

just like this

</>复制代码 
let a = {name: "ziv"}
let b = a // a和b指向了同一块内存
b.name = "lucky"
console.log(a.name) // "lucky"
console.log(b.name) // "lucky"

深拷贝重新开辟了一个空间，修改对象的属性，彼此不会影响。

实现浅拷贝 使用内置的方法

</>复制代码 
// Object.assign()
//只能用于浅拷贝对象或者合并对象
let obj = {a:"x", b: {c: "y"}}
let newObj = Object.assign({}, obj)
obj.b.c = "z"
console.log(newObj) // {a:"x", b: {c: "z"}}
// Array.from() 
// ...操作符
// slice()
// concat() 用于数组
let arr = [1,2, [3,4,5]]
let sliceArr = arr.slice()
let concatArr = arr.concat()
let fromArr = Array.from(arr)
let newArr = [...arr]
arr[2][1] = "sixsix"
console.log(sliceArr) // [1,2,[3,"sixsix",5]]
console.log(concatArr) // [1,2,[3,"sixsix",5]]
console.log(fromArr) // [1,2,[3,"sixsix",5]]

使用遍历

</>复制代码 
// 对象浅拷贝
let shallowCopy = function(obj) {
    // 如果不是对象，不执行拷贝
    if (typeof obj !== "object") return 
    // 判断对象是数组还是对象
    let newObj = obj instanceof Array ? [] : {}
    // 遍历obj
    for (let key in obj) {
        if (obj.hasOwnProperty(key)) {
            // 拷贝到新对象中
            newObj[key] = obj[key]
        }
    }
    return newObj
}

实现深拷贝 序列化反序列化

</>复制代码 
// 适用于数组还有对象，但是对于函数对象、正则对象、稀疏数组等无法进行深拷贝（而且会直接丢失相应的值），并且会抛弃对象的constructor，也就是说无论这个函数的构造函数是谁，使用这种拷贝之后，constructor都会变成Object。对循环引用同样无法处理。
let arr = ["old", 1, true, ["old1", "old2"], {old: 1}]
let new_arr = JSON.parse(JSON.stringify(arr))
arr[3][0] = "new1" // new_arr并不会更改
console.log(new_arr)

使用递归

</>复制代码 
// 适用于对象里面有对象
let deepCopy = function(obj) {
    if (typeof obj !== "object") return obj
    let newObj = obj instanceof Array ? [] : {}
    
    for (let key in obj) {
        if (obj.hasOwnProperty(key)) {
            newObj[key] = typeof obj[key] === "object" ? deepCopy(obj[key]) : obj[key]
        }
    }
    return newObj
}

GPU云服务器云服务器深浅拷贝 javascript浅拷贝 javascript深拷贝深浅

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

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

Javascript对象的深浅拷贝

摘要：开门见山，有人叫对象的复制为深复制浅复制，也有人叫深拷贝浅拷贝。高级属性修改深拷贝满足对象的复制，浅拷贝影响原数组。关于对象的深浅拷贝，暂且探索到这里，后续有新发现再进行补充。 showImg(https://segmentfault.com/img/remote/1460000014305581); 开门见山，有人叫对象的复制为深复制浅复制，也有人叫深拷贝浅拷贝。其实都是copy。 ...

qieangel2013 2019-08-22 16:12 评论0 收藏0
JavaScript专题之深浅拷贝

摘要：专题系列第六篇，讲解深浅拷贝的技巧和以及实现深浅拷贝的思路前言拷贝也是面试经典呐数组的浅拷贝如果是数组，我们可以利用数组的一些方法比如返回一个新数组的特性来实现拷贝。所以我们可以看出使用和是一种浅拷贝。 JavaScript 专题系列第六篇，讲解深浅拷贝的技巧和以及实现深浅拷贝的思路前言拷贝也是面试经典呐！数组的浅拷贝如果是数组，我们可以利用数组的一些方法比如：slice、co...

RancherLabs 2019-08-21 11:47 评论0 收藏0
javascript之深浅拷贝

摘要：为何写最近在研究深浅拷贝，找了很多资料，感觉不是很满意，所以自己就整理了一份。深拷贝如果给放到新的内存中，将的各个属性都复制到新内存里，就是深拷贝。安全的值是指能够呈现为有效格式的值。参考文档冴羽的专题之深浅拷贝深拷贝与浅拷贝的实现为何写：最近在研究深浅拷贝，找了很多资料，感觉不是很满意，所以自己就整理了一份。废话不多说，我们来一起复习一下吧，也希望留下您宝贵意见。何为深浅拷贝？...

LMou 2019-08-26 11:34 评论0 收藏0
深浅拷贝

摘要：深复制实现代码如下第一种方法通过递归解析解决第二种方法通过解析解决作者六师兄链接原生深拷贝的实现处理未输入新对象的情况通过方法构造新的对象深浅拷贝针对的是对象类型，如果是字符串的数组用[...arr]，还是不会影响要区分针对数组的深浅拷贝(默认情况为里面没有对象的数组)，与针对对象的深浅拷贝 JavaScript数组深拷贝和浅拷贝的两种方法 let a1 = [1, 2]; ...

Karrdy 2019-08-23 15:42 评论0 收藏0
复习Javascript专题（四）：js中的深浅拷贝

摘要：基本数据类型的复制很简单，就是赋值操作，所以深浅拷贝也是针对，这类引用类型数据。它会抛弃对象的。另外，查资料过程中还看到这么一个词结构化克隆算法还有这一篇资料也有参考，也写得比较详细了的深浅拷贝基本数据类型的复制很简单，就是赋值操作，所以深浅拷贝也是针对Object，Array这类引用类型数据。浅拷贝对于字符串来说，是值的复制，而对于对象来说则是对对象地址的复制；而深拷贝的话，它不...

MobService 2019-08-23 13:40 评论0 收藏0