day09 - JavaScript有關陣列和物件的的深拷貝和淺拷貝問題

一、 資料型別

我們知道資料型別分為兩類：

基本資料型別：string、number、boolean、null、undefined
存盤方式：存盤在堆疊記憶體中，變數存盤的就是值

參考資料型別：Object（在JS中除了基本資料型別以外的都是物件，資料是物件，函式是物件，正則運算式是物件）
存盤方式：存盤在堆記憶體中，變數存盤的是地址

具體通過代碼來分析：

        //基本資料型別：number 變數存盤值，
        //所以此時 b = a 賦值是把 a 的值復制一份給b 
        var a = 2 ;
        var b = a ;
        b++ ;
        console.log(a) ;  // 2

        //參考資料型別：變數存盤地址
        //因為arr與arr2共用一個地址，改變arr2也會改變arr
        var arr = [1,2,3] ;
        var arr2 = arr ;
        arr2.push(4) ;
        console.log(arr) ;  //[1,2,3,4] 

可以通過以下圖片分析，arr2 = arr 說明這兩個參考資料型別指向了同一個堆記憶體物件，arr賦值給 arr2，實際上他們共同指向了同一個堆記憶體物件，所以修改 arr2 其實就是修改那個物件，所以通過 arr 也可以訪問到，arr也發生了改變

二、陣列的深拷貝和淺拷貝

1.陣列的淺拷貝：只復制了地址（共享地址）

// 陣列的淺拷貝 --- 只是復制了地址
        var arr = [1,2,3,4,5] ;
        var arr2 = arr ;   //此時arr與arr2公用一個地址

2.陣列的深拷貝：復制值
遍歷(把原陣列中的值存入新的陣列) var arr2 = [] ;
slice() 截取陣列中的所有值，得到的是一個新陣列

方法一：通過遍歷復制陣列中的值（深拷貝）

// 陣列的深拷貝  --- 復制陣列中的值
        var arr = [1,2,3,4,5] ;
        var arr3 = [] ;
        //通過遍歷復制陣列中的值
        arr.forEach(function (v){
            //將arr中的值添加到arr3中
            arr3.push(v) ;
        })
        arr3.push('heolle') ;
        console.log(arr) ;   //[1, 2, 3, 4, 5]
        console.log(arr3) ;   //[1, 2, 3, 4, 5, 'heolle']

方法二：通過slice()截取陣列中的值（深拷貝）

// 陣列的深拷貝  --- 復制陣列中的值
        var arr = [1,2,3,4,5] ;
        var arr3 = arr.slice() ;  
        //或寫成  var arr3 = arr.slice(0 , arr.length)
        arr3.push('hello') ;
        console.log(arr3) ; //[1, 2, 3, 4, 5, 'hello']
        console.log(arr) ;  //[1, 2, 3, 4, 5]
        

三、函式的值傳遞與參考傳遞

函式傳參時：
1.基本資料型別傳遞的是值

var a = 1 ;
        function fn(n) {
            n++ ;
        }
        fn(a) ;  //基本資料型別只是傳遞了值過去
        console.log(a) ;  // 1

2.參考資料型別傳遞的是地址(形參和實參共享地址)，因此在封裝函式的時候：如果改變原陣列，就直接操作形參； 如果不想改變原陣列，就實作深拷貝，然后操作新的數

var arr = [1,2,3] ;
        function fn2(arr2){
            arr2.push('a') ;
        }
        fn2(arr) ;  //參考資料型別傳遞的是地址
        console.log(arr) ;  //[1,2,3,'a']

例子分析：
思路：假設每個存盤的地址就是一個房間

        function pop(arr) {  
            // arr = arr3 ;  // arr和arr3存盤在608房間
            var newArr = [] ;  // newArr存盤在609房間
            for(var i = 0 ; i < arr.length - 1 ; i++) {
                newArr.push(arr[i])
            } 
            // arr = newArr ;  // arr newArr存盤在 609
            return newArr
        }
        
        var arr3 = [6,7,4,2,9,1] ;  // 608
        var res = pop(arr3) ;
        console.log(res); //
        console.log(arr3);
        arr3 = res ;


        var arr = [1,2,3] ;  // 存盤在608房間
        arr = [6,7,9] ;  // 存盤在609房間

四、二維陣列

1.二維陣列的表示 arr[ i ][ j ] , i 表示第幾行、j 表示第幾列

        //定義一個二維陣列
        var arr = [
            [1, 2, 3],
            [4, 5, 6],
            [2, 3, 4]
        ]
        console.log(arr) ;
        console.log(arr[0][1]) ;   //表示第一行第二個

2.二維陣列遍歷

for(var i in arr) {
            for(var j in arr[i]) {
                console.log(arr[i][j]);
            }
        }

利用二維陣列封裝concat() 實作陣列的拼接

//利用二維陣列封裝concat() 實作陣列的拼接
        function concat(){
            //列印出陣列中的值
            console.log(arguments) ;
            var newArr = [] ;
            //遍歷陣列
            for(var i in arguments){
                for(var j in arguments[i]){
                    console.log(arguments[i][j]) ;
                    newArr.push(arguments[i][j]) ;
                }
            }
            console.log(newArr);
        }

        concat([1,2,3] , [4,5,6]) ;

3.多維陣列的深拷貝
1.多維陣列深拷貝如果我們采用一般的slice截取，這種方法只是復制了陣列的第一維，由于陣列第一維存放的是第二維的參考，而第二維才是實際存放了他們的內容，這時候我們需要用for回圈一個個拷貝一維陣列

        function deepArr(arr){
            //定義一個新陣列，存盤傳過來的值
            var newArr = [] ;
            //回圈遍歷陣列的值,此時遍歷的是第一維
            for(var i = 0 ; i < arr.length ; i++){
                //判斷，如果遇到二維，就回呼遍歷第二維的值，然后放入newAree
                if(Array.isArray(arr[i])){
                    //繼續遍歷，還是得到一個陣列
                    var list = deepArr(arr[i]) ;
                    //再把得到的陣列放入 newArr
                    newArr.push(list) ;
                }
                else{
                    newArr.push(arr[i]) ;
                }
            }
            return newArr ;
        }

        var arr = [1,2,3,4,[5,6],7]
        var res = deepArr(arr) ;
        arr[4].push('hello') ;
        console.log(arr) ;    //[1, 2, 3, 4, [5,6,'hello'], 7]
        console.log(res) ;    //[1, 2, 3, 4, [5,6], 7]
        ///可以觀察到當原陣列arr發生了改變時，
        //但是newArr沒有發生改變，實作了二維陣列的深拷貝，
        //多維陣列深拷貝原理也是一樣的

五、物件

陣列：存盤同一種型別的資料，具有有序性
物件：描述同一型別的事物(屬性，方法)，具有無序性

物件擁有屬性和方法，在JavaScript中，幾乎所有的事物都是物件
屬性：屬性值
方法：函式

物件的兩種訪問方式 ：
1.person[‘name’] person[‘age’]
2.點語法 person.name person.age

舉個簡單的例子吧~

//定義一個物件
var person = {
            //屬性值
            name : '師爺',
            age : 42 ,
            sex : '男',
            hobby : 'girl' ,
            //方法
            say : function () {  
                console.log('hello world');
            },
            nickname : ''
        }
        console.log(person.name);  // 師爺
        console.log(person['age']) ;   // 42

物件的遍歷：

var dog = {
            name : '二哈',
            age : 3 ,
            sex : '公',
            say : function () {  
                console.log('汪');
            }
        }

        //遍歷物件
        for(var key in dog){
            console.log(dog[key]) ;
        }

實體化物件 與 物件的賦值

        // 實體化物件  -- 空物件
        var obj = new Object() ;
        // 賦值
        obj.name = '奔馳' ;
        obj.color = 'pink' ;
        obj.price = '100w' ;

物件的深拷貝和淺拷貝：
淺拷貝：拷貝的是地址

var person1 = {
            name : '方總' ,
            age : 18
        }

        //淺拷貝
        var person2 = person1 ;
        person2.name = '師爺' ;
        console.log(person1) ;  //此時person1的name屬性也是'師爺'

深拷貝：拷貝的是值

//深拷貝 ， 通過遍歷賦值
        var person2 = new Object() ;
        for(var key in person1){
            //將person1的值通過遍歷賦給person2
            person2[key] = person1[key] ;
        }
        console.log(pesson2) ;  
        person2.age = 20 ;
        console.log(person1) ; 
        //此時person2的age屬性變成了20,但是person1的屬性還是18