ES6中Symbol、Set和Map用法详解
本文实例讲述了ES6中Symbol、Set和Map用法。分享给大家供大家参考，具体如下：
Symbol
1.Symbol是ES6引入了一种新的原始数据类型，表示独一无二的值。它是JavaScript语言的第七种数据类型，前六种分别是：undefined、null、布尔值（Boolean）、字符串（String）、数值（Number）、对象（Object）；
2.Symbol值通过Symbol函数生成，可以作为对象的属性名使用，保证不会与其他属性名产生冲突；
lets=Symbol(); typeofs//symbol
ps：上面代码表示创建一个Symbol变量，值得注意的是，Symbol函数前不能使用new命令，否则会报错，也就是说Symbol是一个原始类型的值，不是对象，也不能添加属性；
3.Symbol函数可以接受一个字符串作为参数，表示对Symbol实例的描述，主要用于区分不同的Symbol变量；
lets1=Symbol('a');
lets2=Symbol('b');
s1.toString()//'Symbol(a)'
s2.toString()//'Symbol(b)'
ps：Symbol函数的参数只是表示对当前Symbol值的描述，因此相同参数的Symbol函数的返回值是不相等的
lets1=Symbol('a');
lets2=Symbol('a');
s1===s2//false
4.Symbol值不能与其他类型的值进行运算，但可以转为布尔值，但是不能转为数值；
lets=Symbol(); s+'2'//CannotconvertaSymbolvaluetoastring Boolean(s)//true !s//false
5.用于对象的属性名，可以保证不会出现同名的属性，对于一个对象由多个模块构成的情况非常有用，能防止某一个键被不小心改写或覆盖；值得注意的是，Symbol值作为对象属性名时，不能用点运算符，因为点运算符后面是一个字符串；
lets=Symbol();
letobj={};
obj[s]='helloworld';
//或者
letobj={
[s]:'helloworld'
}
obj.s//undefined
obj[s]//helloworld
6.Symbol作为属性名，不会被常规方法遍历得到，即该属性不会出现在for...in、for...of循环中，也不会被Object.keys()、Object.getOwnPropertyNames()、JSON.stringify()返回，但是，它并不是私有属性，可以使用Object.getOwnPropertySymbols方法，可以获取指定对象的所有Symbol属性名；
varobj={};
vara=Symbol('a');
varb=Symbol('b');
obj[a]='Hello';
obj[b]='World';
obj.c='Mine';
for(letkeyinobj){
console.log(key)//c
}
varobjectSymbols=Object.getOwnPropertySymbols(obj);
console.log(objectSymbols)//[Symbol(a),Symbol(b)]
7.Symbol.for方法接受一个字符串作为参数，然后搜索有没有以该参数作为名称的Symbol值。如果有，就返回这个Symbol值，否则就新建并返回一个以该字符串为名称的Symbol值；它与Symbol()不同的是，Symbol.for()不会每次调用就返回一个新的Symbol类型的值，而是会先检查给定的key是否已经存在，如果不存在才会新建一个值，而Symbol()每次都会返回3不同的Symbol值；
Symbol.for("name")===Symbol.for("name")
//true
Symbol("name")===Symbol("name")
//false
8.Symbol.keyFor方法返回一个已登记的Symbol类型值的key，而Symbol()写法是没有登记机制的；
vars1=Symbol.for("name");
Symbol.keyFor(s1)//"name"
vars2=Symbol("name");
Symbol.keyFor(s2)//undefined
ps：Symbol.for为Symbol值登记的名字，是全局环境的，可以在不同的iframe或serviceworker中取到同一个值
Set和Map
1.ES6提供了新的数据结构Set。它类似于数组，但是成员的值都是唯一的，没有重复的值，它本身是一个构造函数，用来生成Set数据结构。
lets=newSet([1,2,3,4,5,2,2,3,5]); s//[1,2,3,4,5]
2.可以使用add(key)方法可以添加元素到Set中，可以重复添加，但不会有效果，值得注意的是向Set加入值的时候，不会发生类型转换，即5和"5"是两个不同的值，但在Set内部，两个NaN是相等
lets=newSet([1,2,3]);
s.add(4)//[1,2,3,4]
s.add(4)//[1,2,3,4]
s.add(5)//[1,2,3,4,5]
s.add('5')//[1,2,3,4,5,"5"]
s.add(NaN)//[1,2,3,4,5,"5",NaN]
s.add(NaN)//[1,2,3,4,5,"5",NaN]
3.可以利用Set数据不重复的特性，提供一种新的数组去重方法
//去除数组的重复成员 [...newSet(array)] [...newSet([1,2,2,3,3,4,5,5])]//[1,2,3,4,5]
4.Set常见的操作方法有：
add(value)：添加某个值，返回Set结构本身。
delete(value)：删除某个值，返回一个布尔值，表示删除是否成功。
has(value)：返回一个布尔值，表示该值是否为Set的成员。
clear()：清除所有成员，没有返回值。
s.add(1).add(2).add(2); //注意2被加入了两次 s.size//2 s.has(1)//true s.has(2)//true s.has(3)//false s.delete(2); s.has(2)//false
5.Set结构的实例有四个遍历方法，可以用于遍历成员。
keys()：返回键名的遍历器
values()：返回键值的遍历器
entries()：返回键值对的遍历器
forEach()：使用回调函数遍历每个成员
需要特别指出的是，Set的遍历顺序就是插入顺序。这个特性有时非常有用，比如使用Set保存一个回调函数列表，调用时就能保证按照添加顺序调用。
letset=newSet(['red','green','blue']);
for(letitemofset.keys()){
console.log(item);
}
//red
//green
//blue
for(letitemofset.values()){
console.log(item);
}
//red
//green
//blue
for(letitemofset.entries()){
console.log(item);
}
//["red","red"]
//["green","green"]
//["blue","blue"]
6.ES6提供了Map数据结构，它类似于对象，也是键值对的集合，但是“键”的范围不限于字符串，各种类型的值（包括对象）都可以当作键，是一种更完善的Hash结构实现。如果你需要“键值对”的数据结构，Map比Object更合适；
7.Map常见的操作方法有：
set(key，val)：添加某个值，返回Map结构本身。
get(key)： 读取某个键，如果该键未知，则返回undefined
delete(key)： 删除某个键，返回一个布尔值，表示删除是否成功。
has(key)： 返回一个布尔值，表示该值是否为Map的键。
clear(): 清除所有成员，没有返回值。
constm=newMap();
consto={str:'HelloWorld'};
m.set(o,'content')
m.get(o)//"content"
m.has(o)//true
m.delete(o)//true
m.has(o)//false
8.只有对同一个对象的引用，Map结构才将其视为同一个键
constmap=newMap(); constk1=['a']; constk2=['a']; map.set(k1,111).set(k2,222); map.get(k1)//111 map.get(k2)//222
上面例子表明，Map的键实际上是跟内存地址绑定的，只要内存地址不一样，就视为两个键，因为k1和k2是两个不同的对象，放在不同的内存地址中，所以Map视为不同的键
9.Map结构原生提供三个遍历器生成函数和一个遍历方法。
keys()：返回键名的遍历器。
values()：返回键值的遍历器。
entries()：返回所有成员的遍历器。
forEach()：遍历Map的所有成员。
ps：Map的遍历顺序就是插入顺序，这里就不示例了，大家自己动手实践一下。
10.可以使用扩展运算符（...）将Map转换为数组，反过来，将数组传入Map构造函数，就可以转为Map了
//Map转数组
constmap=newMap();
map.set('name','hello').set({},'world');
[...map]//[["name","hello"],[{},"world"]]
//数组转Map
constmap=newMap([["name","hello"],[{},"world"]]);
map//{"name"=>"hello",Object{}=>"world"}
感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具：http://tools.jb51.net/code/HtmlJsRun测试上述代码运行效果。
更多关于JavaScript相关内容可查看本站专题：《javascript面向对象入门教程》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》
希望本文所述对大家JavaScript程序设计有所帮助。