如何从字符串变量获取对应JavaScript对象？点击元素切换对象方案

方案1：利用全局对象（适用于已拆分出obj1、obj2等全局变量的场景） #

如果obj1、obj2是全局变量（直接在顶级作用域声明，比如const obj1 = {...}），在浏览器环境下，全局变量会挂载到window对象上，你可以通过字符串索引直接获取：

// 假设已声明全局对象
const obj1 = { name: "Item 1", value: 100 };
const obj2 = { name: "Item 2", value: 200 };

// 给按钮绑定点击事件
document.querySelectorAll('button[data-itemname]').forEach(btn => {
  btn.addEventListener('click', function() {
    const targetObjName = this.dataset.itemname;
    // 通过window[字符串]获取对应全局对象
    const targetObj = window[targetObjName];
    // 现在可以使用targetObj了
    console.log(targetObj);
  });
});

方案2：整合到一个大对象（推荐，避免全局变量污染） #

把所有子对象放到一个父对象里，通过键名索引获取，这是更规范的写法：

// 整合所有对象到一个父对象中
const allObjects = {
  obj1: { name: "Item 1", value: 100 },
  obj2: { name: "Item 2", value: 200 }
};

// 点击事件处理
document.querySelectorAll('button[data-itemname]').forEach(btn => {
  btn.addEventListener('click', function() {
    const targetObjName = this.dataset.itemname;
    // 通过父对象的键名获取子对象
    const targetObj = allObjects[targetObjName];
    // 使用目标对象
    console.log(targetObj);
  });
});

拆分原有单个obj的方法 #

如果当前只有一个大对象obj，想拆分成obj1、obj2等独立对象，直接解构赋值即可：

// 原有单个大对象
const obj = {
  obj1: { name: "Item 1", value: 100 },
  obj2: { name: "Item 2", value: 200 }
};

// 拆分成独立对象
const { obj1, obj2 } = obj;

// 之后就可以用方案1的方式获取了

注意：如果你的对象不是全局变量（比如在函数作用域内），方案1的window方法会失效，此时优先用方案2的整合方式，或者把对象放到一个可访问的作用域中，通过索引获取。

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