全国旗舰校区

不同学习城市 同样授课品质

北京

深圳

上海

广州

郑州

大连

武汉

成都

西安

杭州

青岛

重庆

长沙

哈尔滨

南京

太原

沈阳

合肥

贵阳

济南

下一个校区
就在你家门口
+
当前位置:首页  >  行业资讯

JavaScript全解析——Map和Set数据结构和ES6模块化语法

发布时间:2023-06-01 15:52:00
发布人:zyh

  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文件路径

#ES6模块化

相关文章

PMP®认证荣获北京市境外职业资格认可!

2023-09-07

有哪些好的HTML5前端开发培训机构?

2023-09-07

怎么选择适合自己的HTML5前端开发培训机构?

2023-09-07

短视频运营哪个培训机构靠谱?

2023-09-07

怎么选择靠谱的短视频运营培训机构?

2023-09-07

短视频运营哪个培训机构好?

2023-09-07
在线咨询 免费试学 教程领取