前端记录项目中用到的js

htt23212025-08-08 11:31

1.new Map的用法

核心作用是：快速、方便地"以某个唯一字段为键"查找对应值

嵌套循环 forEach + find，效率高得多。

用 drugCode 做键，把 useDosage 存进去"，这样后面可以通过 drugCode 快速查找 useDosage

复制代码

let dosageMap = new Map(list.map(item => [item.drugCode, item.useDosage]));

例子：
${ drugCode: 'A1', useDosage: 2 }, { drugCode: 'B2', useDosage: 5 }, { drugCode: 'C3', useDosage: 3 },$
转成map之后：

dosageMap = Map {

'A1' => 2,

'B2' => 5,

'C3' => 3

}

dosageMap.get('B2') // 返回 5

2. || 和 ??

{{ scope.row.operatorName || '-' }} {{ scope.row.operatorName ?? '-' }} 用 || 和??的区别

在 Vue.js 的模板中，|| 和 ?? 都可以用来提供一个默认值，但它们的行为略有不同。

|| 运算符是 逻辑或 运算符，它会在左侧的值为"假值"（例如 null、undefined、0、false、NaN 或 ""）时，返回右侧的默认值。所以，如果 scope.row.operatorName 是任何一个假值，它都会展示 "-"。

?? 运算符是 空值合并 运算符，它只会在左侧的值为 null 或 undefined 时，返回右侧的默认值。与 || 不同，?? 不会对 0、false 或空字符串（""）等假值做处理。

因此：

{``{ scope.row.operatorName || '-' }} 会在 operatorName 为 null、undefined、""、0、false 等时，展示 "-"。

{``{ scope.row.operatorName ?? '-' }} 会仅在 operatorName 为 null 或 undefined 时，展示 "-"，而 0、false、"" 都会保留原值。

总结：?? 更严格，只会对 null 和 undefined 做默认值处理，而 || 对所有"假值"都会处理。

3.字符之间的距离：letter-spacing

麻醉者为了和上下四个字的对齐

复制代码

<span class="label">麻&nbsp;&nbsp;&nbsp;&nbsp;醉&nbsp;&nbsp;&nbsp;&nbsp;者:&nbsp;&nbsp;&nbsp;&nbsp;</span>
//现在改为
<span class="label" style="letter-spacing: 8px;">麻醉者:</span>