如何优化按钮点击次数统计的对象键值更新逻辑？

需求说明 #

• 初始化空对象userAction用于统计按钮点击次数
• 首次点击ID为Btn1的按钮时，userAction更新为{btn1: 1}
• 点击ID为Btn2的按钮时，userAction更新为{btn1: 1, Btn2: 1}
• 再次点击Btn1时，userAction更新为{btn1: 2, Btn2: 1}

现有实现代码 #

JavaScript（基于jQuery） #

let userAction  = {};

$('button').click(function(){
  let btnId = $(this).attr('id');
  let exisitngValue = userAction[`${btnId}`];
if (btnId in userAction){
  userAction[`${btnId}`] = exisitngValue+1;
}else {
userAction[`${btnId}`] = 1;
}
console.log(userAction);
});

HTML #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="Btn1">Button 1</button>  
<button id="Btn2">Button 2</button>  
<button id="Btn3">Button 3</button>  
<button id="whatever">whatever</button>

优化实现方案 #

你的现有代码逻辑没问题，但可以通过简化语法、优化性能让代码更简洁高效：

简化版jQuery实现 #

const userAction = {};

$('button').on('click', function() {
  const btnId = this.id; // 直接用原生DOM的id属性，省去jQuery包装开销
  // 短路求值简化判断：存在则计数+1，不存在则初始化为1
  userAction[btnId] = (userAction[btnId] || 0) + 1;
  console.log(userAction);
});

动态元素适配：事件委托优化 #

如果页面后续会动态新增按钮，用事件委托能避免重复绑定事件，性能更优：

const userAction = {};

$(document).on('click', 'button', function() {
  const btnId = this.id;
  // 用ES2020空值合并运算符，比||更严谨（不会把0、空字符串这类假值误判为不存在）
  userAction[btnId] = (userAction[btnId] ?? 0) + 1;
  console.log(userAction);
});

无依赖原生JS实现 #

如果项目可以移除jQuery依赖，原生JS实现同样简洁：

const userAction = {};

document.addEventListener('click', (e) => {
  if (e.target.tagName === 'BUTTON') {
    const btnId = e.target.id;
    userAction[btnId] = (userAction[btnId] ?? 0) + 1;
    console.log(userAction);
  }
});

优化点说明 #

1. 原生DOM属性直接调用：this.id比$(this).attr('id')更高效，减少不必要的jQuery包装
2. 简化条件判断：用短路求值或空值合并运算符，一行代码完成计数更新，逻辑更清晰
3. 事件委托：针对动态元素场景优化，只绑定一次事件，减少内存占用
4. 语义化变量声明：userAction是引用类型不会被重新赋值，用const更符合代码语义

内容的提问来源于stack exchange，提问作者new_coder