es6關於object的更新

1. 屬性簡寫

  let x = 1; let y = 2; let z = 3
  let obj = {
    'x': x,
    y,
    [z]: 5,
    hello: function () {

    }
  }

2. object key值是變量的時候

   1. es5

      obj[z] = 5
      

      • es5只能這樣寫，沒別的方式

   2. es6
      

      • 在es6增加了一個語法讓這個寫法變得更加的簡潔

        let obj = {
          [z]: 5,
          [y + z]: 6
        }
        

      • 這個z的地方可以寫任何的變量或者是表達式
3. object中的函數的簡寫

   let obj = {
     hello () {}
   }
   

4. object中的異步函數
   • 在es5中是不允許在object對象中增加異步函數的。
   • 在es6中是允許的，如果你想把object中的函數變成異步的話，前面加一個星號，這樣表明了這個方法是異步的。

     let obj = {
       * hello () {}
     }
     

   • 這個簡寫的形式是其實跟這樣聲明的函數是一摸一樣的

     function * hello () {}
     

   • 這個是generator函數，執行這個異步函數之后，它並不是像我們常規函數那樣去執行函數體了，它是先返回一
     個對象就叫genetator對象，它返回之后要一步一步的操作才能執行函數體里面的內容。
5. 我們除了可以用object存儲數據，在es6中給大家設置了新的數據結構來存儲數據
   1. Set
      • 之前你要存儲數據，你更多的是用數組或object，現在你可以多了一個選擇叫Set。用Set存儲數據有一個什么
        好處呢，就是它所存儲的數據必須是唯一的，Set存儲的成員不允許是重復的，如果你存入了重復的數據，它會
        幫你自動過濾掉。
      1. 這樣你就實例化了一個Set對象，但是沒有初始化任何數據

         let s = new Set()
         

      2. 初始化數據，Set所接受的參數是一個可遍歷的對象，而不是只有數組

         let s = new Set([1, 2, 3, 4])
         

      3. 有了一個對象了，我們要往里面存數據該怎么做呢，存數據用它提供的add api

         s.add('hello')
         

         • 也可以及聯操作

         s.add('hello').add('goodbye')
         

      4. 刪除數據，對於數據的操作來說，無非就是寫，讀，找，刪，改五個操作。
         1. 刪除指定數據

            s.delete('hello')
            

         2. 全部清空

            s.clear()
            

      5. 查找數據，我用這個數據結構的時候，我特別想知道我里面有沒有這個數據

         s.has('hello')
         

      6. set已經存入數據的長度

         s.size
         

      7. 讀，遍歷

         s.keys() // 返回的是SetIterator，這個是遍歷器
         s.values() // 它們都是返回的我們剛才所存儲的這個值本身
         

      • 我們推測一下Set這種數據結構本質上它還是一個object對象，我們前面在講object對象的時候，是不是key,
        value的形式，在目前來看，keys返回的是{'hello', 'goodbye'}, values也返回的是這個。不難推測它
        還是object本質，也是key,value的形式存在。這是大家要注意的一個點。
        keys返回的是鍵，value返回的是值，如果你想返回鍵值對。

        s.entries() // {'hello' => 'hello', 'goodbye' => 'goodbye'}
        s.forEach(item => {
          console.log(item)
        })
        

      • 所有iterator都可以用for of做，set的實例對象它返回的都是iterator對象

        for (let item of s) {
          console.log(item)
        }
        

      8. 改
         • Set對象並沒有提供讓你直接編輯數據的方法。如果你想改的話要先刪再添加
   2. Map
   • Map是用來實現類似於字典的數據結構。也就是key,value的形式，字典的key,value和object的key,value
     有什么區別呢。Map這個數據結構里面，key可以是任意值，Set是每個元素可以是任意值。

     let map = new Map([[1, 2]])
     console.log(map) // Map(1) {1 => 2}
     

   • 傳入的這個參數跟set一樣是一個可遍歷的對象，不同的是這個可遍歷對象的每一項必須是[1, 2]，前面是key,
     后面是value。
     1. 添加數據

        let map = new Map() // Map(0) {}
        map.set(1, 2) // Map(1) {1 => 2}
        

        • set意味着可以添加可以修改，add只能是添加
     2. 刪除數據

        map.delete(1) 
        

        • 刪除的是key
     3. 全部清除

        map.clear()
        

     4. 統計map數據條數

        map.size
        

     5. 查找

        map.has(1)
        

     6. 取值

        map.get(1)
        

     7. 拿到所有的key集合，value集合，全部集合

        map.keys() // MapIterator {1, 3}
        map.values() // MapIterator {3, 4}
        map.entries() // MapIterator {1 => 3, 3 => 4}
        

        • 再Set的時候這三個拿到的是SetIterator，在這里是MapIterator，不管是SetIterator還是MapIterator，
          它都是Iterator，它都是可遍歷對象，既然是可遍歷對象，它就可以用forEach，就可以用for of
     8. 遍歷

        map.forEach((value, key) => {
          console.log(value, key)
        })
        for (let [key, value] of map) {
          console.log(key, value)
        }
        

        • 用for fo遍歷map的時候一定要寫key, value用[]包起來
     9. 注意
        1. map鍵的類型可以是任意的。

           let o = function () {
             console.log('o')
           }
           map.set(o, 4)
           

        • 這個是你之前絕對沒有見過的，object里面沒有拿function做key的。map是可以的，比如說我現在有一個
          函數它做了很多的功能，然后你想給這個函數標記一些數據，那么你就可以用map去存儲這個數據了，這樣的話就
          可以使這個函數跟這個數據做做一次關聯，比如說o下面我可以掛載一些數據。
        2. 鍵的順序
           • 遍歷出的順序是跟你初始化或者說你在添加key的時候你的那個key的順序來決定的。
        3. 性能
           • 在關於object的操作和map的操作的時候，map的性能稍微會有一些優勢，既然es6中新增了map這種字典型的數據
             結構，推薦大家以后別再用object去存儲數據，而是要使用字典類型的這種數據結構map，希望大家可以學會用新
             的數據結構去解決你的數據問題。比如說set，比如說map，而不是說上來就直接用數組或者object，你的選擇項
             要大了很多，你要發揮這些新的數據結構帶來的這種特性。
6. 關於對象的復制
   1. es5
      • 把一個對象挨個遍歷一下，再賦值給另一個對象，就實現了對象的拷貝
   2. es6

      Object.assign(target, source)
      

      • assign實現的是淺拷貝，淺拷貝是說對於不是引用類型的值，它給你做數據的替換，對於引用類型的值，它不再遍歷
        ，只是把引用的這個對象的地址給你換一下。如果在應用淺拷貝的時候，你可以考慮使用Object.assign，但如果
        說你使用深拷貝在使用assign的時候還要學會遞歸，就是你如果發現它是一個對象，你要遞歸用assign再處理，這樣
        的話就可以實現深拷貝了。