使用常量定义JavaScript对象出现异常行为的原因咨询

先看你提供的代码：

const PORTRAIT = 'PRT';
const LANDSCAPE = 'LND';
const SQUARE = 'SQ';

const good_image_ratios = {}
good_image_ratios[LANDSCAPE] = '16_9_';
good_image_ratios[PORTRAIT] = '3_4_';
good_image_ratios[SQUARE] = '1_1_';

const wrong_image_ratios = { LANDSCAPE: '16_9_', PORTRAIT: '3_4_', SQUARE : '1_1_'  }

console.log(good_image_ratios);
console.log(wrong_image_ratios);

console.log(good_image_ratios[LANDSCAPE]);
console.log(wrong_image_ratios[LANDSCAPE]);

控制台输出：

{ LND: '16_9_', PRT: '3_4_', SQ: '1_1_' }
{ LANDSCAPE: '16_9_', PORTRAIT: '3_4_', SQUARE: '1_1_' }
16_9_
undefined

差异原因 #

这是JavaScript对象键名的两种写法规则导致的：

• 第一种写法（good_image_ratios）：用方括号[]赋值时，方括号内的内容会被当作表达式计算。这里的LANDSCAPE是变量，会取它的实际值'LND'作为对象的键名，最终对象的键是'LND'、'PRT'、'SQ'。
• 第二种写法（wrong_image_ratios）：普通对象字面量里的LANDSCAPE没有被方括号包裹，它会被直接当作字符串字面量作为键名。也就是说这个对象的键是字符串'LANDSCAPE'、'PORTRAIT'、'SQUARE'，和你定义的变量完全无关。

所以当你用wrong_image_ratios[LANDSCAPE]访问时，实际上是用变量LANDSCAPE的值'LND'作为键去查找，但这个对象里根本没有'LND'这个键，自然返回undefined。

如果要让第二种写法和第一种效果一致，需要用ES6的计算属性名语法，把键名用方括号包裹：

const correct_image_ratios = { 
  [LANDSCAPE]: '16_9_', 
  [PORTRAIT]: '3_4_', 
  [SQUARE] : '1_1_'  
}

这样定义的对象，键名就是变量对应的值，和good_image_ratios完全一致。

内容的提问来源于stack exchange，提问作者Nicola Lepetit