JSON 路径中的变量 - JavaScript

Question

我已经搜索了类似的问题，但我还没有找到任何可以帮助我的东西。

我正在尝试根据所选元素的材料类型访问图片路径(使用 JSON 格式(。实际上，我的代码是这样构建的：

if (globalData.Material.Mat_type == "OSCILLOSCOPE") {                                                         
  var picture = (globalData.Material.Oscilloscope.picture);                     
}
if (globalData.Material.Mat_type == "ALIMENTATION") {                                                         
  var picture = (globalData.Material.Alim.picture);                     
}

但根本没有优化，所以我试图这样做：

var mat_type = (globalData.Material.Mat_type);
var picture = (globalData.Material[mat_type].picture);

但它不起作用...有一些例外：

TypeError ： globalData.Material[mat_type] 未定义。

我已经尝试了很多东西，你知道吗？谢谢！

Answer 1

我在问题下方的评论中概述了字符大小写的问题，因此大概调整globalData.Material.Mat_type的值可以解决问题：

var mat_type =
     globalData.Material.Mat_type.charAt(0).toUpperCase() +
     globalData.Material.Mat_type.substr(1).toLowerCase();

我还可以看到，这一一般规则可能并不适用于所有情况。如果不是错别字，则不适用于Mat_type == "ALIMENTATION"的第二种情况，因为这样您就会尝试访问Material而不是Alimentation Alim属性。在这种情况下，您可以通过前缀访问属性：

function pictureOf(material) {
  if (!material || !String(material.Mat_type)) {
    return null;
  }
  let mat_type = String(material.Mat_type).toUpperCase();
  for (var propertyName in material) {
    if (mat_type.startsWith(propertyName.toUpperCase())) {
      return material[propertyName].picture || null;
    }
  }
  return null;
}
console.log(pictureOf({
  Mat_type: "OSCILLOSCOPE",
  Oscilloscope: {
    picture: "picture of oscilloscope"
  }
}));
console.log(pictureOf({
  Mat_type: "ALIMENTATION",
  Alim: {
    picture: "picture of alimentation"
  }
}));

但是，如果多个属性共享相同的前缀，则此方法可能容易出错。不区分大小写的前缀匹配也存在一个隐藏问题，以防在属性名称中使用一些特殊的 unicode 字符。最后，此方法效率不高，因为它必须遍历对象的所有属性(最坏情况(。它可以替换为更安全的属性映射：

const matTypeMapping = {
  "ALIMENTATION": "Alim"
};
function pictureOf(material) {
  if (!material || !String(material.Mat_type)) {
    return null;
  }
  let matType = String(material.Mat_type);
  // find property mapping or apply general rule, if mapping not defined
  let propertyName = matTypeMapping[matType] ||
    matType.charAt(0).toUpperCase() + matType.substr(1).toLowerCase();
  return material[propertyName].picture || null;
}
console.log(pictureOf({
  Mat_type: "OSCILLOSCOPE",
  Oscilloscope: {
    picture: "picture of oscilloscope"
  }
}));
console.log(pictureOf({
  Mat_type: "ALIMENTATION",
  Alim: {
    picture: "picture of alimentation"
  }
}));

注意：为了避免头痛，也许你应该更喜欢严格相等运算符而不是松散相等运算符。

Answer 2

问题已解决

彼得·沃尔夫是对的！这是一个区分大小写的问题

我其实不知道如何推广他的评论，对此感到抱歉。.

无论如何，谢谢你们！

Answer 3

var mat_type = (globalData.Material.Mat_type);
if(mat_type!==undefined)
 var picture = (globalData.Material[mat_type].picture)

只需在访问值之前对可能不存在的键进行存在性检查即可。