Map和Set數據結構

　　●ES6 新增的兩種數據結構

　　●共同的特點: 不接受重復數據

　　Set數據結構

　　●是一個 類似于 數組的數據結構

　　●按照索引排列的數據結構

　　創建 Set 數據結構

　　語法: var s = new Set([ 數據1, 數據2, 數據3, ... ])

　　Set 數據結構的屬性和方法

　　●size 屬性

　　○語法: 數據結構.size

　　○得到: 該數據結構內有多少個數據

　　●add() 方法

　　○語法: 數據結構.add(數據)

　　○作用: 向該數據結構內添加數據

　　●has() 方法

　　○語法: 數據結構.has(數據)

　　○返回值: 一個布爾值

　　■true, 表示該數據結構內有該數據

　　■false, 表示該數據結構內沒有該數據

　　●delete() 方法

　　○語法: 數據結構.delete(數據)

　　○作用: 刪除該數據結構內的某一個數據

　　●clear() 方法

　　○語法: 數據結構.clear()

　　○作用: 清除該數據結構內所有數據

　　●forEach() 方法

　　○語法: 數據結構.forEach(function (value, key, origin) {})　　

// 創建 Set 數據結構
var s = new Set([ 100, 200, 300 ])
console.log(s)
// Set 的屬性和方法
// 1. size
console.log(s.size)
// 2. add()
var o = { name: 'Jack' }
s.add({ name: 'Jack' })
s.add(o)
console.log(s)
// 3. has()
console.log(s.has(200))
console.log(s.has(o))
// 4. delete()
s.delete(300)
s.delete(o)
console.log(s)
// 5. clear()
s.clear()
console.log(s)
// 6. forEach()
s.forEach(function (item, value, origin) {
  console.log('我執行了', item, value, origin)
})

　　Map數據結構

　　●是一個類似于對象的數據結構, 但是他的 key 可以是任何數據類型

　　●可以被叫做一個 值=值 的數據結構

　　創建一個 Map 數據結構

　　語法: var m = new Map([ [ key, value ], [ key, value ] ])

　　Map 數據結構的屬性和方法

　　●size 屬性

　　○語法: 數據結構.size

　　○得到: 該數據結構內有多少個數據

　　●set() 方法

　　○語法: 數據結構.set(key, value)

　　○作用: 向該數據結構內添加數據

　　●get() 方法

　　○語法: 數據結構.get(key)

　　○返回值: 數據結構內該 key 對應的 value

　　●has() 方法

　　○語法: 數據結構.has(key)

　　○返回值: 一個布爾值

　　■true, 該數據結構內有該數據

　　■false, 該數據結構內沒有該數據

　　●delete() 方法

　　○語法: 數據結構.delete(key)

　　○作用: 刪除該數據結構內的某一個數據

　　●clear() 方法

　　○語法: 數據結構.clear()

　　○作用: 清除該數據結構內所有數據

　　●forEach() 方法

　　○語法: 數據結構.forEach(function (value, key, origin) {})　　

// 創建 Map 數據結構
var m = new Map([ ['a', 100], [ { name: 'Jack' }, { name: 'Rose' } ] ])
console.log(m)
// 屬性和方法
// 1. size
console.log(m.size)
// 2. set 方法
m.set('b', 200)
var a = [ 100 ]
m.set(a, [ 200 ])
console.log(m)
// 3. get 方法
console.log(m.get('b'))
console.log(m.get(a))
// 4. has 方法
console.log(m.has('b'))
console.log(m.has({ name: 'Jack' }))
// 5. delete 方法
m.delete(a)
console.log(m)
// 6. clear()
m.clear()
console.log(m)
// 7. forEach()
m.forEach(function (value, key, origin) {
  console.log(value, key, origin)
})

　　ES6模塊化語法

　　開發的歷史演變

　　●最早: 一個 js 文件

　　○每一個 html 文件對應一個 js 文件

　　●后來: 把一個項目內部的重復功能提取出來

　　○寫成一個單獨的 js 文件

　　●再后來:

　　○決定按照功能拆分出一個一個的文件

　　○a.js : 專門做頂部導航欄各種功能

　　○b.js : 專門做二級菜單

　　○c.js : 專門做搜索引擎

　　○d.js : 左側邊欄

　　○e.js : 輪播圖

　　●最后在每一個 頁面 準備有一個整合的 js 文件

　　●在頁面中引入js文件的時候一定要在script表橋中添加一個type = module屬性

　　○就是專門用來組合這個頁面使用了多少個 js 文件模塊

　　○此時, 我們管每一個 js 文件叫做一個 模塊

　　○頁面的完整功能, 就是由一個一個的模塊來完成的

　　○這就叫做 模塊化 開發

　　●學到這里大家應該知道，一個模塊就是實現特定功能的文件，有了模塊，我們就可以更方便地使用別人的代碼，想要什么功能，就加載什么模塊

　　模塊化開發的規則

　　●如果你想使用 ES6 的模塊化開發語法

　　○頁面必須在服務器上打開。本地打開不行

　　○vscode 下載插件, live server

　　○打開頁面的時候, 鼠標右鍵 open with live server*

　　●當你使用了 模塊化語法以后

　　○每一個 js 文件, 都是一個獨立的 文件作用域

　　○該文件內的所有變量和方法, 都只能在這個文件內使用

　　○其他文件不能使用

　　○如果像使用, 需要導出

　　●每一個 js 文件, 也不能使用任何其他 js 文件內部的變量

　　○如果像使用，那么你需要導入該文件

　　語法: 導出和導入

　　●導出語法:

　　○export default { 你要導出的內容 }

　　●導入語法:

　　○import 變量 from 'js文件路徑