HTML5技术

es6笔记5^_^set、map、iterator - webNick(2)

字号+ 作者:H5之家 来源:H5之家 2017-01-20 14:00 我要评论( )

let m = new Map();o = {p: "Hello World" };m.set(o, "content" )console.log(m);console.log(m.get(o)) // "content" 实例的属性和操作方法 Map结构的实例有以下属性和操作方法。 size:返回成员总数。 set(key,

let m = new Map(); o = {p: "Hello World"}; m.set(o, "content") console.log(m); console.log(m.get(o))// "content"

实例的属性和操作方法 Map结构的实例有以下属性和操作方法。
  size:返回成员总数。
  set(key, value):设置key所对应的键值,然后返回整个Map结构。如果key已经有值,则键值会被更新,否则就新生成该键。
  get(key):读取key对应的键值,如果找不到key,返回undefined。
  has(key):返回一个布尔值,表示某个键是否在Map数据结构中。
  delete(key):删除某个键,返回true。如果删除失败,返回false。
  clear():清除所有成员,没有返回值。
  set()方法返回的是Map本身,因此可以采用链式写法。

let map = new Map() .set(1, 'a') .set(2, 'b') .set(3, 'c'); console.log(map); //下面是has()和delete()的例子。 let m = new Map(); m.set("edition", 6) // 键是字符串 m.set(262, "standard") // 键是数值 m.set(undefined, "nah") // 键是undefined let hello = function() {console.log("hello");} m.set(hello, "Hello ES6!") // 键是函数 m.has("edition") // true m.has("years") // false m.has(262) // true m.has(undefined) // true console.log(m.get(undefined)); m.has(hello) // true m.delete(undefined) m.has(undefined) // false m.get(hello) // Hello ES6! m.get("edition") // 6 //下面是size属性和clear方法的例子。 map.set('foo', true); map.set('bar', false); map.size // 2 map.clear() map.size // 0 console.log(Array.from(m));//Array

遍历方法   Map原生提供三个遍历器。
  keys():返回键名的遍历器。
  values():返回键值的遍历器。
  entries():返回所有成员的遍历器。
使用示例:

let map = new Map([ ['F', 'no'], ['T', 'yes'], ]); for (let key of map.keys()) { console.log(key); } // "F" // "T" for (let value of map.values()) { console.log(value); } // "no" // "yes" for (let item of map.entries()) { console.log(item[0], item[1]); } // "F" "no" // (let [key, value] of map.entries()) { console.log(key, value); } (let [key, value] of map) { console.log(key, value); }

Map结构转为数组结构,比较快速的方法是结合使用扩展运算符(...)。

let map = new Map([ [1, 'one'], [2, 'two'], [3, 'three'] ]); [...map.keys()]; // [1, 2, 3] [...map.values()]; // ['one', 'two', 'three'] [...map.entries()]; // [[1,'one'], [2, 'two'], [3, 'three']] [...map] // [[1,'one'], [2, 'two'], [3, 'three']] //此外,Map还有一个forEach方法,与数组的forEach方法类似,也可以实现遍历。 map.forEach(function(value, key){ console.log(key+':'+value); });

四、WeakMap WeakMap结构与Map结构基本类似,唯一的区别是它只接受对象作为键名(null除外),不接受原始类型的值作为键名,而且键名所指向的对象,不计入垃圾回收机制。set()和get()分别用来添加数据和获取数据:

let map = new WeakMap(); let element={}; map.set(element, "Original"); // 下面就可以使用了 let value = map.get(element); console.log(value); // "Original"

WeakMap与Map在API上的区别主要是两个:   一是没有遍历操作(即没有key()、values()和entries()方法),也没有size属性;
  二是无法清空,即不支持clear方法。这与WeakMap的键不被计入引用、被垃圾回收机制忽略有关。
因此,WeakMap只有四个方法可用:get()、set()、has()、delete()。
五、Iterator(遍历器)的概念 遍历器(Iterator)就是统一的接口机制,来处理所有不同的数据结构。
Iterator的作用有三个:   一是为各种数据结构,提供一个统一的、简便的访问接口;
  二是使得数据结构的成员能够按某种次序排列;
  三是ES6创造了一种新的遍历命令for...of循环,Iterator接口主要供for...of消费。

Iterator的遍历过程是这样的。   创建一个指针,指向当前数据结构的起始位置。也就是说,遍历器的返回值是一个指针对象。
  第一次调用指针对象的next方法,可以将指针指向数据结构的第一个成员。
  第二次调用指针对象的next方法,指针就指向数据结构的第二个成员。
  调用指针对象的next方法,直到它指向数据结构的结束位置。
  每一次调用next方法,都会返回当前成员的信息,具体来说,就是返回一个包含value和done两个属性的对象。其中,value属性是当前成员的值,done属性是一个布尔值,表示遍历是否结束。

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • es6笔记4^_^function - webNick

    es6笔记4^_^function - webNick

    2017-01-19 14:00

  • es6笔记3^_^object - webNick

    es6笔记3^_^object - webNick

    2017-01-18 11:00

  • es6笔记2^_^array - webNick

    es6笔记2^_^array - webNick

    2017-01-16 13:01

  • 读书笔记:《HTML5开发手册》Web表单 - 绿岛之北

    读书笔记:《HTML5开发手册》Web表单 - 绿岛之北

    2017-01-14 15:04

网友点评