Map和Set数据结构和ES6模块化语法

约定不等于承诺〃 2023-09-27 20:44 107阅读 0赞

#### [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模块化语法][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文件路径

[Map_Set]: http://tuwen.1000phone.net/details?id=NjMwOQ==#Map%E5%92%8CSet%E6%95%B0%E6%8D%AE%E7%BB%93%E6%9E%84
[ES6]: http://tuwen.1000phone.net/details?id=NjMwOQ==#ES6%E6%A8%A1%E5%9D%97%E5%8C%96%E8%AF%AD%E6%B3%95