本文大綱

今天來看一道前端面試的代碼輸出題。

面試官提供了一段 Javascript 代碼，要求給出這段代碼運行后的輸出結果。

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);

先分析這道題前，先補充兩個個前置知識點。

知識點一：對象的常規(guī)屬性 (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
 */

觀察下打印的數(shù)據(jù)，很明顯屬性的設置順序并不是打印的順序，比如 b 屬性是第一個設置的，打印結果卻排在 100 后面，仔細分析他們的打印規(guī)律，可以得到如下特點：

1. 數(shù)字類的屬性不管設置的順序先后，都會被優(yōu)先打印，而且是按照從小到大的升序進行打印的。
2. 字符類屬性會按照設置的順序進行打印，上面我們是按照 b、a、c 的順序進行設置的，打印順序也是如此。

為什么會出現(xiàn)這樣的結果呢？

這是因為 ECMAScript 規(guī)范中定義了數(shù)字屬性應該按照索引值大小升序排列，字符串屬性根據(jù)創(chuàng)建時的順序升序排列。在 V8 中數(shù)字屬性被稱為 elements，字符串屬性被稱為 properties。之所以這樣設置，主要是為了提升訪問性能。elements 對象中會按照順序存放數(shù)字屬性，類似于數(shù)組的存儲，這樣查詢的效率當然就很高了。

知識點二：JavaScript 運算符的執(zhí)行順序

JavaScript 中最常見運算符如下（運算順序從高到低排列）：

• 對象屬性訪問，比如 obj.a，obj['a']。
• 遞增/遞減，比如 a++(后置遞增) 或 ++a（前置遞增）。
• 算術，比如 a + 1。
• 比較，包括 <(小于)、>(大于)、<=(小于等于)、>=(大于等于)，比如 a > 3。
• 相等，包括 == 粗略相等， ===嚴格相等，!== 粗略不等，!== 嚴格不等，比如 a == 1。
• 邏輯，也就是與或非，&(與)、|(或)、!(非)，比如 a && b。
• 三元，比如 flag ? '1' : '0'。
• 賦值，比如 a = 1。

對于單個賦值語句 LHS = RHS 的求值，根據(jù) ECMAScript 規(guī)范（ECMA-262, AssignmentExpression evaluation），對于 LeftHandSideExpression = AssignmentExpression，其計算順序如下：

• 第一步，先得到一個 引用（Reference），即“要寫入的位置”，也就是 Evaluate LeftHandSideExpression。
• 第二步，再計算右側的值，Evaluate AssignmentExpression。
• 最后將第二步得到的值寫入第一步的引用當中。

也就是說，對于LHS = RHS 這樣的賦值表達式，其計算順序是左側先求值（為了知道寫到哪），右側后求值（為了知道寫什么），最后將右側的值寫入左側。

?? 注意：這里說的“左側求值”不是求它的值，而是求它的“位置”（比如屬性名、變量名等）。例如對于 obj[++obj.a]，要確定屬性名，就必須先執(zhí)行 ++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 的引用（Reference），再計算右側 RHS 的值，最后將右側的值賦值給左側的引用。所以用這個邏輯來分析下這段代碼的執(zhí)行順序：

• 第一步，先取 obj.a 的值， 取到的值為 1， 然后執(zhí)行前置遞增 ++obj.a，結果為 2，然后程序就知道要往 obj 的 2 屬性上賦值了。
• 第二步，然后再取 obj.b 的值，執(zhí)行后置遞增 obj.b++，右側計算的值為 2。
• 最后把右側計算的結果值 2 賦值給 obj[2] 屬性。

逐行分析代碼執(zhí)行過程

了解了這兩個知識點后，讓我們來逐行解析下這段代碼。

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;

由于數(shù)字屬性會排在前面，此時 obj 的值為：

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

3. 然后會執(zhí)行 obj[++obj.a] = obj.a++，前面我們分析過運算符的優(yōu)先級，先執(zhí)行左側 ++obj.a 得到 1，然后執(zhí)行右側 obj.a++, 由于是后置遞增，所以右側的值為 1，執(zhí)行賦值后，obj 的值為：

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

4. 經過 Object.values(obj) 后，values 的值為 [1, 2]。
5. 執(zhí)行 obj[values[1]] = obj.a ，轉換后就是 obj[2] = 2。obj 的值變?yōu)椋?/li>

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

這就是最終的輸出結果了。

小結

該題主要考察兩個知識點：

1. 在 JavaScript 對象中，屬性的設置順序并不一定是循環(huán)打印順序，在 V8中，數(shù)字類的屬性在被稱為 elements（按從小到大排列存儲），字符類屬性被稱為 properties（按添加順序存儲）。
2. JavaScript 運算符的運算順序是對象屬性訪問 > 遞增/遞減 > 賦值，對于賦值運算符 LHS = RHS，會先求出左側 LHS 的引用（Reference），再計算右側 RHS 的值，最后將右側的值賦值給左側的引用。

到此這篇關于從JS對象存儲特點和運算符執(zhí)行順序的文章就介紹到這了,更多相關JS對象存儲和運算符執(zhí)行順序內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

最新評論