se6--Map

最新推荐文章于 2021-07-24 22:04:50 发布

小白小白从不日白

最新推荐文章于 2021-07-24 22:04:50 发布

阅读量154

点赞数

分类专栏： es6+ 文章标签： ES6

本文链接：https://blog.csdn.net/weixin_43285360/article/details/119025055

版权

es6+ 专栏收录该内容

39 篇文章 1 订阅

订阅专栏

本文详细介绍了JavaScript中的Map数据结构，包括Map与对象的区别、Map实例的方法（如set、get、has、delete、clear、forEach）及其属性size。还探讨了Map构造函数的参数类型，以及在什么情况下应该使用Map而不是对象。最后通过示例展示了Map在操作DOM元素样式和存储多属性信息时的应用。

摘要由CSDN通过智能技术生成

Map

a. Map是什么

Map和对象都是键值对的集合

<script>
        const m = new Map();

        m.set('name', 'jack');

        m.set('age', 19);

        console.log(m);
</script>

Map和对象的区别：对象一般用字符串当做键
示例1：

<script>
        const obj = {

            name: 'jack',

            age: 14,

            [{}]: 'object'

        }

        console.log(obj);

        console.log({}.toString());
</script>

示例2：

<script>
        const m = new Map();
        m.set('name', 'jack');
        m.set(true, 'true');
        m.set({}, 'object');
        m.set(new Set([1, 2], 'set'));
        m.set(undefined, 'undefined');
        console.log(m);
</script>

b. Map实例的方法和属性

方法

set()方法设置（添加）成员：使用set添加新的成员，键如果已经存在，则后添加的键值会覆盖已有的

<script>

        const m = new Map();

        m.set('age', 45).set(true, 'true').set('age', 15);

        console.loh(m);

</script>

get()方法获取指定成员当get()获取不存在的成员时，返回undefined

<script>

        const m = new Map();

        m.set('age', 45).set(true, 'true').set('age', 15);

        console.loh(m);

        console.log(get('true'));

        console.log(get('age'));

</script>

has()--判断是否存在某元素

<script>

        const m = new Map();

        m.set('age', 45).set(true, 'true').set('age', 15);

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

</script>

delete--删除某一元素

当删除不存在元素时，什么都不会发生也不会报错

<script>

        const m = new Map();

        m.set('age', 45).set(true, 'true').set('age', 15);

        m.delete('age');

        console.log(m);

        m.delete('jack');

        console.log(m);

</script>

clear()--删除所有成员

<script>

        const m = new Map();

        m.set('age', 45).set(true, 'true').set('age', 15);

        m.clear();

        console.log(m);

</script>

forEach()--遍历

<script>

        const m = new Map();

        m.set('age', 45).set(true, 'true').set('age', 15);

        m.forEach(function(value, key, map) {

            console.log(value, key, map);

            console.log(map === m);

            console.log(this); //非严格模式下指向window

        }, document); //改变this指向（在箭头函数下，无论怎么改变this指向，都是指向window）

</script>

属性

<script>

        const m = new Map();

        m.set('age', 45).set(true, 'true').set('age', 15);

        console.log(m.size);

</script>

c. Map构造函数的参数

数组

<script>

        const m = new Map([

            ['name', 'jack'],

            ['age', 14]

        ]);

        console.log(m);

</script>

Set、Map是实例对象当作参数传递进去
示例1：

<script>

        const s = new Set([

            ['name', 'jack'],

            ['age', 14]

        ])

        const m = new Map(s);

        console.log(m);

</script>

示例2：

<script>

        const m1 = new Map([

            ['name', 'jack'],

            ['age', 14]

        ])

        console.log(m1);

        const m = new Map(m1);

        console.log(m);

        console.log(m1 === m);

</script>

d. Map的注意事项

判断键名是否相同

基本遵循严格相等(===)，但是NaN例外,Map中NaN===NaN

 <script>

        const m = new Map();

        m.set(NaN, 1).set(NaN, 2);

        console.log(m);

</script>

什么时候可以使用Map

如果只是需要key--value的结构，或者需要字符串以外的值做键，使用Map更合适

只有模拟显示世界实体时，才使用对象

e.Map的应用

示例1：

<p>1</p>
    <p>2</p>
    <p>3</p>

<script>
        //操作DOM元素 单个属性
        const [p1, p2, p3] = document.querySelectorAll('p');
        // m.set(p1,'red');
        const m = new Map([
            [p1, 'red'],
            [p2, 'blue'],
            [p3, 'skyblue']
        ]);
        m.forEach((color, elem) => {
            elem.style.color = color;
        })
</script>

示例2：

<script>

        //操作DOM元素 多个属性

        const [p1, p2, p3] = document.querySelectorAll('p');

        // m.set(p1,'red');

        const m = new Map([

            [p1, {

                color: 'red',

                backgroundColor: '#ccc',

                fontSize: '40px'

            }],

            [p2, {

                color: 'blue',

                backgroundColor: '#f40',

                fontSize: '20px'

            }],

            [p3, {

                color: 'skyblue',

                backgroundColor: 'orange',

                fontSize: '50px'

            }]

        ]);

        m.forEach((propObj, elem) => {

            for (const p in propObj) {

                elem.style[p] = propObj[p];

            }

        })

</script>