关于前端:JavaScript-对象数组的深浅拷贝

深浅拷贝

●深浅拷贝指的是一种复制对象或者数组的行为
●也就是把一个对象或者数组中的数据完完整整的复制一份放到另一个数组或者对象中
●并且相互之间没有分割
●说道深浅拷贝这个咱们不思考根本数据类型
●因为根本数据类型没有援用地址一说
●说到复制这个事儿 有三个级别
○赋值
○浅拷贝
○深拷贝

赋值

●就是把一个变量存储的内容复制一份给另一个变量
●根本数据类型赋值当前两个变量之间没有关系
●批改任何一个的值都不会影响另一个
●简单数据类型赋值当前, 两个变量操作一个空间
●批改一个的值另一个也会跟着扭转

// 赋值
// 根本数据类型
let num = 100
let num1 = num
console.log(num, num1);
num1 = 200
console.log(num, num1);
// 简单数据类型
let o1 = {name: 'Jack', age: 25}
let o2 = o1
console.log(o1, o2);
o2.name = 'Rose'
console.log(o1, o2);

浅拷贝

●说到浅拷贝就不思考根本数据类型了
●就是依照原先的数据类型创立一个新的一样的数据类型
●把原始数据中的每一个数据顺次赋值到新的数据类型中
●通过剖析咱们发现浅拷贝只能拷贝一层
●并且是简略数据类型 如果有第二层甚至多层就不能实现完完整整的复制

// 浅拷贝
// 筹备原始数据
const o1 = {
    name: 'Jack',
    age: 25,
    color: {
        red: '红色',
        blue: '蓝色'
    }
}
// 实现拷贝
// 首先创立一个新的数据
const o2 = {}
// 遍历循环原始数据类型
for (let k in o1) {
    // 接下来就是把原始数据类型中的数据赋值到新创建的数据类型中
    // 如果这个时候元素对象中还简单数据类型
    // 同样是赋值 仍然不能实现完完整整的复制
    o2[k] = o1[k]
}
console.log(o1, o2);
// 批改 o1 中的值
o1.color.red = '红颜色'
console.log(o1, o2);

深拷贝

●就是要百分百的拷贝一份原始数据
●批改任何外面的数据都不会影响另一个外面的数据
●不论层级有多深 都能残缺的复制过去 两个之间没有关系
●这就要通过深拷贝
●深拷贝的外围: 递归

// 筹备数据
const o1 = {
    name: 'Jack',
    age: 18,
    info: {
        height: 180,
        weight: 180,
        desc: {message: '今天天气很好'}
    },
    address: {city: '北京'},
    hobby: ['吃饭', '睡觉']
}
// 筹备一个空对象
const o2 = {}
// 要实现深拷贝 咱们就筹备一个函数
function deepCopy(o2, o1) {
    // 首先咱们还是要通过循环遍历的形式拿到原始数据类型中的数据
    for (let k in o1) {
        // 因为咱们不晓得外面都有什么数据所以咱们要先判断
        if (Object.prototype.toString.call(o1[k]) === '[object Object]') {
            // 代码能进入到这里阐明是一个对象
            o2[k] = {}
            // 再次进行拷贝 这个过程和咱们刚做的是不是一样
            // 那我就间接调用咱们的 deepCopy 函数就好
            deepCopy(o2[k], o1[k])
        } else if (Object.prototype.toString.call(o1[k]) === '[object Array]') {
            // 代码能执行到这里阐明是一个数组
            o2[k] = []
            // 继续执行咱们的拷贝函数
            deepCopy(o2[k], o1[k])
        } else {o2[k] = o1[k]
        }
    }
}
// 应用
deepCopy(o2, o1)
console.log(o1, o2);
o1.info.height = 300
console.log(o1, o2);