为什么如果模仿之前的形式,用方括号语法propMap[key]无法获取键对应的值?

来源:3-10 编程练习

电磁护盾

2021-09-23 08:45:47

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <p>1</p>
    <p>2</p>
    <p>3</p>
    <script>
        // const [p1, p2, p3] = document.querySelectorAll('p');
        /*
const m = new Map([
        [
          p1,
          {
            color: 'red',
            backgroundColor: 'yellow',
            fontSize: '40px'
          }
        ],
        [
          p2,
          {
            color: 'green',
            backgroundColor: 'pink',
            fontSize: '40px'
          }
        ],
        [
          p3,
          {
            color: 'blue',
            backgroundColor: 'orange',
            fontSize: '40px'
          }
        ]
      ]);

      m.forEach((propObj, elem) => {
        for (const p in propObj) {
          elem.style[p] = propObj[p];
        }
      });
 */

        // 在此补充代码
        const [p1, p2, p3] = document.querySelectorAll('p');
        const m1 = new Map([
            ['color', 'red'],
            ['backgroundColor', 'yellow'],
            ['fontSize', '40px']
        ]);
        const m2 = new Map([
            ['color', 'green'],
            ['backgroundColor', 'pink'],
            ['fontSize', '40px']
        ]);
        const m3 = new Map([
            ['color', 'blue'],
            ['backgroundColor', 'orange'],
            ['fontSize', '40px']
        ]);

        const m = new Map([
            [p1, m1],
            [p2, m2],
            [p3, m3]
        ]);
        m.forEach((propMap, elem) => {
            console.log(propMap+'<-------1');
            console.log(elem+'<-------2');
            propMap.forEach((value,key) => {
                console.log(value+'<-------3');
                console.log(key+'<-------4');
                elem.style[key]=value;

                console.log(propMap[key]+'<-------5');
                // elem.style[key] = propMap[key];
            })

        });
    </script>
</body>

</html>

https://img.mukewang.com/climg/614bcdb8098701ed05950940.jpg

用value可以实现效果。但是为什么如果模仿之前的形式,用方括号语法propMap[key]无法获取键对应的值?

写回答

1回答

好帮手慕慕子

2021-09-23

同学你好, 因为propMap是一个Map实例,不可以使用方括号语法获取对应键的值,可以直接输出propMap查看下结果,如下:

https://img.mukewang.com/climg/614be20309c2918911770613.jpg

要使用get方法传入键名才可以获取到Map实例中对应的键值。示例:

https://img.mukewang.com/climg/614be2a409ba9ff209060792.jpg

所以可以使用propMap.get(key)这种写法替代value,示例:

https://img.mukewang.com/climg/614be2f1092630c209290367.jpg

祝学习愉快~

0

前端工程师

前端入门如同写字,如果你不知道从哪开始,那就选择前端(含Vue3.x,React17,TS)

20327 学习 · 17877 问题

查看课程