JavaScript对象：按名称作为字符串访问变量属性[重复]答案

【问题标题】：JavaScript object: access variable property by name as string [duplicate]JavaScript对象：按名称作为字符串访问变量属性[重复]
【发布时间】：2011-05-14 10:01:55
【问题描述】：

如果我有一个如下所示的 javascript 对象

var columns = {
  left: true,
  center : false,
  right : false
}

我有一个函数，它既传递了对象，又传递了一个像这样的属性名称

//should return false
var side = read_prop(columns, 'right');

read_prop(object, property) 的主体会是什么样子？

【问题讨论】：

标签： javascript object

【解决方案1】：

您不需要函数 - 只需使用 bracket notation:

var side = columns['right'];

这等于dot notation、var side = columns.right;，除了right 也可以来自变量、函数返回值等，使用括号表示法。

如果你需要一个函数，这里是：

function read_prop(obj, prop) {
    return obj[prop];
}

要回答下面的一些与原始问题没有直接关系的 cmets，可以通过多个括号引用嵌套对象。如果您有这样的嵌套对象：

var foo = { a: 1, b: 2, c: {x: 999, y:998, z: 997}};

您可以按如下方式访问c 的属性x：

var cx = foo['c']['x']

如果属性未定义，则尝试引用它将返回undefined（不是null 或false）：

foo['c']['q'] === null
// returns false

foo['c']['q'] === false
// returns false

foo['c']['q'] === undefined
// returns true

【讨论】：

也许这是不言而喻的，但我认为可能值得明确指出prop 必须是string 类型，或者解析为string。
恕我直言，这很明显......
那么嵌套对象呢？
如果属性不存在怎么办？它是否返回未定义？
@BluE：测试不是更容易吗？ ;) 是的，访问 undefined 属性会返回 undefined。

【解决方案2】：

ThiefMaster 的答案是 100% 正确的，尽管我遇到了一个类似的问题，我需要从嵌套对象（对象中的对象）中获取属性，因此作为他答案的替代方案，您可以创建一个递归解决方案将允许您定义一个命名法来获取任何属性，无论深度如何：

function fetchFromObject(obj, prop) {

    if(typeof obj === 'undefined') {
        return false;
    }

    var _index = prop.indexOf('.')
    if(_index > -1) {
        return fetchFromObject(obj[prop.substring(0, _index)], prop.substr(_index + 1));
    }

    return obj[prop];
}

您对给定属性的字符串引用类似于property1.property2

JsFiddle 中的代码和 cmets。

【讨论】：

如果prop 字符串包含数组索引，这将不起作用
这样的？ jsfiddle.net/amofb8xa/8
访问嵌套属性可以更简单，查看stackoverflow.com/questions/4244896/…

【解决方案3】：

由于我的项目得到了上述答案的帮助（我问了一个重复的问题并在此处被引用），因此我在嵌套在 var 中时提交了括号表示法的答案（我的测试代码）：

<html>
<head>
  <script type="text/javascript">
    function displayFile(whatOption, whatColor) {
      var Test01 = {
        rectangle: {
          red: "RectangleRedFile",
          blue: "RectangleBlueFile"
        },
        square: {
          red: "SquareRedFile",
          blue: "SquareBlueFile"
        }
      };
      var filename = Test01[whatOption][whatColor];
      alert(filename);
    }
  </script>
</head>
<body>
  <p onclick="displayFile('rectangle', 'red')">[ Rec Red ]</p>
  <br/>
  <p onclick="displayFile('square', 'blue')">[ Sq Blue ]</p>
  <br/>
  <p onclick="displayFile('square', 'red')">[ Sq Red ]</p>
</body>
</html>

【讨论】：