从一道前端面试题，谈 JS 对象存储特点和运算符执行顺序
本文大纲
今天来看一道前端面试的代码输出题。
面试官提供了一段Javascript代码，要求给出这段代码运行后的输出结果。
constobj={a:0,};obj['1']=0;obj[++obj.a]=obj.a++;constvalues=Object.values(obj);obj[values[1]]=obj.a;console.log(obj);先分析这道题前，先补充两个个前置知识点。
知识点一：对象的常规属性 (properties) 和排序属性 (elements)
先来看下面一段代码：
constobj={};obj['b']='b'obj[100]='100';obj[1]='1';obj['a']='a';obj[50]='50';obj['c']='c';for(constkeyinobj){console.log(`key:${key}value:${obj[key]}`)}/** * 打印结果如下： key: 1 value: 1 key: 50 value: 50 key: 100 value: 100 key: b value: b key: a value: a key: c value: c */观察下打印的数据，很明显属性的设置顺序并不是打印的顺序，比如b属性是第一个设置的，打印结果却排在100后面，仔细分析他们的打印规律，可以得到如下特点：
- 数字类的属性不管设置的顺序先后，都会被优先打印，而且是按照从小到大的升序进行打印的。
- 字符类属性会按照设置的顺序进行打印，上面我们是按照
b、a、c的顺序进行设置的，打印顺序也是如此。
为什么会出现这样的结果呢？
这是因为 ECMAScript 规范中定义了数字属性应该按照索引值大小升序排列，字符串属性根据创建时的顺序升序排列。在V8中数字属性被称为elements，字符串属性被称为properties。之所以这样设置，主要是为了提升访问性能。elements对象中会按照顺序存放数字属性，类似于数组的存储，这样查询的效率当然就很高了。
知识点二：JavaScript 运算符的执行顺序
JavaScript中最常见运算符如下（运算顺序从高到低排列）：
- 对象属性访问，比如
obj.a，obj['a']。 - 递增/递减，比如
a++(后置递增) 或++a（前置递增）。 - 算术，比如
a + 1。 - 比较，包括
<(小于)、>(大于)、<=(小于等于)、>=(大于等于)，比如a > 3。 - 相等，包括
==粗略相等，===严格相等，!==粗略不等，!==严格不等，比如a == 1。 - 逻辑，也就是与或非，
&(与)、|(或)、!(非)，比如a && b。 - 三元，比如
flag ? '1' : '0'。 - 赋值，比如
a = 1。
对于单个赋值语句LHS = RHS的求值，根据ECMAScript规范（ECMA-262, AssignmentExpression evaluation），对于LeftHandSideExpression = AssignmentExpression，其计算顺序如下：
- 第一步，先得到一个
引用（Reference），即“要写入的位置”，也就是Evaluate LeftHandSideExpression。 - 第二步，再计算右侧的值，
Evaluate AssignmentExpression。 - 最后将第二步得到的值写入第一步的引用当中。
也就是说，对于LHS = RHS这样的赋值表达式，其计算顺序是左侧先求值（为了知道写到哪），右侧后求值（为了知道写什么），最后将右侧的值写入左侧。
📌 注意：这里说的“左侧求值”不是求它的值，而是求它的“位置”（比如属性名、变量名等）。例如对于
obj[++obj.a]，要确定属性名，就必须先执行++obj.a。
写个简单例子：
constobj={geta(){console.log('获取 a 的值');return1;},getb(){console.log('获取 b 的值');return2;}}obj[++obj.a]=obj.b++;console.log('obj: ',obj);我们前面说过，运算符顺序是对象属性访问 > 递增/递减 > 赋值，对于赋值运算符LHS = RHS，会先求出左侧LHS的引用（Reference），再计算右侧RHS的值，最后将右侧的值赋值给左侧的引用。所以用这个逻辑来分析下这段代码的执行顺序：
- 第一步，先取
obj.a的值， 取到的值为1， 然后执行前置递增++obj.a，结果为2，然后程序就知道要往obj的2属性上赋值了。 - 第二步，然后再取
obj.b的值，执行后置递增obj.b++，右侧计算的值为2。 - 最后把右侧计算的结果值
2赋值给obj[2]属性。
逐行分析代码执行过程
了解了这两个知识点后，让我们来逐行解析下这段代码。
constobj={a:0,};obj['1']=0;obj[++obj.a]=obj.a++;constvalues=Object.values(obj);obj[values[1]]=obj.a;console.log(obj);- 首先，我们定义了一个对象
obj，它有一个属性a，值为0。
constobj={a:0,};- 接下来，我们给
obj添加了一个属性1，值为0，此时对象中有两个属性，a和1。
obj['1']=0;由于数字属性会排在前面，此时obj的值为：
{"1":0,"a":0,}- 然后会执行
obj[++obj.a] = obj.a++，前面我们分析过运算符的优先级，先执行左侧++obj.a得到1，然后执行右侧obj.a++, 由于是后置递增，所以右侧的值为1，执行赋值后，obj的值为：
{"1":1,"a":2,}- 经过
Object.values(obj)后，values的值为[1, 2]。 - 执行
obj[values[1]] = obj.a，转换后就是obj[2] = 2。obj的值变为：
{"1":1,"2":2,"a":2,}这就是最终的输出结果了。
小结
该题主要考察两个知识点：
- 在
JavaScript对象中，属性的设置顺序并不一定是循环打印顺序，在V8中，数字类的属性在被称为elements（按从小到大排列存储），字符类属性被称为properties（按添加顺序存储）。 JavaScript运算符的运算顺序是对象属性访问 > 递增/递减 > 赋值，对于赋值运算符LHS = RHS，会先求出左侧LHS的引用（Reference），再计算右侧RHS的值，最后将右侧的值赋值给左侧的引用。