Question

在此页面上 - ＆gt; https://developer.mozilla.org/en-US/docs/Web/JavaScript/A_re-introduction_to_JavaScript

＆＃34;创建后，可以通过以下两种方式之一再次访问对象的属性：

obj.name = "Simon";
var name = obj.name;

obj["name"] = "Simon";
var name = obj["name"];

这些在语义上也是等价的。 第二种方法的优点是属性的名称以字符串形式提供，这意味着它可以在运行时计算，但使用此方法可以阻止某些JavaScript引擎和minifier优化应用。＃34;

（ IN BOLD ）为什么第二种方法更好？这里提到的JavaScript和minifier优化是什么？

如果您需要更多信息，请与我们联系

Answer 1

第二种方法允许您在运行时动态构造名称：

// something passed in to the context
var name = firstName + "_name";

obj[name] = "some value";

这也支持JavaScript代码不支持的字符（如连字符-）：

obj["some-value"] = "some value";

由于缩小工具不会触及字符串文字，"name"不会缩小，但name可能是：

obj.name = "value";
obj.name = "another value":

// after minification:
obj.n = "value";
obj.n = "another value";

虽然不会触及：

obj["name"] = "value";
obj["name"] = "another value";

Answer 2

它并不是更好，它更灵活。考虑一下：

var objects = [
  {
    x: 2,
    y: 3
  },
  {
    x: 32,
    y: 64
  },
  ...
];

var sum = 0;
for (var i = 0, len = objects.length; i < len; i++) {
  var property;
  if (i % 2 == 0) {
    property = 'x';
  } else {
    property = 'y';
  }
  sum += objects[i][property];
}

这使您可以在运行时确定要访问的属性。这会阻止的优化是重命名属性以使文件更小，并且由于该值是动态的，因此编译器无法提前预测它将从何处提取值。

Answer 3

第二个不是那么多＆＃39;更好＆＃39;但更安全，因为它允许具有非常规字符的属性。例如：

obj.my-property = true; //parse errror
obj['my-property'] = true; //fine, because property name specified as string

它还允许您构建动态属性名称，例如

var prop_name = 'foo';
prop_name += 'bar';
obj[prop_name] = true;

优化/缩小点与以下事实有关：大多数（如果不是所有）缩小器都会严格保持字符串不被触及，原因很明显。说你有：

var str = "hello";

即使你缩小了脚本，你也希望你的字符串保持为＆＃34;你好＆＃34;。

因此缩小引擎可能会转向

obj.foobar = true;

到

a.b=true;

但它不会改变

obj['foobar'] = true;

到

a['b']=true;

Answer 4

第一种方法可以被认为是第二种方法的“语法糖”。

虽然第一种方法更具可读性，而且输入更少，但第二种方法使您能够动态命名属性。

当你发现这个有用时的一个例子是，当试图避免可笑的长切换案例时（如果，if-else，if-else，else等）。

您可以使用哈希映射来避免这种情况，如下所示：

function getFav(name) {
  var favoriteColors = {
    "bob": "red",
    "jim": "blue",
    "ana": "red",
    "sue": "purple"
  };
  // Here we use the second accessor method,
  // if 'name' is not inside the favoriteColors, we short-circuit to 'unknown'
  return favoriteColors[name] || "unknown"; 
}

getFav("bob"); // "red"
getFav("ana"); // "red"
getFav("sue"); // "purple"
getFav("dan"); // "unknown"

Answer 5

第二种方法允许通常会抛出错误的名称：

var obj = {}

//setting
obj.hyphenated-name = 'foo' //throws error
obj['hyphenated-name'] = 'foo' //works

//getting
obj.hyphenated-name //NaN or Undefined depending on your environment
obj['hyphenated-name']  //'foo'

JavaScript对象属性赋值

5 个答案: