Map和Set數(shù)據(jù)結(jié)構(gòu)
●ES6 新增的兩種數(shù)據(jù)結(jié)構(gòu)
●共同的特點: 不接受重復數(shù)據(jù)
Set數(shù)據(jù)結(jié)構(gòu)
●是一個 類似于 數(shù)組的數(shù)據(jù)結(jié)構(gòu)
●按照索引排列的數(shù)據(jù)結(jié)構(gòu)
創(chuàng)建 Set 數(shù)據(jù)結(jié)構(gòu)
語法: var s = new Set([ 數(shù)據(jù)1, 數(shù)據(jù)2, 數(shù)據(jù)3, ... ])
Set 數(shù)據(jù)結(jié)構(gòu)的屬性和方法
●size 屬性
○語法: 數(shù)據(jù)結(jié)構(gòu).size
○得到: 該數(shù)據(jù)結(jié)構(gòu)內(nèi)有多少個數(shù)據(jù)
●add() 方法
○語法: 數(shù)據(jù)結(jié)構(gòu).add(數(shù)據(jù))
○作用: 向該數(shù)據(jù)結(jié)構(gòu)內(nèi)添加數(shù)據(jù)
●has() 方法
○語法: 數(shù)據(jù)結(jié)構(gòu).has(數(shù)據(jù))
○返回值: 一個布爾值
■true, 表示該數(shù)據(jù)結(jié)構(gòu)內(nèi)有該數(shù)據(jù)
■false, 表示該數(shù)據(jù)結(jié)構(gòu)內(nèi)沒有該數(shù)據(jù)
●delete() 方法
○語法: 數(shù)據(jù)結(jié)構(gòu).delete(數(shù)據(jù))
○作用: 刪除該數(shù)據(jù)結(jié)構(gòu)內(nèi)的某一個數(shù)據(jù)
●clear() 方法
○語法: 數(shù)據(jù)結(jié)構(gòu).clear()
○作用: 清除該數(shù)據(jù)結(jié)構(gòu)內(nèi)所有數(shù)據(jù)
●forEach() 方法
○語法: 數(shù)據(jù)結(jié)構(gòu).forEach(function (value, key, origin) {})
// 創(chuàng)建 Set 數(shù)據(jù)結(jié)構(gòu)
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('我執(zhí)行了', item, value, origin)
})
Map數(shù)據(jù)結(jié)構(gòu)
●是一個類似于對象的數(shù)據(jù)結(jié)構(gòu), 但是他的 key 可以是任何數(shù)據(jù)類型
●可以被叫做一個 值=值 的數(shù)據(jù)結(jié)構(gòu)
創(chuàng)建一個 Map 數(shù)據(jù)結(jié)構(gòu)
語法: var m = new Map([ [ key, value ], [ key, value ] ])
Map 數(shù)據(jù)結(jié)構(gòu)的屬性和方法
●size 屬性
○語法: 數(shù)據(jù)結(jié)構(gòu).size
○得到: 該數(shù)據(jù)結(jié)構(gòu)內(nèi)有多少個數(shù)據(jù)
●set() 方法
○語法: 數(shù)據(jù)結(jié)構(gòu).set(key, value)
○作用: 向該數(shù)據(jù)結(jié)構(gòu)內(nèi)添加數(shù)據(jù)
●get() 方法
○語法: 數(shù)據(jù)結(jié)構(gòu).get(key)
○返回值: 數(shù)據(jù)結(jié)構(gòu)內(nèi)該 key 對應的 value
●has() 方法
○語法: 數(shù)據(jù)結(jié)構(gòu).has(key)
○返回值: 一個布爾值
■true, 該數(shù)據(jù)結(jié)構(gòu)內(nèi)有該數(shù)據(jù)
■false, 該數(shù)據(jù)結(jié)構(gòu)內(nèi)沒有該數(shù)據(jù)
●delete() 方法
○語法: 數(shù)據(jù)結(jié)構(gòu).delete(key)
○作用: 刪除該數(shù)據(jù)結(jié)構(gòu)內(nèi)的某一個數(shù)據(jù)
●clear() 方法
○語法: 數(shù)據(jù)結(jié)構(gòu).clear()
○作用: 清除該數(shù)據(jù)結(jié)構(gòu)內(nèi)所有數(shù)據(jù)
●forEach() 方法
○語法: 數(shù)據(jù)結(jié)構(gòu).forEach(function (value, key, origin) {})
// 創(chuàng)建 Map 數(shù)據(jù)結(jié)構(gòu)
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模塊化語法
開發(fā)的歷史演變
●最早: 一個 js 文件
○每一個 html 文件對應一個 js 文件
●后來: 把一個項目內(nèi)部的重復功能提取出來
○寫成一個單獨的 js 文件
●再后來:
○決定按照功能拆分出一個一個的文件
○a.js : 專門做頂部導航欄各種功能
○b.js : 專門做二級菜單
○c.js : 專門做搜索引擎
○d.js : 左側(cè)邊欄
○e.js : 輪播圖
●最后在每一個 頁面 準備有一個整合的 js 文件
●在頁面中引入js文件的時候一定要在script表橋中添加一個type = module屬性
○就是專門用來組合這個頁面使用了多少個 js 文件模塊
○此時, 我們管每一個 js 文件叫做一個 模塊
○頁面的完整功能, 就是由一個一個的模塊來完成的
○這就叫做 模塊化 開發(fā)
●學到這里大家應該知道，一個模塊就是實現(xiàn)特定功能的文件，有了模塊，我們就可以更方便地使用別人的代碼，想要什么功能，就加載什么模塊
模塊化開發(fā)的規(guī)則
●如果你想使用 ES6 的模塊化開發(fā)語法
○頁面必須在服務器上打開。本地打開不行
○vscode 下載插件, live server
○打開頁面的時候, 鼠標右鍵 open with live server*
●當你使用了 模塊化語法以后
○每一個 js 文件, 都是一個獨立的 文件作用域
○該文件內(nèi)的所有變量和方法, 都只能在這個文件內(nèi)使用
○其他文件不能使用
○如果像使用, 需要導出
●每一個 js 文件, 也不能使用任何其他 js 文件內(nèi)部的變量
○如果像使用，那么你需要導入該文件
語法: 導出和導入
●導出語法:
○export default { 你要導出的內(nèi)容 }
●導入語法:
○import 變量 from 'js文件路徑
京公網(wǎng)安備 11010802030320號