ES6: Set解析

1. Set 它本身是一个构造函数, 用来生成 Set 数据结构;

let createSet = new Set();
let arr = [1, 2, 3, 1, 5, 5, 2];
arr.forEach((item, index) => {
   return createSet.add(item);
})
/** for...of 循环是 ES6 引入的新语法。*/
for (let i of s) {
   console.log(i);  // => 1, 2, 3, 5
} 
/**
  上面代码通过 add() 向 Set结构: createSet中 添加元素, 其打印结果表明: Set 结构并不会添加重复的值;
*/

2. Set 函数可接受一个 数组(或具有 iterator 接口的其他数据结构) 作为参数, 用来进行初始化;

• 关于 iterator:

  • 因为遍历数组时, 可以采用下标循环, 而遍历 Map 和 Set 就无法使用下标, 为了统一集合类型, ES6引入了 iterable 类型;
  • 具有 iterator 类型的集合 可以通过 ES6新语法: for...of 语法 循环遍历;
  • Array, Map, Set 都属于 iterable 类型;

• 示例

  • 示例1:

    let mySet = new Set([1, 2, 3, 4, 3, 2]);  // => Set(4) {1, 2, 3, 4} 
    console.log(mySet.size);  // => 4
    console.log([...mySet]);  // => [1, 2, 3, 4]  数组去重
    console.log(Array.from(mySet));  // => [1, 2, 3, 4]  也是数组去重
    

  • 示例2:

    /** 接收类数组对象作为 参数 */
    let domSet = new Set(document.querySelectorAll('div'));
    /** 类似于: */
    let createSet = new Set();
    document.querySelectorAll('div').forEach(item => createSet.add(item));
    

• 扩展:

  1. 向 Set 添加值时, 并不会发生 数据类型的转换, 因此, 5 与 '5' 是两个不同的值;

  2. Set 内部再进行判断两个值 是否不同时, 使用一种叫: "Same-value-zero equality" 的算法, 这种算法精确等于 全等运算符: '===',

     • 区别在于: 向 Set 加入值时认为 NaN 全等于自身, 而全等运算符认为 NaN 不全等于自身;

  let otherSet = new Set();
  let x = NaN;
  let y = NaN;
  otherSet.add(x);
  otherSet.add(y);
  otherSet.add(5);
  otherSet.add('5');
  console.log(otherSet);  // => Set(3) {NaN, 5, '5'};  并没有添加两个NaN, 因为加入值时, 认为 NaN 全等于自身
  

  3. 具体更多关于 Set 的解析, 可参考大神 阮一峰的文章: http://es6.ruanyifeng.com/#docs/set-map](http://es6.ruanyifeng.com/#docs/set-map