《HTML教程》-8.8-8.9教学材料

1、Map的创建与初始化Map创建十分容易，使用new关键字创建即可，而且可以在创建时初始化。◆varmap=newMap(); //声明一个Map对象◆letmap=newMap([[1,'one'],[2,'two'],[3,'three']]); //声明并初化一个Map◆letmap=newMap().set(1,'one').set(2,'two').set(3,'three');其中let用于声明一个变量，最后一种方式是对象的链式调用。后面两种方式都是在声明Map时将其初始化。2、Map的操作

Map通过get(key)方法获取指定的key对应的值，通过set(key,value)设置“键-值”对，通过delete(key)删除key对应的条目，通过clear()方法清空Map。map.get(1);//返回onemap.delete(2);//删除map中键为2的条目3、Map的遍历遍历Map有好多种方法，即可以遍历它的key的集合，也可以遍历value的集合，还可以遍历条目entries的集合，下面分别予以说明。（1）遍历Map键（key）的集合通过Map的keys()方法返回Map所有键的集合，然后通过for…of循环遍历每个键。for(letkeyofmap.keys()){console.log(key);}这种方式也可以通过get()方法获取key对应的value，也可用于间接访问Map的value的集合。（2）遍历Map值的集合通过Map的values()方法返回Map所有值的集合，然后通过for…of循环遍历每个值。for(letvalueofmap.values()){console.log(value);}（3）遍历Map的条目通过Map的entries()方法获取Map条目的集合，然后通过for…of循环遍历每个条目，其中entry[0]表示key，entry[1]表示value。for(letentryofmap.entries()){console.log(entry[0],entry[1]);}还可以通过以下方式同时访问条目的key-value对：for(let[key,value]ofmap.entries()){console.log(key,value);}这种用法比较陌生，请大家认真多写几遍，力求掌握。下面通过一个例子来说明Map的用法，代码如清单8-11所示。在清单8-11中，首先通过new关键字声明并初始化map1，这里需要注意的是初始化参数，它首先是一个数组[]，数据的元素也是一个结构为[key,value]的数组，即[ [1,"Monday"], [2,"Tuesday"], [3,"Wendesday"], [4,"Thursday"], [5,"Friday"], [6,"Saturday"], [7,"Sunday"]]类似于一个7×2的二维数组，而不一个简单的一维数组，这一点要特别注意。对于map2的声明和初始化则采用了new关键字和链式调用的方式。这里需要注意的是，在分行写的情况下，Map()后没有任何符号，它的符号在下一行，为“.”运算符，而每个set()后也是仅跟一个“.”运算符，最后是一个分号表示该声明语句结束。格式如下：varmap2=newMap() .set('2015',{animal:'马',leep:"平年"}) .set("2016",{animal:'猴',leep:'闰年'}) .set("2017",{animal:'鸡',leep:'平年'});这种格式的写法要特别注意，不要每写一行“顺便”以分号结束，就会产生语法错误！这一点要特别注意。通过for…of循环遍历map2的条目entries的方法输出map2的值十分简单，代码如下：for(let[key,value]ofmap2.entries()){ console.log(key,value); }很遗憾，虽然简单，但输入的结果不能令人满意：2015Object{animal:"马",leep:"平年"}2016Object{animal:"猴",leep:"闰年"}2017Object{animal:"鸡",leep:"平年"}它直接输出了Map条目中键的内容，而且还加入了使人不知所云的“Object”，不是我们要想的输出结果。解决方法：根据每个条目的key，得到对应的值，这个值是一个对象，然后遍历这个对象，按照要求构造输出内容。这里采用了遍历Map键的集合的办法：for(letkeyofmap2.keys()){ varobj=map2.get(key); varstr=key+"年是"; for(letpinobj){ switch(p){ case'animal':str+=obj[p]+"年";break; case'leep':str+="为"+obj[p];break; } } console.log(str);}首先，通过for…of遍历map2的键的集合，即遍历map2.keys()。每遍历到一个key，就通过get()方法取出对应的值，它是一个对象。然后通过for…in循环遍历这个对象的所有属性，并输出属性的值。。为了得到“XXXX年是X年为平/闰年”输出格式，对值对象的属性分别进行了处理，当属性为animal时，以str+=obj[p]+"年"拼接属性值；当属性为leep时，以str+="为"+obj[p]拼接属性值，最后得到的输出结果为：2015年是马年为平年2016年是猴年为闰年2017年是鸡年为平年这样的结果就比较容易接受。最后，还要注意一点是，这个例子在网页中看不到任何结果，结果显示在浏览器的控制台（见4.8节）中。清单8-11完整的源代码见随书源码的Listing8-12.html。最后还要注意的是，这些新增的对象，并不是所有的浏览器都支持的，有的浏览器在执行这些程序时可能会报告错误或异常，这是正常现象。这里的源程序全部在Chrome浏览器49.0.2623.110m版本中测试通过。这个版本的Chrome可以说是“较低”的版本了，已经不再受支持了^_^。言外之意就是，只要是现行的Chrome浏览器都可以正常运行本书的示例源程序。8.8.2SetSet是一个集合，可以存放任意类型的数据，与数学中的概念类似，不能包含相同的元素。通过构造函数创建Set对象；通过add()方法向集合中存放数据；通过has()方法判断是否包含指定的元素，delete()方法删除指定的元素。Set有一个size属性，指明集合中元素的个数。Set的用法1、声明和初始化letset=newSet();//声明一个空的Setletset=newSet(['red','green','blue']);//声明并初始化一个3元素的Set2、常用操作

（1）遍历Setfor(varxofset){console.log(x);}（2）扩展Set（Set转换成数组）

letset=newSet(['red','green','blue']);letarr=[...set];console.log(arr);//输出结果：['red','green','blue']其中，…是扩展操作符，对集合做扩展运算得到一个对应的数组。（3）数组转换成Set

letarr=[3,5,2,2,5,5];letunique=[...newSet(arr)];//结果Set：3，5，2（即不包含重复的元素）把数组作为Set的参数创建Set对象，并对该对象做扩展运算，得到一个对应的Set。（4）映射和过滤letset=newSet([1,2,3]);set=newSet([...set].map(x=>x*2));Set对象没有map()和filter()方法，需要把Set转换成数组，再调用映射方法，映射操作的结果是：2，4，6。同样的，过滤操作也要先把Set转换成数组，再调用filter方法：letset=newSet([1,2,3,4,5]);set=newSet([...set].filter(x=>(x%2)==0));过滤结果为：2，4。Map和Set的区别Map和Set还有对应的WeakMap和WeakSet，它们都有相同的接口，但有许多不同的地方：◆WeakMap不可遍历，也不能调用clear()方法清空它；◆WeakSet不可遍历，循环和清空。其实，JavaScript还有许多其他对象，由于篇幅所限，不再一一讲述，需要时候查一下相关书箱或者JavaScript手册即可。8.9总结通过本章的学习你需要掌握以下内容：◆Window对象的常用操作：获取窗口本身的信息（大小、位置等）；窗口操作（打开、关闭、缩放）。

◆掌握window对象提供的两个定时函数的使用。

◆掌握Location、History、Date和String对象的用法。

◆掌握RegExp正则表达式对象的用法，并熟