js深拷贝

js深拷贝

Atigger

2023 年 10 月 30 日

198 次浏览

暂无评论

2492字数

前端

深拷贝就是拷贝值,并在内存中开辟一块新的空间存放,不会影响原数据了

1. 利用JSON.parse(JSON.stringify(要拷贝的数据))

// 缺点是无法处理函数和正则   (会丢失)
const obj = {
    uname: '张三',
    age: 24
}
const obj1 = JSON.parse(JSON.stringify(obj))
console.log(obj1) // {uname: '张三', age: 24}
console.log(obj1 === obj) // false

2. 利用第三方库(lodash)

const _ = require('lodash');

const obj = {
    uname: 'zs',
    age: 24,
    say() {
        console.log('会说话')
    }
}

const obj1 = _.cloneDeep(obj)
console.log(obj1) // { uname: 'zs', age: 24, say: [Function: say] }
console.log(obj1 === obj) // false

3. 利用递归

<body>
    <script>
        // 首先定义一个函数，判断传入的参数是不是符合要求(数据类型为对象且不能为null,typeof null 为 object)
        function isObject(obj) {
            return typeof obj === "object" && obj !== null;
        }
        function copy2(source) {
            // 判断参数是不是简单数据类型，是就原样返回
            if (!isObject(source)) return source;
            // 判断参数是不是数组，是就赋值一个空数组。否则就赋值一个空对象
            let target = Array.isArray(source) ? [] : {};
            // 对参数进行遍历
            for (let i in source) {
                // console.log(i) // i 是 key  或  索引
                // 判断参数，如果是对象，判断是否包含某个键
                // 如果是数组，则判断是否有索引对应的值
                if (source.hasOwnProperty(i)) {
                    // 再判断参数中遍历的某个属性的数据类型是否是对象，简单来说就是判断是不是含有方法或对象
                    // 方法Function也属于对象
                    if (isObject(source[i])) {
                        // 含有方法或对象，就递归调用自身，对方法或对象进行遍历。把遍历后的结果，都赋值给对应的键或索引
                        target[i] = copy2(source[i]);
                    } else {
                        // 不含方法或对象，则按键或索引赋值
                        target[i] = source[i];
                    }
                }
            }
            return target;
        }

        // 对象
        const obj = {
            uname: 'zs',
            age: 24,
            say() {
                return '唱'
            },
            cat: {
                name: '咪咪',
                age: 6,
                skill: function () {
                    return '卖萌'
                }
            }
        }
        const obj1 = copy2(obj)
        console.log(obj1) // {uname: 'zs', age: 24, cat: {…}, say: ƒ}
        console.log(obj1 === obj) // false
        // 数组
        const arr = [1, 2, 3, 4, 5, [6, 7, 8]]
        const arr1 = copy2(arr)
        console.log(arr1) // [1, 2, 3, 4, 5, Array(3)]
        console.log(arr1 === arr) // false
    </script>
</body>

原文链接：https://blog.csdn.net/qq_52845451/article/details/126554955

js深拷贝