JavaScript对象:通过字符串名称访问变量属性

482
如果我有一个如下所示的 JavaScript 对象:
var columns = {
  left: true,
  center : false,
  right : false
}

我有一个函数,它接收对象和属性名称:

and I have a function that is passed both the object, and a property name like so


返回结果:

我有一个函数,它接收对象和属性名称:

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

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

3个回答

923
你不需要一个函数 - 直接使用 方括号表示法 即可:
var side = columns['right'];

这与点标记法相同:var side = columns.right;,只是使用方括号表示法时,right也可以来自变量、函数返回值等。

如果您需要一个函数,这里是它:

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

回答一些与原问题不直接相关的评论,嵌套对象可以通过多个括号进行引用。如果您有一个像这样的嵌套对象:


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

您可以按照以下方式访问c的属性x:

var cx = foo['c']['x']
如果一个属性未定义,尝试引用它将返回undefined(而不是nullfalse):
foo['c']['q'] === null
// returns false

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

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

20
也许这是显而易见的,但我认为值得明确指出 prop 必须是字符串类型或解析为字符串类型。 - prasanthv
1
在我看来,这非常明显... - ThiefMaster
15
嵌套对象呢? - sarkiroka
2
@BluE:测试不是更容易吗?;) 是的,访问一个未定义的属性会返回undefined - ThiefMaster
2
为了完整回答,我认为在你的回答中添加有关不存在的属性和 undefined 的信息是一个好主意。询问这个问题的人很可能不知道在这种情况下会返回什么。 - Alexander Abakumov
显示剩余6条评论

97

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中有代码和注释。


2
如果 prop 字符串包含数组索引,则此方法将不起作用。 - SET001
3
这个?http://jsfiddle.net/amofb8xa/8/ - Prusprus
访问嵌套属性可以更简单地完成,查看https://dev59.com/0W855IYBdhLWcg3wnFpO#30974910 - Mr Br

11
自从我通过上面的回答得到帮助(我问了一个重复的问题并被引导到这里),我现在提交一个答案(我的测试代码)来解决在变量嵌套时使用方括号表示法的问题:

<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>


网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接