JavaScript中逗號運算符,鮮為人知的祕密

全文共2144字,預計學習時長

7分鐘


JavaScript中逗號運算符,鮮為人知的秘密


逗點算符可與一組表達式運算符相配合,產生顯著作用,但是其使用方式的演變卻使人混淆不清。


之所以出現這種情況,一部分原因在於逗號在JavaScript裡面有很多其他的含義。


所以為了使人瞭然於心,參與逗號以下兩種表達式時,逗號就是單純的逗點算符:


左手側表達和右手側表達式。


這些表達式也含有其他運算符、變量和函數。


逗號運算符有何作用


JavaScript中逗號運算符,鮮為人知的秘密


它可按順序連接兩個表達式,先從左到右估算所有運算數,然後返回最後一個運算數的值。


需要注意的是,逗號運算符不同於數組、對象、函數參數中的逗號。

<code>let x = 10;x = (x--, x);console.log(x);
// expected output: 9x = (20, 30);console.log(x);
// expected output: 30/<code>


在上面的例子中必須使用圓括號,因為逗號運算符在所有JavaScript中的優先級是最低的。如果沒有圓括號,表達式可能會被修改為這樣:

<code>x = (20), 30;/<code>


上面的語句最終是將20賦給X,並捨去右側表達式的值。這裡自然會想到為什麼要使用括號賦值呢?直接賦值不就好了。


答案是一些運算符以及大多數的函數都會有副作用。舉個例子,

<code>varr = (console.log(1),console.log(2),console.log(3),4);/<code>


可以看到1,2,3顯示在控制面板上,4賦值給變量varr。在上面的例子中,如果想代替逗號運算符,也可以像下面這樣使用分號:

<code>console.log(1); console.log(2); console.log(3); varr = 4;/<code>


不過,這裡的關鍵在於,分號分隔語句,而逗號分隔表達式,並且有時語句也是表達式。


示例展示


<code>var var1, var2, var3;var1 = var2 = 10, var3 = 20;// Returns  in console
console.log(var1); // 10 (left-most)var1 = (var2 = 30, var3 = 40); // Returns 6in console
console.log(var1); // 40 (right-most)/<code>


屬性鍵的計算:(這個例子相當棘手)

<code>const map = {
[1 << 0]: "Batman",
[1 << 1]: "Superman",
[1 << 2]: "Flash"
};console.log(map);
// { '1': 'Batman', '2': 'Superman', '4': 'Flash' }/<code>


用例


JavaScript中逗號運算符,鮮為人知的秘密


以下是一些逗號運算符常見的用例


· 同時聲明多個變量:var x = 0, y = 0, z = 0;

· 列出數組常量中(arrayliterals)的元素:[2, 4, 8, 10, 20, 32]

· 分離對象文字的屬性: { min: 0,max: 100 }

· 定義多個變量參數:function multiply(a, b) { return a * b; }

· 調用具有多個函數的參數:multiply(2, 6)

· 重組數列:const [lower, upper] = [0, 1];

· 重構對象: const {min, max } = { min: 0, max: 100 };

· 導入多個模塊成員:import { open, close } from "fs";

· 輸出多個模塊成員: export {mkdir, rmdir };


上面所有的例子在語句構成上都是正確的,並且都包含一個逗號,但是其中沒有一個採用了逗號運算符實際用法。下面是我能想到的一些用例-:


l 用於將一個預期表達式替換成多個表達式的位置。由逗號分隔的多個表達式的結果值等同於最後一個逗號分隔的表達式的值。

l 常用於在JavaScript中編寫功能代碼。

l 亦常用於for循環中提供多個參數。


<code>// j is initialized to some other value
// as the for loop executes both i and j are incremented
// because the comma operator allows two statements to be put in place of one
for (var i = 0; i < items.length; i++, j++) {
// loop code here that operates onitems[i]
// and sometimes uses j to access adifferent array
}/<code>


在上述例子中,i++、j++可以放在允許一個表達式置入的地方。在這種特殊的情況下,多個表達式的使用會產生副作用,因此複合表達式接不接受最後一個值都並不重要,但是也不排除一些情況下可能也舉足輕重。


瀏覽器兼容性


JavaScript中逗號運算符,鮮為人知的秘密

JavaScript中逗號運算符,鮮為人知的秘密

我們一起分享AI學習與發展的乾貨


分享到:


相關文章: