深入之深浅拷贝

一、数据类型

数据类型分为基本数据类型(String,Number,Boolean,Null,Undefined,Symbol)和对象数据类型。

基本数据类型特点：直接存储在栈(stack)中的数据

引用数据类型的特点：存储的是该对象在栈中的引用，真实的数据存放在堆内存中。

引用数据类型在栈中存储了指针，该指针指向堆中该实体的起始地址，当解析器寻找引用值时，会首先检索栈中的地址，取得地址后从堆中获得实体。

二、深浅拷贝

深浅拷贝只是针对 Object 和 Array 这样的引用类型数据

浅拷贝只会复制对象的第一次对象，修改第一次对象不会影响另一个拷贝对象。

浅拷贝例子：

let arr = [1,2,[3,4],5,6];
let arr2 = [... arr];
arr2[1] = 12;  // 修改第一层元素，不会影响 arr
arr2[2][1] = 22; // 修改第二层或更深层元素,将会影响 arr
console.log(arr,arr2); // arr: [1,2,[3,22],5,6]  arr2: [1,12,[3,22],5,6]

image.png

浅拷贝方法

1、Object.assign()

var obj = {a: {a: 'kobe',b: 39},b: 12};
var initalObj = Object.assign({},obj);
initalObj.a.a = 'wade';
initalObj.b = 22;
console.log(obj.b,obj.a.a);  // 12  wade

2、Array.prototype.concat()

let arr = [1,3,{userName: 'kobe'}];
let arr2 = arr.concat();
arr2[1] = 12;
arr2[2].userName = 'wade';
console.log(arr[1],arr[2].userName);  // 3  wade

3、Array.prototype.slice()

let arr = [1,3,{userName: 'kobe'}];
let arr2 = arr.slice();
arr2[1] = 12;
arr2[2].userName = 'wade';
console.log(arr[1],arr[2].userName);  // 3  wade

深拷贝方法

1、JSON.parse(JSON.stringify())

let arr = [1,3,{userName: 'kobe'}];
let arr2 = JSON.parse(JSON.stringify(arr));
arr2[1] = 12;
arr2[2].userName = 'wade';
console.log(arr[1],arr[2].userName);  // 3  kobe

这个方法虽然可以实现数组或对象的深浅拷贝，但不能处理函数，拷贝过来为null。

let arr = [1,3,{userName: 'kobe'},function(){}];
let arr2 = JSON.parse(JSON.stringify(arr));
arr2[2].userName = 'duncan';
console.log(arr[3],arr2[3]);  // function  null

实现浅拷贝

var obj = {
    'name': 'kobe',
    'age': 18,
    'language': [1,[2,3],[4,5]]
}
let obj1 = shallowCopy(obj);
obj1.name = "wade";
obj1.language[1] = ["二","三"];
function shallowCopy(obj){
    var dst = {};
    for(var prop in obj){
        if(obj.hasOwnProperty(prop)){
            dst[prop] = obj[prop];
        }
    }
    return dst;
}
console.log(obj.name,obj.language[1]);  // kobe  ["二","三"];
console.log(obj1.name,obj.language[1]);  // wade  ["二","三"];

实现深拷贝

//定义检测数据类型的功能函数
function checkedType(target){
    return Object.prototype.toString.call(target).slice(8, -1);
}
function clone(target){
    let result, targetType = checkedType(target);   
    //判断拷贝的数据类型
    //初始化变量result 成为最终克隆的数据
    if(targetType === 'Object'){
        result = {};
    }else if(targetType === "Array"){
        result = []
    }else{
        return target
    }
    //遍历目标数据
    for(let i in target){
        let value = target[i];
        if(checkedType(value) === "Object" || checkedType(value) === "Array"){
            result[i] = clone(value);
        }else{
            result[i] = value;
        }
    }
    return result;
}