- ES6 教程
- ES6 - 主页
- ES6 - 概述
- ES6 - 环境
- ES6 - 语法
- ES6 - 变量
- ES6 - 运算符
- ES6 - 决策
- ES6 - 循环
- ES6 - 函数
- ES6 - 事件
- ES6 - Cookie
- ES6 - 页面重定向
- ES6 - 对话框
- ES6 - 无效关键字
- ES6 - 页面打印
- ES6 - 对象
- ES6 - 数字
- ES6 - 布尔值
- ES6 - 字符串
- ES6 - 符号
- ES6 - 新的字符串方法
- ES6 - 数组
- ES6 - 日期
- ES6 - 数学
- ES6 - 正则表达式
- ES6 - HTML DOM
- ES6 - 迭代器
- ES6 - 集合
- ES6 - 类
- ES6 - 地图和集合
- ES6 - 承诺
- ES6 - 模块
- ES6 - 错误处理
- ES6 - 对象扩展
- ES6 - 反射 API
- ES6 - 代理 API
- ES6 - 验证
- ES6 - 动画
- ES6 - 多媒体
- ES6 - 调试
- ES6 - 图像映射
- ES6 - 浏览器
- ES7 - 新特性
- ES8 - 新特性
- ES9 - 新特性
- ES6 有用资源
- ES6 - 快速指南
- ES6 - 有用的资源
- ES6 - 讨论
ES6 - 集合
ES6 引入了两种新的数据结构:Map 和 Set。
映射- 此数据结构可以将键映射到值。
集合- 集合类似于数组。然而,集合不鼓励重复。
地图
Map 对象是一个简单的键/值对。映射中的键和值可以是基元或对象。
以下是相同的语法。
new Map([iterable])
参数 iterable 表示任何可迭代对象,其元素由键/值对组成。映射是有序的,即它们按照插入的顺序遍历元素。
地图属性
先生编号 | 属性及描述 |
---|---|
1 |
地图.prototype.size
此属性返回 Map 对象中键/值对的数量。 |
了解基本的地图操作
set() 函数设置 Map 对象中键的值。set() 函数有两个参数,即键和值。该函数返回Map对象。
has() 函数返回一个布尔值,指示是否在 Map 对象中找到指定的键。该函数接受一个键作为参数。
var map = new Map(); map.set('name','Tutorial Point'); map.get('name'); // Tutorial point
上面的示例创建了一个地图对象。该地图只有一个元素。元素键由name表示。键映射到值教程点。
注意- 映射区分相似的值,但具有不同的数据类型。换句话说,整数键 1被认为与字符串键“1”不同。考虑以下示例以更好地理解这个概念
var map = new Map(); map.set(1,true); console.log(map.has("1")); //false map.set("1",true); console.log(map.has("1")); //true
输出
false true
set ()方法也是可链接的。考虑以下示例。
var roles = new Map(); roles.set('r1', 'User') .set('r2', 'Guest') .set('r3', 'Admin'); console.log(roles.has('r1'))
输出
True
上面的例子定义了一个地图对象。该示例链接 set() 函数来定义键/值对。
get ()函数用于检索指定键对应的值。
还可以向 Map 构造函数传递一个数组。此外,map还支持使用展开运算符来表示数组。
例子
var roles = new Map([ ['r1', 'User'], ['r2', 'Guest'], ['r3', 'Admin'], ]); console.log(roles.get('r2'))
成功执行上述代码后将显示以下输出。
Guest
注意- 如果指定的键在映射中不存在,则 get() 函数返回未定义。
如果键已存在于映射中,则 set() 会替换该键的值。考虑以下示例。
var roles = new Map([ ['r1', 'User'], ['r2', 'Guest'], ['r3', 'Admin'], ]); console.log(`value of key r1 before set(): ${roles.get('r1')}`) roles.set('r1','superUser') console.log(`value of key r1 after set(): ${roles.get('r1')}`)
成功执行上述代码后将显示以下输出。
value of key r1 before set(): User value of key r1 after set(): superUser
映射方法
先生编号 | 方法及说明 |
---|---|
1 |
Map.prototype.clear()
从 Map 对象中删除所有键/值对。 |
2 |
Map.prototype.delete(key)
删除与该键关联的任何值并返回 Map.prototype.has(key) 之前返回的值。 Map.prototype.has(key) 之后将返回 false。 |
3 |
Map.prototype.entries()
返回一个新的 Iterator 对象,其中包含按插入顺序排列的 Map 对象中每个元素的 [key, value]数组。 |
4 |
Map.prototype.forEach(callbackFn[, thisArg])
按插入顺序为 Map 对象中存在的每个键值对调用一次callbackFn 。如果为 forEach 提供了 thisArg 参数,它将用作每个回调的“this”值。 |
5 |
Map.prototype.keys()
返回一个新的 Iterator 对象,其中包含按插入顺序排列的 Map 对象中每个元素的键。 |
6 |
Map.prototype.values()
返回一个新的 Iterator 对象,其中包含按插入顺序排列的 Map 对象中每个元素的 [key, value]数组。 |
for…of 循环
以下示例说明了使用 for...of 循环遍历映射。
'use strict' var roles = new Map([ ['r1', 'User'], ['r2', 'Guest'], ['r3', 'Admin'], ]); for(let r of roles.entries()) console.log(`${r[0]}: ${r[1]}`);
成功执行上述代码后将显示以下输出。
r1: User r2: Guest r3: Admin
弱地图
弱映射与映射相同,但有以下例外 -
它的键必须是对象。
弱映射中的键可以被垃圾收集。垃圾收集是清除程序中未被引用的对象所占用的内存的过程。
弱映射无法迭代或清除。
示例:弱映射
'use strict' let weakMap = new WeakMap(); let obj = {}; console.log(weakMap.set(obj,"hello")); console.log(weakMap.has(obj));// true
成功执行上述代码后将显示以下输出。
WeakMap {} true
套
集合是一种 ES6 数据结构。它类似于数组,但不能包含重复项。换句话说,它可以让您存储唯一的值。集合支持原始值和对象引用。
就像映射一样,集合也是有序的,即元素按照其插入顺序进行迭代。可以使用以下语法初始化集合。
设置属性
先生编号 | 属性及描述 |
---|---|
1 |
设置原型大小
返回 Set 对象中的值的数量。 |
设置方法
先生编号 | 方法及说明 |
---|---|
1 |
Set.prototype.add(值)
将具有给定值的新元素附加到 Set 对象。返回 Set 对象。 |
2 |
Set.prototype.clear()
从 Set 对象中删除所有元素。 |
3 |
Set.prototype.delete(值)
删除与该值关联的元素。 |
4 |
Set.prototype.entries()
返回一个新的 Iterator 对象,其中包含Set 对象中每个元素的 [value, value]数组(按插入顺序排列)。这与 Map 对象类似,因此每个条目的键和值都具有相同的值。 |
5 |
Set.prototype.forEach(callbackFn[, thisArg])
按插入顺序对 Set 对象中存在的每个值调用一次回调Fn 。如果为 forEach 提供了athisArg参数,它将用作每个回调的“this”值。 |
6 |
Set.prototype.has(值)
返回一个布尔值,断言 Set 对象中是否存在具有给定值的元素。 |
7 |
Set.prototype.values()
返回一个新的 Iterator 对象,其中包含按插入顺序排列的 Set 对象中每个元素的值。 |
弱集
弱集只能包含对象,并且它们包含的对象可能会被垃圾收集。与弱映射一样,弱集不能迭代。
示例:使用弱集
'use strict' let weakSet = new WeakSet(); let obj = {msg:"hello"}; weakSet.add(obj); console.log(weakSet.has(obj)); weakSet.delete(obj); console.log(weakSet.has(obj));
成功执行上述代码后将显示以下输出。
true false
迭代器
迭代器是一种对象,它允许一次访问一个对象的集合。set 和 map 都有返回迭代器的方法。
迭代器是具有next()方法的对象。当调用 next() 方法时,它返回一个具有'value'和'done'属性的对象。'done' 是布尔值,读取集合中的所有项目后将返回 true
示例 1:集合和迭代器
var set = new Set(['a','b','c','d','e']); var iterator = set.entries(); console.log(iterator.next())
成功执行上述代码后将显示以下输出。
{ value: [ 'a', 'a' ], done: false }
由于该集合不存储键/值,因此值数组包含相似的键和值。由于有更多元素需要读取,done 将为 false。
示例 2:集合和迭代器
var set = new Set(['a','b','c','d','e']); var iterator = set.values(); console.log(iterator.next());
成功执行上述代码后将显示以下输出。
{ value: 'a', done: false }
示例 3:集合和迭代器
var set = new Set(['a','b','c','d','e']); var iterator = set.keys(); console.log(iterator.next());
成功执行上述代码后将显示以下输出。
{ value: 'a', done: false }
示例 4:映射和迭代器
var map = new Map([[1,'one'],[2,'two'],[3,'three']]); var iterator = map.entries(); console.log(iterator.next());
成功执行上述代码后将显示以下输出。
{ value: [ 1, 'one' ], done: false }
示例 5:映射和迭代器
var map = new Map([[1,'one'],[2,'two'],[3,'three']]); var iterator = map.values(); console.log(iterator.next());
成功执行上述代码后将显示以下输出。
{value: "one", done: false}
示例 6:映射和迭代器
var map = new Map([[1,'one'],[2,'two'],[3,'three']]); var iterator = map.keys(); console.log(iterator.next());
成功执行上述代码后将显示以下输出。
{value: 1, done: false}