ES6-Set()和Map()

古希腊掌管bug的神
92 阅读1分钟

Set

set是什么

  • 什么是Set?
  • set是一系列无序没有重复值的数据集合
console.log([1,2,1])
        console.log(new Array([1,2,1]))

        const s = new Set()
        s.add(1)
        s.add(2)

        // set中不能有重复的成员
        s.add(1)
        console.log(s);

        // Set没有下标去表示每一个值 所以Set是无序的 也不能像数组那样通过下标去访问Set成员

Set实例的方法和属性

  • has()方法检查set中有没有指定的属性返回布尔值
       // console.log(s.has(4));
       // console.log(s.has(1));
  • delete()方法删除set中的值
// s.delete(1)
// console.log(s);
// 使用delete删除不存在的成员什么都不会发生 也不会报错
  • clear()清空set中的值
        // s.clear()
        // console.log(s);
  • size获取set中的长度
 console.log(s.size);

Set构造函数的参数

<body>
    <p>1</p>
    <p>2</p>
    <p>3</p>
    <script>
        // 1.数组
        // const s = new Set([1,2,1])
        // console.log(s);
        // 2.字符串 arguments NodeList Set等
        console.log(new Set("hi"));
        function func(){
            console.log(new Set(arguments));
        }
        func(1,2,1,2)
        console.log(new Set(document.querySelectorAll("p")));

        const s =new Set([1,2,1])
        console.log(new Set(s)===s);
        console.log(s);
    </script>

Set的注意事项

  • 什么时候使用Set?
  1. 数组或字符串去重时
  2. 不需要通过下标访问
  3. 为了使用Set中提供的方法和属性时(add Delete has clear size)
<script>
        // 1.判断重复的方式
        // const s =new Set(1,2,1);

        // console.log(1===1);
        // console.log(NaN===NaN);
        // Set对重复值的判断基本遵循严格相等(===)
        // 但是对于 NaN 的判断与===不同Set中NaN等于NaN
        // console.log(s);

        // const s = new Set()
        // s.add({}).add({})
        // console.log({}==={});
        // console.log(s);

        // 2.什么时候使用Set
        // 1.数组或字符串去重时
        // 2.不需要通过下标访问
        // 3.为了使用set中提供的方法和属性时(add delete clear has forEach size等)
    </script>

Set的应用

<p>1</p>
    <p>2</p>
    <p>3</p>
    <script>
        // 1.数组去重
        // [1,2,1]
        // const s = new Set([1,2,1])
        // s.forEach()
        // const a = []
        // s.forEach(function(value,key,set){
        //     a.push(value)
        // })
        // console.log(a);

        // console.log(...s);
        // console.log([...s]);
        // console.log([new Set([1,2,1])]);

        // 字符串去重
        // 'a,a,a,b,b,b,b,c,c,c'
        // const s = new Set('a,a,a,b,b,b,b,c,c,c');
        // console.log([...s].join(""));
        // console.log(s);

        // console.log([...new Set('a,a,a,b,b,b,b,c,c,c').join("")]);
        
        // 3.存放DOM元素
        // console.log(document.querySelectorAll("p"));
        
        const s=new Set(document.querySelectorAll("p"))
        s.forEach(function(elem){
            console.log(elem);
            elem.style.color = "red";
            elem.style.backgroundColor = "yellow";
        })
    </script>

Map

Map是什么

  • Map和对象都是键值对的集合
  • 键->值 key -> value
  • Map和对象的区别
  • 对象一般用字符串当做键
  • 基本数据类型：数字 字符串 布尔值 null undefined
  • 引用数据类型：对象([],{}函数 Set Map等)
<script>
        // Map和对象都是键值对的集合
        // 键->值 key -> value
        // const person = {
        //     name:'alex',
        //     age:18
        // };

        // const m = new Map()
        // m.set('name','alex')
        // m.set('age',18)
        // console.log(m);

        // 2.Map和对象的区别
        // 对象一般用字符串当做键
        // const obj ={
        //     name:'alex',
        //     true:'true',
        //     [{}]:'object'
        // };
        // console.log(obj);
        // console.log(obj.toString());

        // 基本数据类型：数字 字符串 布尔值 null undefined
        // 引用数据类型：对象([],{}函数 Set Map等)
        // 以上都可以作为Map的键
        const m =new Map();
        m.set('name','alex');
        m.set(true,'true');
        m.set({},'object')
        m.set(new Set(1,2),'set')
        m.set(undefined,'unedfined');
        console.log(m);
    </script>

Map实例的方法和属性

<script>
        // 1.方法
        // set
        const m = new Map()
        // 使用set添加新成员 键如果已经存在 后添加的键值覆盖前面的
        // m.set('age',18,true,'true','age',20)

        // get
        console.log(m);
        console.log(m.get('age'));
        // get如果获取不存在的成员 返回undefined
        // console.log(m.get('true'));
        // console.log(true);

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

        // delete
        m.delete('age')
        m.delete('name')
        // 使用delete删除不存在的成员 什么都不会发生 不会报错
        console.log(m);   

        // clear
        // m.clear()
        console.log(m);
        m.forEach(function(value,key,map){
            console.log(value,key,map);
            console.log(this);
            console.log(value,key,map===m);
        },document)

        // 属性
        // size
        // 对象中没有类似的属性
        console.log(m.size);

Map构造函数的参数

  • 数组(只能传二维数组)
  • Set和Map等 Set中也必须体现键和值
<script>
        // 数组
        // 只能传二维数组
        console.log(new Map([
            ['name', 'alex'],
            ['age', 18]
        ]));

        // 2.Set Map等
        // Set
        // Set中也必须体现键和值

        // const s = new Set([
        //     ['name', 'alex'],
        //     ['age', 18]
        // ])
        // console.log(new Map(s));
        // console.log(s);

        // Map
        // 复制了一个新的Map
        const m1 = new Map([
            ['name','alex'],
            ['age',18]
        ])
        console.log(m1);
        const m2 = new Map(m1)
        console.log(m2,m2===m1);
    </script>

Map的注意事项

  • 什么时候用Map
  • 如果只是需要key和value的结构或者需要字符串以外的值做键 使用Map更合适
<script>
        // 1.判断键名是否相同的方式
        // 基本遵循严格相等(===)
        // 例外就是NaN Map中NaN也是等于NaN
        // console.log(NaN===NaN);
        // const m = new Map()
        // m.set(NaN,1).set(NaN,2)
        // console.log(m);

        // 什么时候用Map
        // 如果只是需要key->value的结构 或者需要字符串以外的值做键 使用Map更合适
        // forEach for in
        // size

        // 只有模拟现实世界的实体 才使用对象
        // const person = {}
    </script>

Map的应用

<body>
    <p>1</p>
    <p>2</p>
    <p>3</p>
</body>
<script>
    const [p1, p2, p3] = document.querySelectorAll("p")
    // const m = new Map()
    // m.set(p1,'red')
    // m.set(p2,'green')
    // m.set(p1,'blue')

    // const m = new Map([
    //     [p1,{
    //         color:'red',
    //         backgroundColor:'yellow',
    //         fontsize:'40px'
    //     }],
    //     [p2,{
    //         color:'green',
    //         backgroundColor:'pink',
    //         fontsize:'20px'
    //     }],
    //     [p3,{
    //         color:'blue',
    //         backgroundColor:'orange',
    //         fontsize:'40px'
    //     }]
    // ])
    const m = new Map([
        [p1, new Map([
            ['color', 'red'],
            ['backgroundColor', 'yellow'],
            ['font-size', '40px']
        ])],
        [p2,new Map([
            ["color",'green'],
            ["backgroundColor",'pink'],
            ["font-size",'20px']
        ])],
        [p3,new Map([
            ["color",'blue'],
            ["backgroundColor",'orange'],
            ["font-size",'40px']
        
        ])]
    ])
    // m.forEach((color,elem)=>{
    //     console.log(color);
    //     elem.style.color = color
    // })
    // console.log(m);
    // m.forEach((person, elem) => {
    //     for (let p in person) {
    //         elem.style[p] = person[p]
    //     }
    // })
    // console.log(m);
    m.forEach((person, elem) => {
        person.forEach((val,key)=>{
            elem.style[key] = val
        })
    })
    console.log(m);
</script>
avatar
文章
阅读
粉丝