前端知识点回顾——Javascript篇(四)

Symbol

• 为什么需要symbol

  ES5里面对象的属性名都是字符串，如果你需要使用一个别人提供的对象，你对这个对象有哪些属性也不是很清楚，但又想为这个对象新增一些属性，那么你新增的属性名就很可能和原来的属性名发送冲突，显然我们是不希望这种情况发生的。所以，我们需要确保每个属性名都是独一无二的，这样就可以防止属性名的冲突了。因此，ES6里就引入了Symbol，用它来产生一个独一无二的值。

• symbol是什么

  Symbol是ES6引入的一种原始数据类型，接受一个字符串参数，来对产生的Symbol值进行描述，方便我们区分不同的Symbol值。

  let s1 = Symbol('s1');
  let s2 = Symbol('s2');
  console.log(s1);  // Symbol(s1)
  console.log(s2);  // Symbol(s2)
  s1 === s2;  //  false
  let s3 = Symbol('s2');
  s2 === s3;  //  false
  

• 使用for...in和for...of都无法遍历到Symbol值的属性，Symbol值作为对象的属性名，也无法通过Object.keys()、Object.getOwnPropertyNames()来获取了。我们可以用Object.getOwnPropertySymbols()方法获取一个对象上的Symbol属性名。也可以使用Reflect.ownKeys()返回所有类型的属性名，包括常规属性名和 Symbol属性名。

• Symbol.for() 和 Symbol.keyFor()

  Symbol.for()函数要接受一个字符串作为参数，先搜索有没有以该参数作为名称的Symbol值，如果有，就直接返回这个Symbol值，否则就新建并返回一个以该字符串为名称的Symbol值。

  Symbol.keyFor()函数是用来查找一个Symbol值的登记信息的，Symbol()写法没有登记机制，所以返回undefined；而Symbol.for()函数会将生成的Symbol值登记在全局环境中，所以Symbol.keyFor()函数可以查找到用Symbol.for()函数生成的Symbol值。

  let s1 = Symbol.for("s11");
  let s2 = Symbol.for("s22");
  let s3 = Symbol.for("s22");
  console.log(s1===s2)//false
  console.log(s2===s3)//true
  
  let s4 = Symbol("s33");
  
  console.log(Symbol.keyFor(s4))//undefined
  console.log(Symbol.keyFor(s2))//"s22"
  console.log(Symbol.keyFor(s1))//"s11"
  

Set

它类似于数组，但是成员的值都是唯一的，没有重复的值。成员不发生类型转换，NaN认为等于自身。

Set 函数可以接受一个数组作为参数，用来初始化。

const set = new Set(array);

用set进行数组去重：

[...new Set(array)]

实例属性

• Set.prototype.constructor：构造函数，默认就是Set函数。
• Set.prototype.size：返回Set实例的成员总数。

四个操作方法

• add(value)：添加某个值，返回 Set 结构本身。
• delete(value)：删除某个值，返回一个布尔值，表示删除是否成功。
• has(value)：返回一个布尔值，表示该值是否为Set的成员。
• clear()：清除所有成员，没有返回值

遍历操作

• keys()：返回键名的遍历器（配合for of 使用）
• values()：返回键值的遍历器（配合for of 使用）
• entries()：返回键值对的遍历器（配合for of 使用）
• forEach()：使用回调函数遍历每个成员

Map

它类似于对象，也是键值对的集合，但是“键”的范围不限于字符串，各种类型的值（包括对象）都可以当作键。也就是说，Object 结构提供了“字符串—值”的对应，Map 结构提供了“值—值”的对应，是一种更完善的 Hash 结构实现。如果你需要“键值对”的数据结构，Map 比 Object 更合适。

作为构造函数，Map 也可以接受一个数组作为参数。该数组的成员是一个个表示键值对的数组。

const map = new Map([
  ['name', '张三'],
  ['title', 'Author']
]);

map.size // 2
map.has('name') // true
map.get('name') // "张三"
map.has('title') // true
map.get('title') // "Author"

注意，只有对同一个对象的引用，Map 结构才将其视为同一个键。这一点要非常小心。

const map = new Map();

map.set(['a'], 555);
map.get(['a']) // undefined

实例的属性和操作方法

• size属性，返回成员总数
• set(key,value) 设置键值对，返回Map结构
• get(key) 读取key对应的值，找不到就是undefined
• has(key) 返回布尔值，表示key是否在Map中
• delete(key) 删除某个键，返回true，失败返回false
• clear() 清空所有成员，没有返回值

遍历方法

• keys()：返回键名的遍历器。
• values()：返回键值的遍历器。
• entries()：返回所有成员的遍历器。
• forEach()：遍历 Map 的所有成员。