从一道前端面试题理解JS对象存储特点和运算符执行顺序

从一道前端面试题理解JS对象存储特点和运算符执行顺序

先来看看一道挺有意思的前端面试题。面试官给了一段代码，问的是执行后的输出结果到底是什么。

const obj = {  a: 0,};obj['1'] = 0;obj[++obj.a] = obj.a++;const values = Object.values(obj);obj[values[1]] = obj.a;console.log(obj);

这道题要想做对，得先搞清楚两个关键知识点。

知识点一：对象的常规属性 (properties) 和排序属性 (elements)

不妨先看这样一段代码：

const obj = {};obj['b'] = 'b'obj[100] = '100';obj[1] = '1';obj['a'] = 'a';obj[50] = '50';obj['c'] = 'c';for (const key in obj){   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 后面。仔细分析一下，这个规律其实很明显：

1. 数字类的属性，不管设置的先后顺序，都会被优先打印，而且按照从小到大的升序排列。
2. 字符类的属性，则按照设置的顺序来打印。上面代码里依次设置了 b、a、c，打印出来的顺序也是这个顺序。

为什么会有这样的结果？

这其实是 ECMAScript 规范规定的：数字属性应该按照索引值大小升序排列，字符串属性根据创建时的顺序升序排列。在 V8 引擎中，数字属性被称为 elements，字符串属性被称为 properties。这么设计的目的，主要是为了提升访问性能。elements 对象中会按照顺序存放数字属性，有点像数组的存储方式，查询效率自然就高了。

知识点二：Ja vaScript 运算符的执行顺序

Ja vaScript 中常见运算符的优先级（从高到低排列）是这样的：

• 对象属性访问，比如 obj.a、obj['a']。
• 递增/递减，比如 a++（后置递增）或 ++a（前置递增）。
• 算术，比如 a + 1。
• 比较，比如 a > 3。
• 相等，包括 ==、===、!=、!==。
• 逻辑，比如 a && b。
• 三元，比如 flag ? '1' : '0'。
• 赋值，比如 a = 1。

对于单个赋值语句 LHS = RHS 的求值，ECMAScript 规范（ECMA-262, AssignmentExpression evaluation）规定得很清楚：

• 第一步，先得到一个 引用（Reference），也就是“要写入的位置”——先计算 LeftHandSideExpression。
• 第二步，再计算右侧的值，也就是 Evaluate AssignmentExpression。
• 最后，把第二步得到的值写入第一步的引用当中。

简单点说，对于 LHS = RHS 这样的赋值表达式，先算左侧（为了确定写到哪），再算右侧（为了知道写什么），最后把右侧的值赋给左侧。

注意：这里说的“左侧求值”，不是求它的值，而是求它的“位置”（比如属性名、变量名等）。举个例子，对于 obj[++obj.a]，要确定属性名，就必须先执行 ++obj.a。

来看一个简单例子：

const obj = {  get a() {    console.log('获取 a 的值');    return 1;  },  get b() {    console.log('获取 b 的值');    return 2;  }}obj[++obj.a] = obj.b++;console.log('obj: ', obj);

刚才说过，运算符优先级是对象属性访问 > 递增/递减 > 赋值。对于赋值运算符 LHS = RHS，会先求左侧 LHS 的引用，再计算右侧 RHS 的值，最后赋值。用这个逻辑来分析这段代码的执行顺序：

• 第一步，先取 obj.a 的值，取到的是 1，然后执行前置递增 ++obj.a，结果是 2。此时程序就知道要往 obj 的 2 属性上赋值了。
• 第二步，再取 obj.b 的值，执行后置递增 obj.b++，右侧计算出的值是 2。
• 最后，把右侧的结果 2 赋值给 obj[2] 属性。

逐行分析代码执行过程

搞清楚了这两个知识点，再来逐行解析最初那道题。

const obj = {  a: 0,};obj['1'] = 0;obj[++obj.a] = obj.a++;const values = Object.values(obj);obj[values[1]] = obj.a;console.log(obj);

1. 首先，定义了一个对象 obj，它有一个属性 a，值为 0。

const obj = {  a: 0,};

2. 接着，给 obj 添加了一个属性 1，值为 0。此时对象中有两个属性：a 和 1。

obj['1'] = 0;

由于数字属性排在前面，此时 obj 的值是：

{  "1": 0,  "a": 0,}

3. 然后执行 obj[++obj.a] = obj.a++。按照之前分析的运算符优先级，先执行左侧 ++obj.a，得到 1；再执行右侧 obj.a++，因为是后置递增，所以右侧的值是 1。执行赋值后，obj 的值变为：

{  "1": 1,  "a": 2,}

4. 经过 Object.values(obj) 后，values 的值是 [1, 2]。
5. 执行 obj[values[1]] = obj.a，转换后就是 obj[2] = 2，obj 最终变为：

{  "1": 1,  "2": 2,  "a": 2,}

这就是最终的输出结果。

小结

这道题考的就是两个知识点：

1. 在 Ja vaScript 对象中，属性的设置顺序并不等于循环打印的顺序。在 V8 中，数字属性被称为 elements（按从小到大排列存储），字符属性被称为 properties（按添加顺序存储）。
2. Ja vaScript 运算符的运算顺序是对象属性访问 > 递增/递减 > 赋值。对于赋值运算符 LHS = RHS，会先求出左侧 LHS 的引用，再计算右侧 RHS 的值，最后将右侧的值赋值给左侧的引用。