ES6语法特性(三)Set集合 Map介绍

1. Set简介

  Set本身是一个构造函数,用来生成Set数据结构。
  它类似于数组,但里面的成员是唯一的,不重复的。
  向Set加入值时,不会发生类型转换,它类似于精确相等运算符(===),主要的区别是向 Set 加入值时认为NaN等于自身,而精确相等运算符认为NaN不等于自身。
  Set 可以接收一个数组做为参数,用来初始化
  方法:
  size 返回集合的元素个数
  add 添加一个元素,返回当前集合
  delete 删除元素,返回Boolen值
  has 检测集合中是否包含某个元素,返回Boolen值

1.1. 用法

1.1.1. 数组去重

    function noRepeat(arr) {
      return Array.from(new Set(arr))
      // return [...new Set(arr)]
    }  
      let s = new Set();
      let arr = [1, 2, 1, 2, 3, 4, 2, 2, 34, 2, 4, 2, 4, 32, 2];
      let s2 = new Set(arr);
       console.log(noRepeat(arr))
      console.log(s, typeof s);
      console.log(s2);

1.1.2. 字符串去重

[...new Set('sssuuunnn')].join('')   // join  ['s', 'u', 'n'] => sun

1.1.3. 交集

  let arr1 = [1, 1, 2, 1, 3, 4, 5, 6];
      let arr2 = [4, 5, 6, 7, 8, 7, 1, 5, 7];
      // let result = [...new Set(arr1)].filter(item => {
      //   let s2 = new Set(arr2);
      //   if (s2.has(item)) return true;
      //   else return false;
      // });
      let result = [...new Set(arr1)].filter(item => new Set(arr2).has(item));
      console.log(result);

1.1.4. 并集

      let arr1 = [1, 1, 2, 1, 3, 4, 5, 6];
      let arr2 = [4, 5, 6, 7, 8, 7, 1, 5, 7];
      let nuino = new Set([...arr1, ...arr2]);
      console.log(nuino);

1.1.5. 差集

      let arr1 = [1, 1, 2, 1, 3, 4, 5, 6];
      let arr2 = [4, 5, 6, 7, 8, 7, 1, 5, 7];
      // let result = [...new Set(arr1)].filter(item => {
      //   let s2 = new Set(arr2);
      //   if (s2.has(item)) return false;
      //   else return true;
      // });
      let result = [...new Set(arr1)].filter(item => !new Set(arr2).has(item));
      console.log(result);

1.2. set实例的属性和方法

1.2.1. 属性

  size: size属性表示set集合中有多少个元素

new Set([1, 2]).size  // 2

1.2.2. 方法

  add(value):添加某个值,返回Set结构本身

      s2.add(100);
      console.log(s2);

  delete(value):删除某个值,返回一个布尔值表示是否删除成功

  	  // 删除不存在的元素
      s2.delete(99);
      console.log(s2);
      // 删除存在的元素
      s2.delete(1);
      console.log(s2);

  has(value):返回一个布尔值,表示参数是否为Set的成员

      console.log(s2.has(99)); // false
      console.log(s2.has(100)); // true

  clear():清除所有成员,没有返回值

      s2.clear();
      console.log(s2);

1.3. Set的遍历方法

  keys():返回键名的遍历器
  values():返回键值的遍历器
  entries():返回键值对的遍历器
  for…of…

    let setArr = new Set([1, 6, 6, 'sun', {name: 'sun'}])
    for(let item of setArr.keys()) {
      console.log(item);
       // 1 6 sun {name: 'sun'}
    }
    for(let item of setArr.values()) {
      console.log(item);
      // 1 6 sun {name: 'sun'}
    }
    for(let item of setArr.entries()) {
      console.log(item);
      // [1, 1] [6, 6] [sun, sun] [{name: 'sun'}, {name: 'sun'}] 
    }
    for(let item of setArr) {
      console.log(item);
       // 1 6 sun {name: 'sun'}
    }

2. Map简介

  ES6提供了Map数据结构,类似于对象,也是键值对的集合。
  但是键的范围不限于字符串,各种类型的值(包括对象)都可以当做键
  Map实现了iterator接口,可以使用扩展运算符和for of 进行遍历。
  Map的属性、方法:
  size 返回Map的元素个数
  set 添加一个元素,返回当前Map
  get 返回键名对象的键值
  has 检测Map中是否包含某个元素,返回Boolen值
  clear 清空Map,返回undefined

      let m = new Map();

2.1. size

    console.log(m.size); // 0

2.2. set

      m.set('name', 'wf');
      let key = {
        world: 'a,b,c'
      };
      m.set(key, [1, 2, 3]);
      console.log(m);

2.3. delete

      m.delete('name');

2.4. get

     m.get('name');

2.5. has

   console.log(m.has('name')); // true
   console.log(m.has('age')); // false

2.6. clear

   m.clear();

2.7. 遍历

      for (let v of m) {
        console.log(v);
      }

你可能感兴趣的:(ES语法,es6,前端,ecmascript)