常用克隆数据方式

• • 展开操作符号 ...
  • 克隆对象
  • 克隆数组
  • 深度克隆数组/对象 结合

通常需要克隆数据的原因是因为：当你操作一个数据时，在 dom上不希望看到数据的改变，而是希望 通过接口保存或者某些操作以后，再更新数据的变化，更多是用在编辑数据的时候

展开操作符号 …

扩展符 相当于是解构当前数据

用于克隆数组
const arr = [1,2,3]
const arr2 = [...arr], // [1,2,3]

用于克隆对象
const obj = {
	name: '张三',
	age: '18'
}
const obj2 = {...obj},// { name:'张三', age: '18'}
想要复制的同时，增加一个值，只需要在后面直接添加即可，
例如增加一个性别属性
const obj3 = {...obj,sex: '男'} // { name:'张三', age: '18',sex: '男'}}

注意：
（1）不管是复制数组还是对象，必须外层包裹一个表示数组或对象的运算符去接收结构出来的值
（2）展开符 复制对象时，只进行一层深拷贝，如果对象中的某个值是引用类型的话，对这个对象只进行浅拷贝，这就导致数据双向绑定时，改变拷贝对象的引用类型的值，原对象中的值也会跟着改变。
比如：
let obj = {
	arr: [1,2,3],
	age: 16,
	sex: '男'
}
let obj2 = {...obj}
obj2.arr[0] = 4
console.log(obj1)
console.log(obj2)

克隆对象

let obj = {
	name: '张三',
	age: '18'
}
let obj2 = {}
（1）传统克隆方式，适用于 对象中没有引用类型的对象
for(let key in obj) {
	obj2[key] = obj[key]
}
（2）参考 展开操作符

克隆数组

（1）封装一个 克隆函数
function cloneArray(arr){
    let newArr=[];
    for(let i=0;i<arr.length;i++) {
        newArr.push(arr[i]);
    }
    return newArr;
}
let arr = ['aaa','bbb','ccc','wwwww','ddd']
let arr2 = cloneArray(arr)
console.log(arr)  // ["aaa", "bbb", "ccc", "wwwww", "ddd"]
console.log(arr2)  // ["aaa", "bbb", "ccc", "wwwww", "ddd"]
console.log( arr2 === arr )   //false
(2) 扩展符 参考展开操作符

(3) 数组 concat() 操作,concat 还能追加项 
const arr = [1,2,3]
const arr2 = arr.concat()
const arr3 = arr.concat(4)
console.log(arr)  // [1,2,3]
console.log(arr2)  // [1,2,3]
console.log( arr2 === arr )   //false
console.log(arr3)  // [1,2,3,4]

(4) 数组 slice(strat，end) 方法 不传参，也可以用来克隆数组
const arr = [1, 2, 3]
const arr2 = arr.slice()
console.log(arr)  // [1,2,3]
console.log(arr2)  // [1,2,3]
console.log(arr2 === arr)   //false

(5) Object.assign(item, item1) 方法用于对象的合并 item 目标对象 item1 被复制的对象
let arr = [1, 2, 3, 4]
let arr2 = []
Object.assign(arr2, arr)

深度克隆数组/对象 结合

直接传入对象/数组 返回克隆后的对象/数组
改方法通过递归的形式，将引用类型进行深度克隆，就不会出现像 展开符 传统的 for in 克隆时出现引用类型 无法深度克隆的情况
function deepClone(data) {
    let d;
    if (typeof data === "object") {
        if (data == null) {
            d = null;
        } else {
            if (data.constructor === Array) {
                d = [];
                for (let i in data) {
                    d.push(deepClone(data[i]));
                }
            } else {
                d = {};
                for (let i in data) {
                    d[i] = deepClone(data[i]);
                }
            }
        }
    } else {
        d = data;
    }
    return d;
}