HTML5(三)——JSON，深拷貝淺拷貝

JSON

1. 用於先後端數據交互的數據類型，是一個字符串
2. Json.stringify 把object轉換成string
3. Json.parse(tmp)把string轉換成object

深拷貝，淺拷貝

• 淺拷貝：賦值地址，一個變另外一個也變（數組，對象）
• 深拷貝：一個變另外一個不變（基本數據類型）

對象深克隆（僅限對象這種）

需求：將數組對象也去實現一個深拷貝的狀況

解決辦法：

1. 方法一：利用stringify先轉變成字符串，而後json用parse再變回對象，再改變屬性值就能夠達到深拷貝的效果了（實現方法以下）

<script>
        // json用於先後端數據交互
        var obj  = {
            name : "caoyuying",
            age : "18",
            info : {
                grade:19,
                profession:"CS"
            }
        }
        console.log(obj)
        console.log(typeof obj)
        var obj1 = JSON.stringify(obj)
        //想要進行對象深拷貝，必須先利用json把object變成字符串
        obj1 = JSON.parse(obj1);
        // 而後再把obj1變回對象而且賦值給本身，這一波操做以後就深拷貝了
        obj1.name = "Aiors"
        console.log(obj1.name)
        console.log(obj1);
        console.log(obj);
    </script>

複製代碼

2. 方法二：提取出對象下屬性的值

<script>
        var obj = {
            name:"caoyuying",
            age:"18",
            info:{
                height:"167cm",
                weight:"55kg"
            }
        }
       function deepclone(obj){
           var temp = {}
           for(var key in obj){
            //    console.log(key)
            //    console.log(obj[key])
            if(typeof obj[key] === "object"){
                temp[key] = deepclone(obj[key])
            }else{
                temp[key] = obj[key]
            }
           }
           return temp
       }
       var obj1 = deepclone(obj) //這裏須要給deepclone一個接收值
       obj1.name = "Aiors"
       console.log(obj1)
       console.log(obj)
    </script>
複製代碼

包含基本數據類型和引用數據類型的對象深克隆

需求增長：要求不僅是引用數據類型可實行深拷貝，基本數據類型也能夠執行深拷貝

1. 先判斷是基本數據類型仍是引用數據類型
2. 基本數據類型直接賦值
3. 引用數據類型判斷是數組仍是對象
4. Array.isArray(params)判斷是否是數組，這裏利用三目運算符
5. 再進行for...in...循環（這裏注意typeof 是強制校驗數據類型，不管是數組仍是對象返回的都是object）

<script>
      function deepclone(params){
          var temp;
          // 先判斷params是基本數據類型仍是引用數據類型   
          if(typeof params === "object"){
              //判斷是引用數據類型中的哪種，是數組仍是對象   
              temp = Array.isArray(params) ? []:{}
              for(var key in params){
                  if(typeof params[key] === "object"){
                      temp[key] = deepclone(params[key])
                  }else{
                      temp[key] = params[key]
                  }

              }

          }else{
              temp = params;
          }
          return temp
      }
      console.log(deepclone("abc"))
      console.log(deepclone([1,2,3,4]))
      console.log(deepclone({
          name:"caoyuying",
          age:"18"
      }))
</script>
複製代碼