如何在点表示法中使用变量，类似于方括号表示法

Question

我一直在JavaScript中使用方括号表示法来创建和调用关联数组。

在这个例子中，我理解方括号表示法允许你使用变量来调用数组中的某个对象。

那么在点表示法中如何做到这一点呢？

var item = {};
    item['1'] = 'pen';

var x = 1;

console.log(item[x]);  // console will show 'pen'

- Paul Sham

Answer 1

你不能在点表示法中使用变量（除非使用eval，但您不想这样做）。在点表示法中，属性名称本质上是一个常量。

myObj.propName
// is equivalent to
myObj["propName"]

- nnnnnn

---

“propName”在第一行被视为属性，而不是变量！ - sjngm

我不同意。@sjngm在这里并没有暗示propName是一个变量，而是一个属性的名称。 - Zack The Human

@zack 嗯，那么使用不同的名称会更好。它说“等同于”，意思是第一行与第三行做的事情相同。但这并不是真的。 - sjngm

@zack 也许我错了，但我第一次阅读那个答案时它说的是 myObj[propName]。不是吗？除此之外，我同意，它是相同的。现在。 - sjngm

@Paul Sham 如果是这样，您可能想尝试 http://jshint.com/。我曾经与 JSLint 斗争过一段时间，有时我只是简单地不同意它的胡言乱语。我是 Crockford 的忠实粉丝，但 JSLint 太过严格了。 - Zack The Human

Answer 2

短答案是：除非您知道属性的名称，否则无法使用点表示法访问属性。

点表示法还对您可以访问的属性名称施加限制，因为属性名称必须是有效的JavaScript标识符。例如，如果您有一个名为my prop（或更好的是my%prop）的属性，则在大多数情况下，如果不使用括号表示法，将导致语法错误。 MDN上的成员运算符页面进一步解释了这一点。

作为旁注：

能够使用点表示法动态查找属性会不会有点混淆？

item.x // is this the property "x" or do I have to look up variable "x"?

- Zack The Human

---

感谢提供参考链接。是的，现在我想起来了，这会让人感到困惑。我只是不知道是否有办法。 - Paul Sham

Answer 3

如果你使用数字来访问数组，你必须使用方括号：

item[0]

var k = 0;
item[k]

作为

item.0

无法使用（语法错误）。

如果您使用字符串

item["key"]

var p = "key";
item[p]

等于

item.key

在后一种情况下

var p = "key";
item.p

会导致错误的输出，因为这里 p 没有被当作变量处理。

- sjngm

---

谢谢，我并没有特别询问一个数字，只是没有想到更好的标识符。但是，这也是了解数字的好信息。 - Paul Sham

Answer 4

现在你其实可以了。

在这种情况下，你可以使用方括号来使用变量进行点符号表示法。

console.log(item.[x])

这在Typescript中特别有用。

- dwalter

Answer 5

点表示法只限于某些字符...请参见这个问题...方括号表示法允许您打破这种限制:

var item = {};
item['very long variable name containing empty spaces ... and dots...'] = 'valid var';
item.1 = 'not valid var'; // will not work;
item['1'] = 'valid var'; // will do just fine...

- Alex Pacurar

Answer 6

我制作了一个用点符号表示法设置变量的函数，在Angular 2中使用，但这也可以在Vanilla Javascript中使用，只需进行轻微修改。

class Utility {
    static setByDot(_obj, _path, _val) {
        return _path.split('.').reduce(function (prev, curr, _idx, _arr) {
            if ( _idx == (_arr.length-1) && prev ) {
                prev[curr] = _val;
            }

            return prev ? prev[curr] : null
        }, _obj || self);
    }
}

所以您可以直接调用

Utility.setByDot( _obj, 'foo.bar', 'value' );

然后

console.log( _obj.foo.bar );

如果路径存在，则输出

string(6) 'value' 

如果路径不存在，它会优雅地退出。

- Karl Johan Vallner