ES6 - 集合 ES6 - HTML DOM ES6 - 类 ES6 集合 ES6引入了两个新的数据结构:地图和集合。 Maps - 此数据结构可将键映射到值。 Sets - 集合与数组类似。但是,套不鼓励重复。 Maps 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 Sets 一组是一个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 - HTML DOM ES6 - 类