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

发布时间:2019-08-09 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了javascript的深拷贝方法总结(主要针对数组和对象进行整理)脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。

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

  • 实现一个函数clone,可以对JavaScript中的5种主要的数据类型(包括Number、String、ObjectArray、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<obj.length;i++){
                            result.push(clone(obj[i]));
                        }
                    }else{
                        result={};
                        for(var k in obj){
                            result[k]=clone(obj[k]);
                            }
                        }
                };
                break;
             default:
                 result = obj;
                 break;
            
        }
        return result
    }

数组深拷贝的简单方法总结

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]
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的方法用起来实在是简洁,高效

脚本宝典总结

以上是脚本宝典为你收集整理的javascript的深拷贝方法总结(主要针对数组和对象进行整理)全部内容,希望文章能够帮你解决javascript的深拷贝方法总结(主要针对数组和对象进行整理)所遇到的问题。

如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。