JavaScript用点运算符访问对象数字键名报错的原因及正确用法

首先明确结论：这是JavaScript点运算符本身的语法限制，不属于使用错误。

原因说明 #

• JavaScript对象的所有非Symbol类型键，在存储时都会被自动转换为字符串，你示例中dict2 = {1:'a', 2:'b', 3:'c'}实际存储的键是"1"、"2"、"3"，而非数字类型。
• 点运算符的语法要求是：其后必须跟随合法的JavaScript标识符，而合法标识符仅允许以字母、下划线_、美元符号$开头，不能以数字开头，也不能包含空格、特殊符号等字符。
• 你书写dict2.1时，点后直接跟随数字，不符合标识符语法要求，JS解析器无法识别，因此抛出Uncaught SyntaxError: Unexpected number语法错误。

解决方法 #

对于数字开头的键、包含特殊字符的键、或者动态生成的键（比如用户输入的键名），统一使用方括号语法访问即可：

const dict2 = {1:'a', 2:'b', 3:'c'}
// 以下两种写法都可以正常访问，结果相同
console.log(dict2[1]) // 输出 'a'
console.log(dict2['1']) // 输出 'a'

最佳实践 #

如果业务中键名来自用户输入，存在格式不确定性，优先使用方括号语法访问对象属性，兼容性更强，可避免语法错误。

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