前端的深拷貝與淺拷貝

什麼是拷貝?

      拷貝,就是將一個對象obj1複製給另個對象obj2,且obj2的數據發生改變時,obj1不發生改變

淺拷貝

    只拷貝第一層對象的數據

   淺拷貝實現方式 - 1.循環遍歷對象,複製

                                2.利用Object.assign()

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>淺拷貝 -1.循環遍歷對象,複製</title>
</head>
<body>
    <script>
        let user = {
            name: '張三',
            age: 18,
            obj:{
                fav:'打籃球'
            }
        }

        //實現淺拷貝 - 只可拷貝第一層數據 - 遍歷對象添加
        let user2 = {}
        for (const key in user) {
            user2[key] = user[key];
        }
        //修改拷貝後第一層數據不會修改原數據
        user2.age = 20;
        //修改拷貝的第二層數據,會修改原數據
        user2.obj.fav = '打乒乓';
        console.log(user.age,user.obj.fav)//18,打乒乓

    </script> 
</body>
</html>

第二種方式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>淺拷貝與深拷貝</title>
</head>
<body>
    <script>
        let user = {
            name: '張三',
            age: 18,
            obj:{
                fav:'打籃球'
            }
        }

        // 實現淺拷貝 - 利用方法實現
        let user3 = Object.assign({},user);
        user3.age = 20;
        user3.obj.fav = '打乒乓';
        console.log(user.age,user.obj.fav)//18,打乒乓
    </script> 
</body>
</html>

深拷貝

  拷貝所有的對象,改變拷貝後的數據不會修改原對象

   1.利用遞歸,向淺拷貝一樣去循環

   2.利用JSON轉換

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>深拷貝</title>
</head>
<body>
    <script>
        let user = {
            name: '張三',
            age: 18,
            obj:{
                fav:'打籃球'
            }
        }

        //實現深拷貝 - 1.利用遞歸 2.利用json
        //將對象轉換爲字符串,利用基本數據類型賦值
        let user4 = JSON.stringify(user);
        //字符串轉換爲對象
        user4 = JSON.parse(user4);
        user4.age = 20;
        user4.obj.fav = '打乒乓';
        console.log(user.age,user.obj.fav)//18,打籃球

    </script> 
</body>
</html>

 

發佈了55 篇原創文章 · 獲贊 12 · 訪問量 4250
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章