为什么如果模仿之前的形式,用方括号语法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>
用value可以实现效果。但是为什么如果模仿之前的形式,用方括号语法propMap[key]无法获取键对应的值?
1回答
同学你好, 因为propMap是一个Map实例,不可以使用方括号语法获取对应键的值,可以直接输出propMap查看下结果,如下:

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

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

祝学习愉快~
相似问题