JavaScript 对象属性赋值

Question

在此页 -> https://developer.mozilla.org/en-US/docs/Web/JavaScript/A_re-introduction_to_JavaScript

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

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

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

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

(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

第二个不是 'better' 但更安全，因为它允许具有非常规字符的属性。例如：

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;

optimisation/minification 点与这样一个事实有关，即大多数（如果不是全部）压缩器都会严格保持字符串不变，原因相当明显。假设你有：

var str = "hello";

即使您缩小了脚本，您也会希望您的字符串保持 "hello"。

所以缩小引擎可能会转

obj.foobar = true;

进入

a.b=true;

但不会改变

obj['foobar'] = true;

进入

a['b']=true;

Answer 4

第二种方法允许使用通常会引发错误的名称：

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'

Answer 5

第一种方法可以想到'syntactic sugar'第二种方法

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

您可能会发现这很有用的一个例子是，当您试图避免过长的 switch-cases（if、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"

JavaScript 对象属性赋值

JavaScript object property assignment

javascript

performance

javascript-objects

JavaScript 对象 属性 赋值

JavaScript object property assignment

javascript

performance

javascript-objects

JavaScript 对象属性赋值