- ES6 教程
- ES6 - 首页
- ES6 - 概述
- ES6 - 环境
- ES6 - 语法
- ES6 - 变量
- ES6 - 运算符
- ES6 - 决策
- ES6 - 循环
- ES6 - 函数
- ES6 - 事件
- ES6 - Cookie
- ES6 - 页面重定向
- ES6 - 对话框
- ES6 - void 关键字
- ES6 - 页面打印
- ES6 - 对象
- ES6 - 数字
- ES6 - 布尔值
- ES6 - 字符串
- ES6 - Symbol
- ES6 - 新的字符串方法
- ES6 - 数组
- ES6 - 日期
- ES6 - 数学
- ES6 - 正则表达式
- ES6 - HTML DOM
- ES6 - 迭代器
- ES6 - 集合
- ES6 - 类
- ES6 - Map 和 Set
- ES6 - Promise
- ES6 - 模块
- ES6 - 错误处理
- ES6 - 对象扩展
- ES6 - Reflect API
- ES6 - Proxy API
- ES6 - 验证
- ES6 - 动画
- ES6 - 多媒体
- ES6 - 调试
- ES6 - 图片地图
- ES6 - 浏览器
- ES7 - 新特性
- ES8 - 新特性
- ES9 - 新特性
- ES6 有用资源
- ES6 - 快速指南
- ES6 - 有用资源
- ES6 - 讨论
ES6 - Map 和 Set
ES6 引入了两种新的数据结构——Map 和 Set。让我们详细了解一下它们。
Map
Map 是一个有序的键值对集合。Map 类似于对象。但是,Map 和对象之间存在一些区别。这些列在下面:
序号 | 对象 | Map |
---|---|---|
1 | 键不能是对象类型 | 键可以是任何类型 |
2 | 键是无序的 | 键是有序的 |
3 | 不可迭代 | 可迭代 |
语法
Map 的语法如下:
let map = new Map([iterable]) let map = new Map()
示例
以下示例使用可迭代构造函数创建一个 Map:
<script> let andy = {ename:"Andrel"}, varun = {ename:"Varun"}, prijin = {ename:"Prijin"} let empJobs = new Map([ [andy,'Software Architect'], [varun,'Developer']] ); console.log(empJobs) </script>
以上代码的输出如下:
{{…} => "Software Architect", {…} => "Developer"}
检查 Map 的大小
size 属性可用于确定 Map 中存储的值的数量。
语法
检查 Map 大小的语法如下:
map_name.size
示例
<script> let daysMap = new Map(); daysMap.set('1', 'Monday'); daysMap.set('2', 'Tuesday'); daysMap.set('3', 'Wednesday'); console.log(daysMap.size); </script>
以上代码的输出如下:
3
以下是一些可用于操作 Map 的常用方法:
序号 | 对象 & Map |
---|---|
1 |
set(key,value)
向 Map 添加键和值 |
2 |
get(key)
如果键匹配则返回值 |
3 |
has(key)
如果存在具有指定键的元素,则返回 true;否则返回 false |
4 |
keys()
返回一个迭代器,其中包含 Map 对象中每个元素的键 |
5 |
values()
返回一个迭代器,其中包含 Map 对象中每个元素的值 |
6 |
entries()
返回一个迭代器,其中包含 Map 中每个元素的键值对 |
7 |
delete(key)
从 Map 对象中删除指定的元素 |
WeakMap
WeakMap 是 Map 的一个小的子集。键是弱引用的,因此它只能是非原始的。如果对对象键没有引用,则它将被垃圾回收。
- 不可迭代
- 每个键都是对象类型
如果键没有引用,WeakMap 将允许垃圾回收。
语法
WeakMap 的语法如下:
new WeakMap([iterable])
示例 1
<script> let emp = new WeakMap(); emp.set(10,'Sachin');// TypeError as keys should be object </script>
示例 2
<script> let empMap = new WeakMap(); // emp.set(10,'Sachin');// Error as keys should be object let e1= {ename:'Kiran'}, e2 = {ename:'Kannan'}, e3 = {ename:'Mohtashim'} empMap.set(e1,1001); empMap.set(e2,1002); empMap.set(e3,1003); console.log(empMap) console.log(empMap.get(e2)) console.log(empMap.has(e2)) empMap.delete(e1) console.log(empMap) </script>
以上代码的输出如下:
{{…} => 1002, {…} => 1003, {…} => 1001} 1002 true {{…} => 1002, {…} => 1003}
Set
Set 是一个无序的唯一值集合。此数据结构可以包含原始类型和对象类型的值。
语法
Set 的语法如下:
new Set([iterable]) new Set()
示例
<script> let names = new Set(['A','B','C','D']); console.log(names) </script>
以上代码的输出如下:
{"A", "B", "C", "D"}
检查 Set 的大小
Set 对象的 size 属性可用于查询 Set 中的元素数量。
语法
检查 Set 大小的语法如下:
set.size
示例
<script> let names = new Set(['A','B','C','D']); console.log(names.size) </script>
以上代码的输出如下:
4
迭代 Set
我们可以使用forEach 和for...of 循环来迭代 Set。这在下面的示例中显示:
示例
<script> let names= new Set(['A','B','C','D']); //iterate using forEach console.log('forEach') names.forEach(n=>console.log(n)) console.log('for of..') //iterate using for..of for(let n of names){ console.log(n) } </script>
以上代码的输出如下:
forEach A B C D for of.. A B C D
以下方法可用于操作 Set:
序号 | 对象 & Map |
---|---|
1 |
add(element)
向 Set 添加元素 |
2 |
has(element)
如果找到元素则返回 true;否则返回 false |
3 |
delete(element)
从 Set 中删除特定元素 |
4 |
clear()
清除 Set 中的所有元素 |
WeakSet
WeakSet 弱持有对象,这意味着如果存储在 WeakSet 中的对象没有被引用,则它们将被垃圾回收。WeakSet 不可迭代,并且没有get 方法。
<script> let e1 = {ename:'A'} let e2 ={ename:'B'} let e3 ={ename:'C'} let emps = new WeakSet(); emps.add(e1); emps.add(e2) .add(e3); console.log(emps) console.log(emps.has(e1)) emps.delete(e1); console.log(emps) </script>
以上代码的输出如下:
WeakSet {{…}, {…}, {…}} true WeakSet {{…}, {…}}