当前位置 主页 > 服务器问题 > win服务器问题汇总 >

    ES6新特性五:Set与Map的数据结构实例分析

    栏目:win服务器问题汇总 时间:2019-11-24 01:20

    本文实例讲述了ES6新特性五之Set与Map的数据结构。分享给大家供大家参考,具体如下:

    1. Set

    ① 定义:它类似于数组,但是成员的值都是唯一的,没有重复的值。Set本身是一个构造函数,用来生成Set数据结构。

    var s = new Set();
    [2,3,5,4,5,2,2].map(x => s.add(x))
    console.log(s); //Set { 2, 3, 5, 4 }
    
    

    ② 属性和方法

    Set结构有以下属性。

    Set.prototype.constructor:构造函数,默认就是Set函数。
    Set.prototype.size:返回Set的成员总数。

    Set数据结构有以下方法。

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

    var s = new Set();
    s.add(1).add(2).add(2);
    // 注意2被加入了两次
    console.log(s.size) // 2
    console.log(s.has(1)) // true
    console.log(s.has(2)) // true
    console.log(s.has(3)) // false
    console.log(s.delete(2));
    console.log(s.has(2)) // false
    
    

    ③ Array.from方法可以将Set结构转为数组

    var items = new Set([1, 2, 3, 4, 5]);
    var arr = Array.from(items);
    //运用: 去除数组中重复元素的方法
    var array = [1,2,3,2,3,4];
    function fun(array) {
      return Array.from(new Set(array));
    }
    console.log(fun(array));//[ 1, 2, 3, 4 ]
    
    

    ④ Set结构有一个values方法,返回一个遍历器。

    var s = new Set([1, 2, 3, 4, 5]);
    console.log(s.values());//SetIterator { 1, 2, 3, 4, 5 }
    //Set结构的默认遍历器就是它的values方法
    console.log(Set.prototype[Symbol.iterator] === Set.prototype.values)//true
    //所以遍历可以直接使用 for...of
    for (let x of s) {
      console.log(x);
    }
    //由于扩展运算符(...)内部使用for...of循环,将Set转化为数组。
    var arr = [...s];
    console.log(arr);//[ 1, 2, 3, 4, 5 ]
    
    

    ⑤ Set结构的foreach方法

    var set = new Set([1, 2, 3]);
    set.forEach(function(value,key){
      console.log(value);
    });
    
    

    ⑥ Set结构也有keys和entries方法,这时每个值的键名就是键值。

    let set = new Set(['red', 'green', 'blue']);
    for ( let item of set.keys() ){
      console.log(item);
    }
    // red
    // green
    // blue
    for ( let [key, value] of set.entries() ){
      console.log(key, value);
    }
    // red, red
    // green, green
    // blue, blue
    
    

    ⑦ 数组的map和filter方法的运用

    map(x){}: 遍历数组,对每一元素进行处理,返回处理后的数组。
    filter(x){}: 遍历数组,对每一个元素进行校验,返回含有通过校验元素的数组。

    var set = new Set([1, 2, 3]);
    set = new Set([...set].map(x => x * 2));
    console.log(set);//返回Set结构:{2, 4, 6}
    var set = new Set([1, 2, 3, 4, 5]);
    set = new Set([...set].filter(x => (x % 2) == 0));
    console.log(set);// 返回Set结构:{2, 4}
    
    

    2. Map

    ① 原因:JavaScript的对象,本质上是键值对的集合,但是只能用字符串当作键。

    ② 定义:它类似于对象,也是键值对的集合,但是“键”的范围不限于字符串,各种类型的值(包括对象)都可以当作键。