麻豆黑色丝袜jk制服福利网站-麻豆精品传媒视频观看-麻豆精品传媒一二三区在线视频-麻豆精选传媒4区2021-在线视频99-在线视频a

千鋒教育-做有情懷、有良心、有品質的職業教育機構

手機站
千鋒教育

千鋒學習站 | 隨時隨地免費學

千鋒教育

掃一掃進入千鋒手機站

領取全套視頻
千鋒教育

關注千鋒學習站小程序
隨時隨地免費學習課程

當前位置:首頁  >  行業資訊  > JavaScript全解析——Map和Set數據結構和ES6模塊化語法

JavaScript全解析——Map和Set數據結構和ES6模塊化語法

來源:千鋒教育
發布人:zyh
時間: 2023-06-01 15:52:00 1685605920

  Map和Set數據結構

JavaScript全解析

  ●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 數據結構

JavaScript全解析

  語法: 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 文件叫做一個 模塊

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

  ○這就叫做 模塊化 開發

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

JavaScript全解析

  模塊化開發的規則

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

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

  ○vscode 下載插件, live server

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

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

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

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

  ○其他文件不能使用

  ○如果像使用, 需要導出

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

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

  語法: 導出和導入

  ●導出語法:

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

  ●導入語法:

  ○import 變量 from 'js文件路徑

tags: ES6模塊化
聲明:本站稿件版權均屬千鋒教育所有,未經許可不得擅自轉載。
10年以上業內強師集結,手把手帶你蛻變精英
請您保持通訊暢通,專屬學習老師24小時內將與您1V1溝通
免費領取
今日已有369人領取成功
劉同學 138****2860 剛剛成功領取
王同學 131****2015 剛剛成功領取
張同學 133****4652 剛剛成功領取
李同學 135****8607 剛剛成功領取
楊同學 132****5667 剛剛成功領取
岳同學 134****6652 剛剛成功領取
梁同學 157****2950 剛剛成功領取
劉同學 189****1015 剛剛成功領取
張同學 155****4678 剛剛成功領取
鄒同學 139****2907 剛剛成功領取
董同學 138****2867 剛剛成功領取
周同學 136****3602 剛剛成功領取
相關推薦HOT
開班信息
北京校區
  • 北京校區
  • 大連校區
  • 廣州校區
  • 成都校區
  • 杭州校區
  • 長沙校區
  • 合肥校區
  • 南京校區
  • 上海校區
  • 深圳校區
  • 武漢校區
  • 鄭州校區
  • 西安校區
  • 青島校區
  • 重慶校區
  • 太原校區
  • 沈陽校區
  • 南昌校區
  • 哈爾濱校區
主站蜘蛛池模板: 香港三级电影在线观看| 房客(糙汉)何璐程曜坤| 一个人看的www免费高清中文字幕 樱花草在线社区www韩国 | 精品久久久久久国产| 美女扒开尿口让男人插| 久久成人精品视频| 欧美先锋影音| 亚洲欧美日韩在线不卡| 最近免费中文字幕4| 国产真实迷j在线播放| 国产高清吃奶成免费视频网站| 中韩日产字幕2021| 动漫美女被到爽了流漫画| 韩国三级大全久久电影| 嫩草影院免费观看| 夜夜爱爱| 韩国一级淫片漂亮老师| 免费精品99久久国产综合精品| 桃子视频在线观看高清免费视频 | 亚洲男人天堂影院| 日本污全彩肉肉无遮挡彩色| 一级红色片| 中文字幕ヘンリー冢本全集| 国产大片线上免费看| 亚洲欧美另类日韩| 老女人影院| 成人免费看www网址入口| 波多野结衣不卡| 大狠狠大臿蕉香蕉大视频| 最近免费中文字幕mv在线电影| 美国式禁忌3| 精品国产综合区久久久久久| 黄色网一级片| 毛片在线高清免费观看| 免费毛片a线观看| 国产成人精品一区二三区 | 亚洲小说区图片区另类春色| 北条麻妃在线视频| 一区二区三区美女视频| 久草免费福利资源站| 国产综合久久久久|