用vue.js学习es6(五):set和map的使用

时间:2023-03-08 17:45:30
用vue.js学习es6(五):set和map的使用

一:Set用法:

  ES6提供了新的数据结构Set。它类似于数组,但是成员的值都是唯一的,没有重复的值。

  (1).打印:console.log
    var data = new Set([1,2,3]);
    //Set {1, 2, 3}
    console.log(data);

  (2).添加: add
    data.add(4);
    //Set {1, 2, 3, 4}
    console.log(data);
    //Set不会重复添加成员
    data.add(4);
    //Set {1, 2, 3, 4}
    console.log(data);

  (3).成员个数:size
    //4
    console.log(data.size);

  (4).删除:delete
    data.delete(1);
    //Set {2, 3, 4}
    console.log(data);

  (5).查找:has
    //true
    console.log(data.has(2));

  (6).遍历: forEach
    //2
    //3
    //4
    data.forEach(d=>{
      console.log(d);
    });

二.Map用法:

  ES6提供了Map数据结构。它类似于对象,也是键值对的集合,但是“键”的范围不限于字符串,各种类型的值(包括对象)都可以当作键。

  也就是说,Object结构提供了“字符串—值”的对应,Map结构提供了“值—值”的对应,是一种更完善的Hash结构实现。

  如果你需要“键值对”的数据结构,Map比Object更合适。

  (1).打印:console.log

    var data = new Map();
    //Map {}
    console.log(data);

  (2).添加 set(key,value)
    data.set('a',1);
    data.set('b',2);
    data.set('c',3);
    //Map {"a" => 1, "b" => 2, "c" => 3
    console.log(data);

  (3).获得: get(key)
    //1
    console.log(data.get('a'));

  (4).成员个数: size
    //3
    console.log(data.size);

  (5).删除:delete
    data.delete('a');
    //Map {"b" => 2, "c" => 3}
    console.log(data);

  (6).查找:has
    //true
    console.log(data.has('b'));

  (7).遍历:forEach
    //b=2
    //c=3
    data.forEach((value,key)=>{
      console.log(key+'='+value);
    });

三.综合使用:

  var s = new Set();

  [2,3,5,4,5,2,2].map(x => s.add(x));

  for(let i of s){

    console.log(i); 

  }

  //2 3 5 4