如何在javascript中简化冗余和不必要的句子?

Question

如何在javascript中速记多余和不必要的句子?

我的代码如下。

//initialization
document.querySelector('#categoryCheckNormal').checked = false;
document.querySelector('#categoryCheckDisabled').checked = false;
document.querySelector('#categoryCheckBlind').checked = false;
document.querySelector('#categoryCheckEvacuation').checked = false;
// If there is a classification, put a value
if (res.eventData.property.normal) {
document.querySelector('#categoryCheckNormal').checked = true;
} else if (res.eventData.property.disabled) {
document.querySelector('#categoryCheckDisabled').checked = true;
} else if (res.eventData.property.blind) {
document.querySelector('#categoryCheckBlind').checked = true;
} else if (res.eventData.property.evacuation) {
document.querySelector('#categoryCheckEvacuation').checked = true;
}

顺便说一下，代码是冗余的，可读性差。

我想知道我如何改变这作为一个最佳实践!

致以最亲切的问候!

Answer 1

我可能会用下面的方法来处理它。

1. 将数据属性添加到与您的分类相匹配的输入框中。
2. 用querySelectorAll一次性抓取所有输入
3. 你可以让你的重置函数迭代它们并重置检查状态。
然后，您可以从property对象中获取分类，遍历它们，然后为每个分类从属性键创建一个选择器，查询该元素，并设置检查状态。

// Get all the inputs
const inputs = document.querySelectorAll('input[type="checkbox"]');
// Iterate over them and reset them
function reset() {
inputs.forEach(input => input.checked = true);
}
reset();
// Get some data
const res={eventData:{property:{normal:true,disabled:false,blind:false,evacuation:true}}};
// Get the property object
const { property } = res.eventData;
// Get its entries
const entries = Object.entries(property);
// Finally iterate over those entries and update
// the inputs based the key of each entry
for (const [key, value] of entries) {
const selector = `[data-id="${key}"]`;
const input = document.querySelector(selector);
input.checked = value;
}

Normal: <input type="checkbox" data-id="normal">
Disabled: <input type="checkbox" data-id="disabled">
Blind: <input type="checkbox" data-id="blind">
Evacuation: <input type="checkbox" data-id="evacuation">