编程宝库 - 技术改变世界

编程宝库

Search

ES6

ES6 HTML DOM

ES6 类

ES6 集合

ES6引入了两个新的数据结构：Map和Set。

Map - 此数据结构可将键映射到值。
Set - 集合与数组类似。但是，套不鼓励重复。

Map

Map对象是一个简单的键/值对。地图中的键和值可以是基元或对象。

以下是相同的语法。

new Map([iterable])

参数iterable表示其元素包含键/值对的任何可迭代对象。地图是有序的，即它们按照它们插入的顺序遍历元素。

Map 属性

序号	属性 & 描述
1	Map.prototype.size 该属性返回Map对象中键/值对的数量。

了解基本的地图操作

set（）函数为Map对象中的键设置值。set（）函数接受两个参数，即密钥及其值。该函数返回Map对象。

has（）函数返回一个布尔值，指示在Map对象中是否找到指定的键。这个函数将一个键作为参数。

var map = new Map();
map.set('name','Tutorial Point');
map.get('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

上面的例子定义了一个地图对象。该示例链接set（）函数来定义键/值对。

get（）函数用于检索与指定键相对应的值。

Map构造函数也可以传递一个数组。此外，map还支持使用spread运算符来表示数组。

示例

var roles = new Map([
   ['r1', 'User'],
   ['r2', 'Guest'],
   ['r3', 'Admin'],
]);  
console.log(roles.get('r2'))

在成功执行上述代码时，会显示以下输出。

Guest

注 - 如果指定的键在地图中不存在，则get（）函数返回undefined。

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（键）之前返回的值。之后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

Weak Maps

Weak Map与Map相同，但以下情况除外 -

它的键必须是对象。
Weak Map中的键可以是垃圾收集。垃圾收集是清除程序中未引用对象占用的内存的过程。
弱映射不能被迭代或清除。

示例：弱映射

'use strict'
let weakMap = new WeakMap();
let obj = {};
console.log(weakMap.set(obj,"hello"));  
console.log(weakMap.has(obj));// true

在成功执行上述代码时，会显示以下输出。

WeakMap {}
true

Set

一组是一个ES6数据结构。它与数组类似，只是它不能包含重复项。换句话说，它可以让你存储唯一的值。集支持原始值和对象引用。

就像Map一样，集合也是有序的，即元素按照它们的插入顺序迭代。一组可以使用以下语法进行初始化。

Set 属性

序号	属性 & 描述
1	Set.prototype.size 返回Set对象中的值的数量。

Set 方法

序号	Method & Description
1	Set.prototype.add(value) 将具有给定值的新元素附加到Set对象。返回Set对象。
2	Set.prototype.clear() 从Set对象中删除所有元素。
3	Set.prototype.delete(value) 删除与该值关联的元素。
4	Set.prototype.entries() 以插入顺序返回一个新的Iterator对象，该对象包含Set对象中每个元素的[value，value]数组。这与Map对象保持相似，以便每个条目在此处具有与其键和值相同的值。
5	Set.prototype.forEach(callbackFn[, thisArg]) 以插入顺序为Set对象中存在的每个值调用一次callbackFn。如果athisArg参数提供给forEach，它将用作每个回调的“this”值。
6	Set.prototype.has(value) 返回一个布尔值，断言一个元素是否与给定值一起出现在Set对象中。
7	Set.prototype.values() 返回一个新的Iterator对象，该对象包含广告素材顺序中Set对象中每个元素的值。

Weak 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

迭代器

Iterator是一个允许一次访问一个对象集合的对象。set和map都有返回迭代器的方法。

迭代器是next（）方法的对象。当next（）方法被调用时，它会返回一个具有'value'和'done'属性的对象。'done'是布尔型的，在读取集合中的所有项目后，这将返回true

例1：Set和Iterator

var  set = new Set(['a','b','c','d','e']);  
var iterator = set.entries();
console.log(iterator.next())

在成功执行上述代码时，会显示以下输出。

{ value: [ 'a', 'a' ], done: false }

因为该集合不存储键/值，所以该值数组包含相似的键和值。由于有更多元素需要阅读，所以完成将是错误的。

示例2：Set和Iterator

var  set = new Set(['a','b','c','d','e']);  
var iterator = set.values();
console.log(iterator.next());

在成功执行上述代码时，会显示以下输出。

{ value: 'a', done: false }

例3：Set和Iterator

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}

下一节：ES6 类

ES6 教程

面向对象是一种遵循真实世界建模的软件开发范例。面向对象是把程序视为通过称为方法的机制彼此通信的对象集合。ES6支持这些面向对象的组件。面向对象的编程概念首先，让我们理解对象 - 对象是任何实体的实时表示。根据Grad ...

ES6 HTML DOM

ES6 类