javascript的深拷贝方法总结（主要针对数组和对象进行整理）

church 发布于2019-08-21 17:47 / 2408人阅读

摘要：回顾一下我们总结的常用的深拷贝完整方案实现一个函数，可以对中的种主要的数据类型包括进行值复制对数组深拷贝的简单方法总结循环实现数组的深拷贝只适应单层数组结构方法实现数组的深拷贝只适应单层数组结构方法实现数组的深拷贝只适应单层数组结构扩展

回顾一下我们总结的常用的深拷贝完整方案

实现一个函数clone，可以对JavaScript中的5种主要的数据类型（包括Number、String、Object、Array、Boolean）进行值复制

 function clone(obj){
        var result;
        switch(typeof obj){
            case "undefined":
            break;
            case "string":
            result = obj+"";
            break;
            case "number":
            result = obj-0;
            break;
            case "boolean":
            result =obj;
            break;
            case "object":
                if(obj ===null){
                    result = null;
                } else {
                    if(Object.prototype.toString.call(obj).slice(8,-1)==="Array"){
                        result=[];
                        for(var i=0;i
对数组深拷贝的简单方法总结
for 循环实现数组的深拷贝
var arr = [1,2,3,4,5]；//只适应单层数组结构
var arr2 = copyArr(arr)
function copyArr(arr) {
    let res = []
    for (let i = 0; i < arr.length; i++) {
     res.push(arr[i])
    }
    return res
}
slice 方法实现数组的深拷贝
var arr = [1,2,3,4,5] //只适应单层数组结构
var arr2 = arr.slice(0)
console.log(arr)   //(5) [1, 2, 5, 4, 5]
console.log(arr2)  //(5) [1, 2, 5, 4, 5]
concat 方法实现数组的深拷贝
var arr = [1,2,3,4,5] //只适应单层数组结构
var arr2 = arr.concat()
console.log(arr)   //(5) [1, 2, 5, 4, 5]
console.log(arr2)  //(5) [1, 2, 5, 4, 5]
ES6扩展运算符实现数组的深拷贝
var arr = [1,2,3,4,5] //只适应单层数组结构
var [ ...arr2 ] = arr
console.log(arr)   //(5) [1, 2, 5, 4, 5]
console.log(arr2)  //(5) [1, 2, 5, 4, 5]
对象的深拷贝的简单方法总结
for循环实现对象的深拷贝
 //如果包含属性值是数组，无法深层拷贝数组里面的数据
var obj = {
  name: "jingjing",
  sex: "girl",
  old: "18"
}
var obj2 = copyObj(obj)
function copyObj(obj) {
  let res = {}
  for (var key in obj) {
    res[key] = obj[key]
  }
  return res
}
转换成json再转换成对象实现对象的深拷贝（对象里面不包含函数的情况下使用,注意这种直接粗暴的方法只能拷贝json格式数据对象，函数会丢失）
var obj = {
  name: jingjing",
  sex: "girl",
  old: "18"
}
var obj2 = JSON.parse(JSON.stringify(obj))
扩展运算符实现对象的深拷贝（随着es6的逐渐推广，此招儿推荐使用）
//如果包含的属性值是数组，无法深层拷贝数组里面的数据
var obj = {
  name: "jingjing",
  sex: "girl",
  old: "18"
}
var { ...obj2 } = obj
obj.old = "22"
console.log(obj)  //{name: "jingjing", sex: "girl", old: "22"}
console.log(obj2) //{name: "jingjing", sex: "girl", old: "18"}
项目中常用到的深拷贝方法大概先总结到这里，有些es6的方法用起来实在是简洁，高效

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

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

javascript中的数据类型

摘要：中具有两种数据类型的值，分别是基本类型值和引用类型值。在中，基本类型值指的是简单的数据段，引用类型值指那些可能由多个值构成的对象。基本数据类型基本数据类型未定义的值的默认值尚未存在的对象数字字符串。整理以及总结一下，回溯下基础。 ECMAScript中具有两种数据类型的值，分别是基本类型值和引用类型值。在ECMAScript中，基本类型值指的是简单的数据段，引用类型值指那些可能由...

2450184176 2019-08-22 15:11 评论0 收藏0
没有对象？那就复制一个吧!（科普向，实际应用向）

摘要：基本数据类型将变量和值一起放在栈内存引用数据类型则将变量放在栈内存而将值放在堆内存。该怎么理解没图我说个假设有个变量在内存中是这样的栈内存中的变量指向堆内存中一块内存相当于持有该内存的指针，而那块内存中存储变量的相关内容。趁着周五没那么忙，抽个空整理一下最近使用比较频繁的一个小技术对象的深复制。感觉啊，这个标题和今天的节日(假装不知道原来是情人节)那么遥相呼应。啊，没有女朋友？没有...

amuqiao 2019-08-26 12:14 评论0 收藏0
js深浅复制

摘要：总结综上所述，数组的深拷贝比较简单，方法没有什么争议，对象的深拷贝，比较好的方法是用的方法实现，或者递归实现，比较简单的深复制可以使用实现参考资料知乎中的深拷贝和浅拷贝深入剖析的深复制深浅复制对比因为JavaScript存储对象都是存地址的，所以浅复制会导致 obj 和obj1 指向同一块内存地址。我的理解是，这有点类似数据双向绑定，改变了其中一方的内容，都是在原来的内存基础上做...

Apollo 2019-08-19 18:44 评论0 收藏0
JS 中的深拷贝与浅拷贝

摘要：什么是深拷贝浅拷贝见名知义，无论是深拷贝还是浅拷贝，都是的问题。使用如下以上就是关于中的深拷贝与浅拷贝的知识和如何进行深拷贝的知识了，如果有错或者有其他方式的话，欢迎在下面留言评论啦前言最近在写项目的时候涉及到一些父子组件传递个对象或者数组通信啥的，或者是直接复制添加对象啥的，直接使用赋值的时候总会出错。一查原来是浅拷贝的问题，就从网上找了点资料，汇总到这里来了。 1 什么是深拷贝...

ztyzz 2019-08-23 13:41 评论0 收藏0
javascript对深拷贝对象的研坑

摘要：对于深拷贝，浅拷贝的概念不多说，概念可以自行百度哟这里对深拷贝对象进行一些研究只有值类型数据的深拷贝针对只有值的数据对象，下面一行代码足以不严谨的简单的深拷贝注意这里问题存在没有对参数做检验判断是否对象的逻辑不够严谨没有考虑数组的兼容进阶深对于深拷贝，浅拷贝的概念不多说，概念可以自行百度哟！这里对深拷贝对象进行一些研究！只有值类型数据的深拷贝针对只有值的数据对象，下面一行代码足以...

caozhijian 2019-08-23 14:05 评论0 收藏0