如何使用jQuery或原生JS动态为JS对象设置动态键名并赋值？

需求 #

现有空对象需要动态写入键值对，目标userData结构参考：

userData = {
  programmer: "Jeff",
  designer: "Obama",
  CEO: "Elon Musk"
}

问题复现 #

原有实现代码：

var userData = {};
var allData = [];

$('input[type="text"]').on("input", function (e) {
    var getBtn = $("#text-label").attr('text-label');
    var inputValue = e.target.value;
    userData.getBtn = inputValue;
    allData.push(userData)
    console.log(allData)
})

实际控制台输出：

[{
  getBtn: "Jim"
}]

预期输出：

[{
  designer: "Jim"
}]

错误原因 #

使用点语法userData.getBtn赋值时，JS会直接将getBtn识别为固定字符串键名，不会解析getBtn变量中存储的动态值，因此生成的键名永远是固定的getBtn，无法匹配动态获取到的designer/programmer/CEO这类实际业务键名。
另外原有代码每次触发输入事件都将全局同一个userData对象的引用push进数组，会导致数组内所有项的值同步跟随最后一次输入变化，存在引用污染问题。

修复代码 #

将点语法赋值替换为方括号语法赋值，方括号内传入存储键名的变量即可实现动态键名设置；每次入组时新建独立对象，避免引用问题：

var userData = {};
var allData = [];

$('input[type="text"]').on("input", function (e) {
    var dynamicKey = $("#text-label").attr('text-label');
    var inputValue = e.target.value;
    // 方括号语法支持动态解析变量作为键名
    userData[dynamicKey] = inputValue;
    // 浅拷贝生成新对象入组，避免引用同一对象导致的值联动问题
    allData.push({...userData});
    console.log(allData)
})

注：如果不需要保留每次输入的历史快照，仅需存储最新的完整userData对象，可以去掉push逻辑，直接在更新对象后打印即可。

内容的提问来源于stack exchange，提问作者The Dead Man