建站
咨詢
售后
建站咨詢
新聞中心
這里有您想知道的互聯(lián)網(wǎng)營銷解決方案
JavaScript中逗號運算符，鮮為人知的秘密
逗點算符可與一組表達式運算符相配合，產(chǎn)生顯著作用，但是其使用方式的演變卻使人混淆不清。
之所以出現(xiàn)這種情況，一部分原因在于逗號在JavaScript里面有很多其他的含義。
所以為了使人了然于心，參與逗號以下兩種表達式時，逗號就是單純的逗點算符：左手側表達和右手側表達式。
這些表達式也含有其他運算符、變量和函數(shù)。
逗號運算符有何作用
它可按順序連接兩個表達式，先從左到右估算所有運算數(shù)，然后返回最后一個運算數(shù)的值。
需要注意的是，逗號運算符不同于數(shù)組、對象、函數(shù)參數(shù)中的逗號。
- let x = 10;x = (x--, x);console.log(x);
- // expected output: 9x = (20, 30);console.log(x);
- // expected output: 30
在上面的例子中必須使用圓括號，因為逗號運算符在所有JavaScript中的優(yōu)先級是最低的。如果沒有圓括號，表達式可能會被修改為這樣：
- x = (20), 30;
上面的語句最終是將20賦給X，并舍去右側表達式的值。這里自然會想到為什么要使用括號賦值呢?直接賦值不就好了。
答案是一些運算符以及大多數(shù)的函數(shù)都會有副作用。舉個例子，
- varr = (console.log(1),console.log(2),console.log(3),4);
可以看到1,2,3顯示在控制面板上，4賦值給變量varr。在上面的例子中，如果想代替逗號運算符，也可以像下面這樣使用分號：
- console.log(1); console.log(2); console.log(3); varr = 4;
不過，這里的關鍵在于，分號分隔語句，而逗號分隔表達式，并且有時語句也是表達式。
示例展示
- 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)
屬性鍵的計算：(這個例子相當棘手)
- const map = {
- [1 << 0]: "Batman",
- [1 << 1]: "Superman",
- [1 << 2]: "Flash"
- };console.log(map);
- // { '1': 'Batman', '2': 'Superman', '4': 'Flash' }
用例
以下是一些逗號運算符常見的用例：
- 同時聲明多個變量：var x = 0, y = 0, z = 0;
- 列出數(shù)組常量中(arrayliterals)的元素：[2, 4, 8, 10, 20, 32]
- 分離對象文字的屬性： { min: 0,max: 100 }
- 定義多個變量參數(shù)：function multiply(a, b) { return a * b; }
- 調(diào)用具有多個函數(shù)的參數(shù)：multiply(2, 6)
- 重組數(shù)列：const [lower, upper] = [0, 1];
- 重構對象： const {min, max } = { min: 0, max: 100 };
- 導入多個模塊成員：import { open, close } from "fs";
- 輸出多個模塊成員： export {mkdir, rmdir };
上面所有的例子在語句構成上都是正確的，并且都包含一個逗號，但是其中沒有一個采用了逗號運算符實際用法。下面是我能想到的一些用例：
- 用于將一個預期表達式替換成多個表達式的位置。由逗號分隔的多個表達式的結果值等同于最后一個逗號分隔的表達式的值。
- 常用于在JavaScript中編寫功能代碼。
- 亦常用于for循環(huán)中提供多個參數(shù)。
- // 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
- }
在上述例子中，i++、j++可以放在允許一個表達式置入的地方。在這種特殊的情況下，多個表達式的使用會產(chǎn)生副作用，因此復合表達式接不接受最后一個值都并不重要，但是也不排除一些情況下可能也舉足輕重。
瀏覽器兼容性
網(wǎng)站名稱：JavaScript中逗號運算符，鮮為人知的秘密
標題鏈接：http://www.5511xx.com/article/cohpedo.html
