踩坑记：JSON.parse和JSON.stringify

目录

前言：

一、数据丢失

二、时间对象 被序列化为 字符串

三、NaN、Infinity 和 -Infinity 被序列化为 null

四、只能序列化对象可枚举的 自有属性，如果通过构造函数new出来的实例，则会丢失constructor构造函数

五、RegExp、Error对象，被序列化为 {}

六、循环引用会报错

七、第三方库（推荐lodash）

八、自己实现一个深拷贝

---

前言：

       在项目中很多人为求简单、方便在进行数据的深拷贝时会采用JSON.parse(JSON.stringify(...))的方式，殊不知，这两个组合的深克隆方式存在很多弊端，要慎用！

一、数据丢失

        当被序列化的数据中有Function 或 undefined 时，序列化后，Function 和 undefined 会丢失

<script>
    let obj = {
        name: 'lili',
        age: 13,
        address: undefined,
        sayHello: function() {
            console.log(`my name is ${this.name}`);
        }
    }
    let copyObj = JSON.parse(JSON.stringify(obj));
    console.log(copyObj);
</script>

二、时间对象 被序列化为 字符串

<script>
    let obj = {
        time1: new Date(),
        time2: new Date(1656313196128)
    }
    console.log(obj);
    let copyObj = JSON.parse(JSON.stringify(obj))
    console.log(copyObj);
</script>

三、NaN、Infinity 和 -Infinity 被序列化为 null

<script>
    let obj = {
        notANumber: NaN,
        positiveNum: Infinity,
        minusNum: -Infinity
    }
    console.log(obj);
    let copyObj = JSON.parse(JSON.stringify(obj))
    console.log(copyObj);
</script>

四、只能序列化对象可枚举的 自有属性，如果通过构造函数new出来的实例，则会丢失constructor构造函数

<script>
    function Student(name) {
        this.name = name
    }
    let lili = new Student('lili')
    let Student1 = {
        name: lili,
        hobby: '羽毛球'
    }
    console.log(Student1);
    let copyStudent1 = JSON.parse(JSON.stringify(Student1))
    console.log(copyStudent1);
</script>

五、RegExp、Error对象，被序列化为 {}

<script>
    let obj = {
        regularObj: new RegExp('/^1[3456789]\d{9}$/'),
        errorObj: new Error('出错了！')
    }
    console.log(obj);
    let copyObj = JSON.parse(JSON.stringify(obj))
    console.log(copyObj);
</script>

六、循环引用会报错

<script>
    let obj = {
        name: 'lili'
    }
    obj.details = obj
    console.log(obj);
    let copyObj = JSON.parse(JSON.stringify(obj))
    console.log(copyObj);
</script>

七、第三方库（推荐lodash）

lodash里除了深克隆的方法外，还有很多实用的方法，详情可查看官方文档：

Lodash 简介 | Lodash 中文文档 | Lodash 中文网

八、自己实现一个深拷贝