JavaScript中点操作符与[]操作符的区别与原理解释

前言

我们都知道，取js对象的时候可以用.也可以用[]，他们两者是有区别的：

1.中括号运算符总是能代替点运算符。但点运算符却不一定能全部代替中括号运算符。

2.中括号运算符可以用字符串变量的内容作为属性名。点运算符不能。

3.中括号运算符可以用纯数字为属性名。点运算符不能。

4.中括号运算符可以用js的关键字和保留字作为属性名。点运算符不能。

但是如果我们只知道这个实在是太无聊，下面我们来看看为什么会产生这样的差别

解析

当我们使用这两个操作符用作成员对象访问的时候，根据ECMA标准他们是属于Left-Hand-Side Expressions一类的表达式。
Left-Hand-Side Expressions包括了十种操作符（ECMA标准里有详细列举，在此不赘述），这一类表达式的特点就是表达式的左侧必须是可操作的对象，包括如参数表，对象实例引用等。而我们的[]操作符和.操作符就属于其中。
运行机制
'[ ]'操作符：
1.let baseReference be the result of evaluating MemberExpression or CallExpression（就是位于操作符左边的操作对象）
2.let baseValue be ?GetValue(baseReference)(这一步通过getValue方法获取前面的操作对象引用的对象值)
3.let propertyNameReference be the result of evaluating Expression（操作符右边的目标名，因为这里仍然使用了evaluating所以可以接受字符串以及一些eval（）值，使得[]操作符适应性更广）
4.let propertyNameValue be ?GetValue(propertyNameReference)
5……
’.’ 操作符：
1.let baseReference be the result of evaluating MemberExpression or CallExpression（就是位于操作符左边的操作对象）
2.let baseValue be ?GetValue(baseReference)(这一步通过getValue方法获取前面的操作对象引用的对象值)
3……
4.let propertyNameString be StringValue of IdentifierName.([]操作符使用两步完成的，这里直接使用StringValue代替，所以只能接受静态类型，但是明显速度上更快)
小结
从上面的两者的执行机制的对比我们可以看出来，两者的区别主要是在对右侧属性值的处理上有很大的不同。[]操作符仍然采用了字符串的转换手段使得其可以接受动态值，而.操作符直接取操作符的StringValue使得其静态性能更佳却不能够接受静态以外的参数。
综合来看，当面对静态情况的时候还是优先选择.操作符以获得更好的性能和更强的可读性。