使用常量的字典的奇怪行为

Question

我使用两种不同的方法定义两个字典，它们的行为方式不同。有人能解释一下为什么吗？

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

这是为什么？

Answer 1

使用带方括号的动态对象属性语法，否则属性名称将被解释为字符串，而不是变量名称：

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]);