js浅拷贝及深拷贝的几种方法

wing324 发布于2019-08-23 16:44 / 1142人阅读

摘要：但这两种拷贝有一个问题就是只能赋值一层，假设我们有如下数据结构臧三小明小芳我们会发现打印出的结果如下上图可看出的结果均变了，这并不是我们想要的结果，所以我们要用到深拷贝。

一个项目开发中经常会用到需要复制一个对象或者数组，但是却不能改变原始对象，所以就要用到拷贝，拷贝又分深拷贝和浅拷贝，今天列举一下几种拷贝形式。

一、浅拷贝 (1) Object.assign()

Object.assign我们经常会用到合并对象，当然利用Object.assign性质我们也可以实现对象的拷贝。

var obj1 = {a: 1, b: 2}
 
var obj2 = Object.assign({}, obj1)
 
obj2.a = 4
 
console.log(obj1, obj2)

结果如图：

这里要注意的是Object.assign第一个参数必须是个空对象

(2) 解构赋值

var obj1 = {a: 1, b: 2}
 
var obj2 = {...obj1}
 
obj2.a = 4
 
console.log(obj1, obj2)

结果如图：

这里一样可以实现之前上面的结果。

但这两种拷贝有一个问题就是只能赋值一层，假设我们有如下数据结构

var obj1 = [{
    name: "臧三",
    childs: ["小明", "小芳"]
}]
 
var obj2 = [...obj1]
 
obj2[0].childs = []
 
console.log(obj1, obj2)

我们会发现打印出的结果如下：

上图可看出obj1,obj2 的结果均变了，这并不是我们想要的结果，所以我们要用到深拷贝。

二、深拷贝 (1) 利用json.stringify

var obj1 = [{
    name: "臧三",
    childs: ["小明", "小芳"]
}]
 
var obj2 = JSON.parse(JSON.stringify(obj1))
 
obj2[0].childs = []
 
console.log(obj1, obj2)

结果如下:

这样的话就能达到我们想要的结果。

这种方法简单，但也有弊端，看看下面的数据结构：

var obj1 = [{
    name: "臧三",
    childs: ["小明", "小芳"],
    fn: function() {},
    age: undefined
}]
 
var obj2 = JSON.parse(JSON.stringify(obj1))
 
obj2[0].childs = []
 
console.log(obj1, obj2)

结果：

我们从结果中发现，值为undefined,或者function的时候并不会拷贝过来。

(2) 利用递归来实现一个方法进行拷贝

var obj1 = [{
    name: "臧三",
    childs: ["小明", "小芳"],
    fn: function() {},
    age: undefined
}]
 
var obj2 = extend(obj1)
 
obj2[0].childs = []
 
console.log(obj1, obj2)
 
function extend(data) {
    if (typeof data === "object" && data) {
        let val = typeof data.length === "number" ? [] : {}
        for(let i in data) {
            val[i] = extend(data[i])
        }
        return val
    } else {
        return data
    }
}

结果：

这样我们就能把所有值都拷贝过来。

GPU云服务器云服务器深拷贝和浅拷贝浅拷贝 js缓存的几种方法 javascript浅拷贝

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

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

js的浅拷贝和深拷贝

摘要：拷贝分为浅拷贝和深拷贝。浅拷贝是引用复制，深拷贝是完全单纯拷贝数据的值。所以，这种方法只是简单绕过第一层箱子的引用复制深拷贝目前比较好的方法就是大法，要么就是自己写递归的深拷贝函数。附带深拷贝的自定义函数源自大佬的经常遇到数组或对象等引用类型作为函数的参数的情况，但又不想修改原来的数据，这时候就需要拷贝（基本类型的变量不需要考虑）。拷贝分为浅拷贝和深拷贝。浅拷贝是引用复制，深拷贝是完...

jsliang 2019-08-23 10:26 评论0 收藏0
前端基础汇总

摘要：及相关问题数据类型函数中指向原型作用域闭包面向对象对象创建模式继承严格模式与对象转换的方法添加属性，根据原型创建区别新特性解构赋值简化对象写法剪头函数三点运算符模板字符串形参默认值异步过程深拷贝与浅拷贝赋值与浅拷贝的区别浅拷贝的几种方法实现 js及es相关问题数据类型函数中this指向——————原型作用域闭包——————面向对象对象创建模式继承——————Es5严格模式Json与j...

2json 2019-08-23 16:58 评论0 收藏0
前端基础汇总

摘要：及相关问题数据类型函数中指向原型作用域闭包面向对象对象创建模式继承严格模式与对象转换的方法添加属性，根据原型创建区别新特性解构赋值简化对象写法剪头函数三点运算符模板字符串形参默认值异步过程深拷贝与浅拷贝赋值与浅拷贝的区别浅拷贝的几种方法实现 js及es相关问题数据类型函数中this指向——————原型作用域闭包——————面向对象对象创建模式继承——————Es5严格模式Json与j...

laznrbfe 2019-08-29 18:38 评论0 收藏0
js深度克隆的几种方法

摘要：方法一老老实实敲代码法迭代法，适用于所有方法二利用将对象序列化字符串，再使用来反序列化还原对象缺点如果里面有时间对象，则后再的结果，时间将只是字符串的形式。简而言之，第一层实现了深度拷贝，后续层次还是浅拷贝方法一老老实实敲代码法（迭代法，适用于所有） function deepClone(obj) { let newObj = Array.isArray(obj) ? [...

Pluser 2019-08-26 10:22 评论0 收藏0
面试小结（一）

摘要：面试问到的问题继承的几种方法，，原形继承面向对象的几种方法五种方式对象字面量创建实例对象构造函数工厂模式用一个函数，通过传递参数返回对象。打包原理打包原理把所有依赖打包成一个文件，通过代码分割成单元片段并按需加载。面试问到的问题：1、继承的几种方法； Call，apply，原形继承； 2、面向对象的几种方法；五种方式： 1）对象字面量：var obj={}; 2）创建实例对象：va...

xiaodao 2019-08-29 15:35 评论0 收藏0