JavaScript全解析——Map和Set資料結構和

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檔案路徑