如何在JavaScript/React中将对象值设为变量而非字符串

首先得明确两种场景，对应不同的实现方式：

场景1：当前项目内定义对象，引用本地已存在的变量/属性 #

如果MyInputName是你当前项目里已经存在的变量（或者对象属性），直接去掉引号赋值就行，但要注意两种子情况：

单个变量（如"MyVariableName"） #

确保变量在当前作用域可访问，比如是全局变量或者已经定义的局部变量：

// 先定义变量（用对象包裹基本类型，才能实现修改同步）
let MyInputName = { content: "初始值" };
// 或者是全局变量
window.MyInputName = "全局变量值";

// 赋值给ObjectOne
window.ObjectOne = {
  ObjectOneKey: MyInputName
};

• 如果变量是引用类型（对象、数组）：修改MyInputName的属性，ObjectOne.ObjectOneKey会同步变化，比如MyInputName.content = "新值"，ObjectOne.ObjectOneKey.content也会变成新值；
• 如果是基本类型（字符串、数字）：直接存的是值副本，修改原变量不会同步到对象里，这时候要把基本类型包在对象里，才能实现引用同步。

嵌套对象路径（如"Object.FirstName"） #

直接去掉引号的话，会直接取当前作用域里Object.FirstName的值，但如果你的目标是让其他项目引用他们本地的Object.FirstName，这种写法就不行——因为当前项目的Object和其他项目的Object不是同一个。这时候看场景2。

场景2：导出配置给其他项目，让其引用本地变量/属性 #

这种情况不能直接存引用（不同项目的执行环境独立），得存路径字符串，再配合一个解析函数让其他项目获取本地变量：

1. 导出带路径字符串的配置 #

// 在你的配置文件里导出
export const ObjectOne = {
  ObjectOneKey: "MyInputName",
  UserNameKey: "Object.FirstName"
};

2. 导出路径解析函数 #

export function getLocalValue(path, context = window) {
  // 把路径拆成数组，逐层访问对象属性
  return path.split('.').reduce((current, key) => {
    if (current == null) return undefined;
    return current[key];
  }, context);
}

3. 其他项目使用方式 #

其他项目导入后，用解析函数获取本地的变量：

import { ObjectOne, getLocalValue } from '你的配置包';

// 获取本地的MyInputName
const myVar = getLocalValue(ObjectOne.ObjectOneKey);
// 获取本地的Object.FirstName
const userName = getLocalValue(ObjectOne.UserNameKey);

这样其他项目只要修改本地的MyInputName或者Object.FirstName，下次调用getLocalValue就能拿到最新值，不用修改配置对象。

为什么直接去引号没用？ #

你之前直接去引号没奏效，大概率是这两个原因：

• 对应的变量/对象在当前作用域不存在，导致控制台报错；
• 对于嵌套对象路径，直接去掉引号会访问当前项目的对象，而不是作为路径标识给其他项目使用，跨项目环境下这种写法不适用。

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