JavaScript单参数函数如何通过参数字符串匹配对象键返回对应值？

嘿，我来帮你捋捋这个问题！你写的函数本来想通过参数匹配对象的键来获取对应值，但执行后却出现了undefined，先看看你原来的代码：

function someFunction(someArg) {
  var message = { bob: "Hello bob", mike: "Hello mike", tara: "Hello tara" }
  console.log(message + " " + message.someArg + " " + someArg + " " + message.bob);
}

执行后控制台输出[object Object] undefined bob Hello bob，其中undefined的位置本来应该是对应参数的问候语对吧？

问题根源 #

这里踩了JavaScript对象属性访问的一个小坑：

• 用点号.访问属性时，后面跟的必须是固定的属性名标识符，比如message.bob就是直接找message里叫bob的键，这没问题。
• 但你写message.someArg的时候，JS会把someArg当成一个字面量的属性名去查找，可你的message对象里根本没有叫someArg的键，自然就返回undefined了。
• 你真正要做的是用变量someArg的值作为属性名来访问，这时候得用方括号[]语法。

修正后的代码 #

直接修改属性访问方式就行，另外可以优化一下打印逻辑，避免直接打印对象出现[object Object]：

function someFunction(someArg) {
  var message = { bob: "Hello bob", mike: "Hello mike", tara: "Hello tara" }
  // 用方括号访问变量对应的属性
  const targetMessage = message[someArg];
  console.log(`传入的参数：${someArg}`);
  console.log(`匹配到的消息：${targetMessage}`);
  // 想看对象完整内容可以单独打印
  console.log(`对象所有内容：`, message);
}

// 测试一下
someFunction('bob'); // 会输出：匹配到的消息：Hello bob，传入的参数：bob

如果想给不存在的键加个默认提示，还可以优化成这样：

function someFunction(someArg) {
  var message = { bob: "Hello bob", mike: "Hello mike", tara: "Hello tara" }
  const targetMessage = message[someArg] || `抱歉，没有找到${someArg}的消息`;
  console.log(targetMessage);
}

someFunction('lisa'); // 输出：抱歉，没有找到lisa的消息

为啥这样改就对了？ #

message[someArg]会先解析变量someArg的实际值（比如你传'bob'，就会用'bob'作为键去查找），这样就能精准拿到对应的值啦。

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