• es6+最佳入门实践(7)


    7.set和map数据结构

    7.1.什么是set?

    Set就是集合,集合是由一组无序且唯一的项组成,在es6中新增了set这种数据结构,有点类似于数组,但是它的元素是唯一的,没有重复

     let st = new Set([1,2,2,3,3,4])
    console.log(st)  // [1,2,3,4]
    

    Set的size属性可以知道set中有多少元素,类似于数组的length属性

    let st = new Set([1,2,2,3,3,4])
    console.log(st.size); //4
    

    7.2.Set的相关方法

    1.add 添加一个数据

    let st = new Set([1, 2, 3])
    st.add(4)
    console.log(st)
    

    2.delete 删除一个数据

    let st = new Set([1, 2, 3]);
    st.delete(3);
    console.log(st);
    

    3.has 判断是否存在某个元素

    let st = new Set([1, 2, 3]);
    console.log(st.has(1)) //true
    console.log(st.has(10)) //false
    

    4.clear 清除所有数据

    let st = new Set([1, 2, 3])
    st.clear()
    console.log(st)
    

    5.keys 返回键名的遍历器

    let st = new Set([1, 2, 3])
    console.log(st.keys())
    

    6.values 返回值的遍历器

    let st = new Set([1, 2, 3])
    console.log(st.values())
    

    7.entries 返回键/值对的遍历器

    let st = new Set([1, 2, 3])
    console.log(st.entries().next())
    

    8.foreach 使用回调函数遍历元素

    let st = new Set([0, 12, 3])
    st.forEach((v,k,s)=>{
        console.log(v, k, s)
    })
    

    7.3.什么是Map?

    ES6 提供了 Map 数据结构。它类似于对象,也是键值对的集合,但是“键”的范围不限于字符串,各种类型的值(包括对象)都可以当作键。也就是说,Object 结构提供了“字符串—值”的对应,Map 结构提供了“值—值”的对应,是一种更完善的 Hash 结构实现。如果你需要“键值对”的数据结构,Map 比 Object 更合适。

    let k1 = {a:1};
    let k2 = {b:1};
    
    let obj = {
        [k1]: 1,
        [k2]: 2
    };
    console.log(obj)  //{[object Object]: 2}
    

    上面代码中k1和k2都被转换成了[object Object],因此,k2 把 k1覆盖了,之所以要把k1和k2转换成字符串的原因就是js中的对象属性只能是字符串类型,为了解决这个问题,ES6提供了Map数据结构

    1.如何创建一个Map?

    let mp = new Map([
        ['a', 1],
        ['b', 2]
    ])
    console.log(mp)
    
    let mp2 = new Map([
            [k1,1],
            [k2,2]
        ])
    console.log(mp2)
    

    2.Map的属性size

    let mp2 = new Map([
            [k1,1],
            [k2,2]
        ])
    console.log(mp2.size)
    

    7.4.Map的相关方法

    1.set(key, value) 添加新的键值对

    let m = new Map()
    m.set('a', 1)
    console.log(m)
    

    2.get(key) 获取key对应的值

    let m = new Map()
    m.set('a', 1)
    console.log(m.get('a'))
    

    3.delete(key) 删除key

    let m = new Map([
        ['a', 1],
        ['b', 2]
    ]);
    m.delete('a')
    console.log(m)
    

    4.has(key) 查看是否存在某个key

    let m = new Map([
        ['a', 1],
        ['b', 2]
    ]);
    console.log(m.has('a')) //true
    console.log(m.has('c')) //false
    

    5.clear()

    let m = new Map([
        ['a', 1],
        ['b', 2]
    ]);
    m.clear()
    console.log(m)
    

    6.keys()返回键名的遍历器

    let m = new Map([
        ['a', 'hello'],
        ['b', 'nodeing']
    ]);
    for(let k of m.keys()){
        console.log(k)
    }
    
    

    7.values()返回值的遍历器

    let m = new Map([
        ['a', 'hello'],
        ['b', 'nodeing']
    ]);
    for(let k of m.values()){
        console.log(k)
    }
    

    8.entries() 返回键/值对的遍历器

    let m = new Map([
        ['a', 'hello'],
        ['b', 'nodeing']
    ]);
    for(let k of m.entries()){
        console.log(k)
    }
    

    9.foreach 遍历Map

    let m = new Map([
        ['a', 'hello'],
        ['b', 'nodeing']
    ]);
    
    m.forEach((v,k,m) => {
        console.log(v, k, m)
    })
    
    

    视频教程地址:http://edu.nodeing.com/course/50

  • 相关阅读:
    数论初步
    最大流
    vue + elemen 初始化项目--构建
    call, appply , bind
    动态引入全局组件
    少见好用的js API
    vue父子组件通讯
    vue优化相关---性能篇
    vue推荐文章
    webpack4.x系列--资源和样式解析
  • 原文地址:https://www.cnblogs.com/dadifeihong/p/10358122.html
Copyright © 2020-2023  润新知