基础总结JS(3):对象的浅拷贝和深拷贝

    科技2022-07-20  98

    一、前言:

    对象的浅拷贝和深拷贝,都是为了将拷贝后的对象和原对象区别开,修改其一,不会影响另一个。

    浅拷贝:适用于原对象里只含有基本类型数据时的拷贝 深拷贝:适用于原对象里包含二级及多级对象、数组的拷贝

    二、浅拷贝的几种方式:

    1、简单拷贝:使用ES6的扩展运算符

    ```javascript let obj1 = { name: "Mike", age: 20 }; let obj2 = { ...obj1 }; obj1.name = "Jane"; console.log(obj1); // {name: "Jane", age: 20} console.log(obj2); // {name: "Mike", age: 20}

    2、拷贝合并多个对象:使用Object.assign()

    let obj1 = { name: "Mike", age: 20 }; let obj2 = { phone: "1234566" }; let obj3 = Object.assign({}, obj1, obj2); obj3.name = "Jane"; console.log(obj1); // {name: "Mike", age: 20} console.log(obj2); // {phone: "1234566"} console.log(obj3); // {name: "Jane", age: 20, phone: "1234566"}

    3、需要逐项做修改时:使用 for…in

    let obj1 = { name: "Mike", age: 20 }; let obj2 = {}; for (const key in obj1) { obj2[key] = key + ":" + obj1[key]; } obj1.name = "Jane"; console.log(obj1); // {name: "Jane", age: 20} console.log(obj2); // {name: "name:Mike", age: "age:20"}

    三、深拷贝的几种方式:

    1、使用递归:

    let obj1 = { title: "A blog", author: { name: "Miki", age: "30" }, list: [] }; //演示 Object.entries返回值 console.log(JSON.stringify(Object.entries(obj1), null, 4)); function copy(object) { let obj = object instanceof Array ? [] : {}; // Object.entries:无论是数组还是对象,返回的都是数组 for (const [k, v] of Object.entries(object)) { //若是对象,则继续递归调用自身,若是数组,则等于原值 obj[k] = typeof v == "object" ? copy(v) : v; } return obj; } let obj2 = copy(obj1); obj2.author.name = "Jane"; obj2.list.push("文章1"); console.log(JSON.stringify(obj1, null, 4)); console.log(JSON.stringify(obj2, null, 4)); /* [ [ "title", "A blog" ], [ "author", { "name": "Miki", "age": "30" } ], [ "list", [] ] ] { "title": "A blog", "author": { "name": "Miki", "age": "30" }, "list": [] } { "title": "A blog", "author": { "name": "Jane", "age": "30" }, "list": [ "文章1" ] } */

    2、使用序列化:

    let obj1 = { title: "A blog", author: { name: "Miki", age: "30" }, list: [] }; let obj2 = JSON.parse(JSON.stringify(obj1)); obj2.author.name = "Jane"; obj2.list.push("文章1"); console.log(JSON.stringify(obj1, null, 4)); console.log(JSON.stringify(obj2, null, 4)); /* { "title": "A blog", "author": { "name": "Miki", "age": "30" }, "list": [] } { "title": "A blog", "author": { "name": "Jane", "age": "30" }, "list": [ "文章1" ] } */
    Processed: 0.012, SQL: 8