Stepping on the pit: json Parse and json stringify

Catalog

Preface ：

One 、 Data loss

Two 、 Time object   Serialized as character string

3、 ... and 、NaN、Infinity and -Infinity Serialized as null

Four 、 Only enumerable objects can be serialized own property , If you pass the constructor new The examples come out , You'll lose constructor Constructors

5、 ... and 、RegExp、Error object , Serialized as {}

6、 ... and 、 Circular quotation will report an error

7、 ... and 、 Third party Library （ recommend lodash）

8、 ... and 、 Make a deep copy of yourself

---

Preface ：

        In the project, many people try to be simple 、 It is convenient to use... In deep copy of data JSON.parse(JSON.stringify(...)) The way , Little imagine , The deep cloning method of these two combinations has many disadvantages , Use with caution ！

One 、 Data loss

        When there is... In the serialized data Function or undefined when , After serialization ,Function and undefined Will lose

<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>

Two 、 Time object   Serialized as character string

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

3、 ... and 、NaN、Infinity and -Infinity Serialized as null

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

Four 、 Only enumerable objects can be serialized own property , If you pass the constructor new The examples come out , You'll lose constructor Constructors

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

5、 ... and 、RegExp、Error object , Serialized as {}

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

6、 ... and 、 Circular quotation will report an error

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

7、 ... and 、 Third party Library （ recommend lodash）

lodash In addition to deep cloning , There are many practical ways , Details can be found in the official documents ：

Lodash brief introduction | Lodash Chinese document | Lodash Chinese net

8、 ... and 、 Make a deep copy of yourself