深浅拷贝、节流防抖

1.浅拷贝

1.1 概念

• 只拷贝了数据对象的第一层，也就是原始数据类型，后期改互不影响

• 深层次的数据值（对象类型）与原对象的地址相同，后期改相互影响

1.2 实现方式

1.for...in 循环

var obj1 ={
	a:{n:11,m:22,x:33},
	b:[1,2,3,4],
	c:123
}

var obj2 = {}

for(var k in obj1){
	obj2[k] = obj1[k];
}

2.扩展运算符 ...

var obj1 ={
	a:{n:11,m:22,x:33},
	b:[1,2,3,4],
	c:123
}

var obj2 = {...obj1}

3.Object.assign() 方法

Object.assign() 方法用于将所有可枚举属性的值从一个或多个源对象复制到目标对象。

它将返回目标对象。是ES6提供的一个Object的静态方法

语法

Object.assign(target, ...sources)

参数：

• target
  • 目标对象，接收源对象属性的对象，也是修改后的返回值。
• sources
  • 源对象，包含将被合并的属性。

var obj1 ={
	a:{n:11,m:22,x:33},
	b:[1,2,3,4],
	c:123
}
// 因为assige返回的对象地址是 第一个参数的地址
// 所以为了实现浅拷贝，需要给第一个参数传一个空对象
var obj2 = Object.assign({},obj1);

4.lodash的_.clone方法

const _ =require('lodash');

const obj1={a:1,b:2,c:[3,4,5]}

// obj2 是 obj1 的浅拷贝
const obj2=_.clone(obj1)

其他方法，了解

Array.prototype.concat()

Array.prototype.slice()

2.深拷贝

2.1 概念

• 深拷贝会另外创造一个一模一样的对象
• 新对象和源对象不会互相干扰，修改新对象的任何数据不会影响源对象。

2.2 实现方式

1.JSON正反序列化

JSON.parse() 和 JSON.stringify()

var obj1 ={
	a:{n:11,m:22,x:33},
	b:[1,2,3,4],
	c:123
}

var obj2 = JSON.parse(JSON.stringify(obj1));

！！！！！JSON正反序列化方法的缺点：无法正确处理函数和正则

2.lodash的_.cloneDeep()

CDN引用地址：

https://cdn.bootcdn.net/ajax/libs/lodash.js/4.17.21/lodash.js

_.cloneDeep(value)方法

会递归拷贝 value。（注：也叫深拷贝）。

var obj1 ={
	a:{n:11,m:22,x:33},
	b:[1,2,3,4],
	c:123
}

var obj2 =  _.cloneDeep(person);

3.递归

直接复制，tmd怎么可能自己写

var obj1 ={
	a:{n:11,m:22,x:33},
	b:[1,2,3,4],
	c:123
}

var obj2 = deepCopy(obj1);

function deepCopy(data) {
    //声明一个对象用于拷贝原来的对象属性
    var newObj = {};
    
    //用于拷贝数组
    var arr = [];
    
    //进行一个判断,判断data是不是一个引用数据类型
    //要区分是数组还是对象
    if(typeof data === 'object' && !Array.isArray(data)){
        for (var k in data) {
            // 判断 如果某个属性值是引用数据类型
            if(typeof data[k] === "object"){
                newObj[k] = deepCopy(data[k])
            }else{
                newObj[k] = data[k]
            }
        }
        return newObj
    }else if(Array.isArray(data)){
        for(var i=0;i<data.length;i++){
            // 拷贝多维数组
            if(typeof data[i] === 'object'){
                arr.push(deepCopy(data[i]))
            }else{
                arr.push(data[i])
            }
        }
        return arr
    }
}