- 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 - 集合
ES6 引入了两种新的数据结构:Map 和 Set。
Map − 这种数据结构能够将键映射到值。
Set − Set 类似于数组。但是,Set 不允许重复。
Map
Map 对象是一个简单的键值对。Map 中的键和值可以是原始值或对象。
以下是它的语法。
new Map([iterable])
参数 iterable 代表任何其元素包含键值对的可迭代对象。Map 是有序的,即它们按照插入顺序遍历元素。
Map 属性
序号 | 属性和描述 |
---|---|
1 |
Map.prototype.size
此属性返回 Map 对象中键值对的数量。 |
了解基本的 Map 操作
set() 函数设置 Map 对象中键的值。set() 函数接受两个参数,即键及其值。此函数返回 Map 对象。
has() 函数返回一个布尔值,指示 Map 对象中是否存在指定的键。此函数接受一个键作为参数。
var map = new Map(); map.set('name','Tutorial Point'); map.get('name'); // Tutorial point
上面的例子创建了一个 map 对象。该 map 只有一个元素。元素键用name表示。该键映射到值Tutorial point。
注意 − Map 区分具有相似值但数据类型不同的值。换句话说,整数键 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
上面的例子定义了一个 map 对象。该示例将 set() 函数链接起来以定义键值对。
get() 函数用于检索与指定键对应的值。
Map 构造函数也可以传入一个数组。此外,map 也支持使用扩展运算符来表示数组。
示例
var roles = new Map([ ['r1', 'User'], ['r2', 'Guest'], ['r3', 'Admin'], ]); console.log(roles.get('r2'))
上述代码成功执行后将显示以下输出。
Guest
注意 − 如果 map 中不存在指定的键,则 get() 函数返回 undefined。
如果键已存在于 map 中,则 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
Map 方法
序号 | 方法和描述 |
---|---|
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 对象中每个元素的[键,值] 数组,按插入顺序排列。 |
4 |
Map.prototype.forEach(callbackFn[, thisArg])
为 Map 对象中存在的每个键值对调用callbackFn 一次,按插入顺序排列。如果为 forEach 提供 thisArg 参数,则它将用作每个回调的“this”值。 |
5 |
Map.prototype.keys()
返回一个新的 Iterator 对象,其中包含 Map 对象中每个元素的键,按插入顺序排列。 |
6 |
Map.prototype.values()
返回一个新的 Iterator 对象,其中包含 Map 对象中每个元素的[键,值] 数组,按插入顺序排列。 |
for…of 循环
以下示例演示了使用 for…of 循环遍历 map。
'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
弱 Map
弱 Map 与 Map 相同,但以下例外:
其键必须是对象。
弱 Map 中的键可以被垃圾回收。垃圾回收是清除程序中未引用对象所占用的内存的过程。
弱 Map 无法迭代或清除。
示例:弱 Map
'use strict' let weakMap = new WeakMap(); let obj = {}; console.log(weakMap.set(obj,"hello")); console.log(weakMap.has(obj));// true
上述代码成功执行后将显示以下输出。
WeakMap {} true
Set
Set 是 ES6 数据结构。它类似于数组,区别在于它不能包含重复项。换句话说,它允许你存储唯一的值。Set 支持原始值和对象引用。
与 Map 一样,Set 也是有序的,即元素按其插入顺序进行迭代。可以使用以下语法初始化 Set。
Set 属性
序号 | 属性和描述 |
---|---|
1 |
Set.prototype.size
返回 Set 对象中的值的数量。 |
Set 方法
序号 | 方法和描述 |
---|---|
1 |
Set.prototype.add(value)
将具有给定值的新元素添加到 Set 对象。返回 Set 对象。 |
2 |
Set.prototype.clear()
删除 Set 对象中的所有元素。 |
3 |
Set.prototype.delete(value)
删除与值关联的元素。 |
4 |
Set.prototype.entries()
返回一个新的 Iterator 对象,其中包含 Set 对象中每个元素的[值,值] 数组,按插入顺序排列。这与 Map 对象保持一致,因此每个条目的键和值在这里都具有相同的值。 |
5 |
Set.prototype.forEach(callbackFn[, thisArg])
为 Set 对象中存在的每个值调用callbackFn 一次,按插入顺序排列。如果为 forEach 提供athisArg 参数,则它将用作每个回调的“this”值。 |
6 |
Set.prototype.has(value)
返回一个布尔值,表示 Set 对象中是否存在具有给定值元素。 |
7 |
Set.prototype.values()
返回一个新的 Iterator 对象,其中包含 Set 对象中每个元素的值,按插入顺序排列。 |
弱 Set
弱 Set 只能包含对象,并且它们包含的对象可能会被垃圾回收。与弱 Map 一样,弱 Set 无法迭代。
示例:使用弱 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:Set 和迭代器
var set = new Set(['a','b','c','d','e']); var iterator = set.entries(); console.log(iterator.next())
上述代码成功执行后将显示以下输出。
{ value: [ 'a', 'a' ], done: false }
由于 Set 不存储键值,因此值数组包含相似的键和值。done 将为 false,因为还有更多元素需要读取。
示例 2:Set 和迭代器
var set = new Set(['a','b','c','d','e']); var iterator = set.values(); console.log(iterator.next());
上述代码成功执行后将显示以下输出。
{ value: 'a', done: false }
示例 3:Set 和迭代器
var set = new Set(['a','b','c','d','e']); var iterator = set.keys(); console.log(iterator.next());
上述代码成功执行后将显示以下输出。
{ value: 'a', done: false }
示例 4:Map 和迭代器
var map = new Map([[1,'one'],[2,'two'],[3,'three']]); var iterator = map.entries(); console.log(iterator.next());
上述代码成功执行后将显示以下输出。
{ value: [ 1, 'one' ], done: false }
示例 5:Map 和迭代器
var map = new Map([[1,'one'],[2,'two'],[3,'three']]); var iterator = map.values(); console.log(iterator.next());
上述代码成功执行后将显示以下输出。
{value: "one", done: false}
示例 6:Map 和迭代器
var map = new Map([[1,'one'],[2,'two'],[3,'three']]); var iterator = map.keys(); console.log(iterator.next());
上述代码成功执行后将显示以下输出。
{value: 1, done: false}