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

透明技术人

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

  • 实现一个函数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<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
    }

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

  • 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的方法用起来实在是简洁,高效
阅读 6.3k

web前端技术栈八面玲珑来汇总
超实用web前端项目代码段总结
189 声望
1 粉丝
0 条评论
189 声望
1 粉丝
文章目录
宣传栏