从一道前端面试题，谈 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的值，最后将右侧的值赋值给左侧的引用。