• 13-Set和Map数据结构


    一、Set

    1、基本用法

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

    他可以接受一个数组作为参数,虽然生成的set实例并不是数组,但可以使用for of循环

    let arr = [1,1,2,2,3]
    const set = new Set(arr)
    console.log('set-->>', set, typeof set) //object
    for (let ele of set){
        console.log('for of -->>',ele) //1, 2, 3
    }

    利用Set将数组作为参数的特性,可以将其作为一种去除重复成员的方法

    let arr = [1,1,2,2,3]
    const set = new Set(arr)
    console.log('set-->>', set, set.size) //[1,2,3] 3

    因此,可以封装一个数组去重的函数。 

    用到Array的form方法,将set结构转换为数组。

    function dedupe(array) {
        return Array.from(new Set(array));
      }  
    dedupe([1, 1, 2, 3]) // [1, 2, 3]

    向set加入值使用的是add方法,向set加入值的时候,不会发生类型转化。所以5和"5"是两个不同的值。

    但 Set中的 NaN等于自身, 而精确相等运算符认为NaN不等于自身。如果像set中加入两个NaN,会发现只有一个NaN

    let set = new Set();
    let a = NaN;
    let b = NaN;
    set.add(a);
    set.add(b);
    set // Set {NaN}

    2、Set实例的属性和方法

    属性:size(返回set实例的成员总数)

    方法:add(添加某个值,返回set本身)、

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

       has(返回一个布尔值,表示参数是否为set成员)、

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

    let s = new Set()
    s.add(1).add(2).add(2);
    s.size // 2
    
    s.has(1) // true
    s.has(2) // true
    s.has(3) // false
    
    s.delete(2);
    s.has(2) // false

    3、遍历操作

    Set结构的实例有4个遍历方法,用于遍历成员:
    keys():返回键名

    values():返回键值

    entries():返回键值对

    forEach():使用回调函数遍历每个成员,用于对每个成员执行操作,没有返回值

    由于set结构没有键名,只有键值,或者说键名就是键值,所以keys、values方法的行为完全一致。

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

    foreach的参数是一个处理函数,该函数的参数依次为键值、键名、集合本身。foreach不会影响原来的set内容。另外,foreach还可以有第二个参数,表示绑定的this对象。

    let set=new Set([1,2,3]);
    set.forEach( (value,key)=>{console.log(value*2)})
    console.log(set) //123

    二、Map

    1、含义和基本用法

    对象是键值对集合(Hash结构),但它只能用字符串作为键。为了解决这个问题,提供了Map数据结构。

    Map也是键值对集合,但“键”的范围不限于字符串。如果需要“键值对”的数据结构,Map比对象更合适。

    var map = new Map([
        ['name', 'Alice'],
        ['age', 18]
    ])
    console.log(map.size) //2
    console.log(map.has('name')) //true
    console.log(map.get('age')) //18

    2、实例的属性和操作方法

    实例有size属性,set(key, value) get(key) has(key) delete(key) clear() 共5个方法

    size属性:

    const map = new Map()
    map.set("foo", true)
    map.set("bar", false)
    console.log("map.size-->>", map.size) //2

    set方法:由于set方法返回的是当前的Map对象,因此可以采用链式的写法。

    let map = new Map().set(1, 'a')
                       .set(2, 'b')
    console.log("map-->>", map)

    get方法:读取key对应的键值,如果找不到key,则返回undefined

    let map = new Map()
    function hello (){
        console.log('hello!')
    }
    map.set(hello, 'Hello ES6') //将函数作为键
    let a = map.get(hello)
    console.log("a-->>", a) //Hello ES6

    Map提供了3个遍历器生成函数和1个遍历方法:keys() values() entries()和forEach()

  • 相关阅读:
    Linux下安装Readis
    windows下的Redis安装:
    解决@ResponseBody不能和 <mvc:annotation-driven>同时使用的问题
    dom4j操作XML
    Ajax优缺点
    来一打前端博客压压惊
    tinypng upload一键压缩上传工具,告别人肉
    手把手教你撸一个简易的 webpack
    前端路由简介以及vue-router实现原理
    JS 数据类型、赋值、深拷贝和浅拷贝
  • 原文地址:https://www.cnblogs.com/qingshanyici/p/11199724.html
Copyright © 2020-2023  润新知