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

2021-01-10 讀芯術

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

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

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

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

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

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

逗號運算符有何作用

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

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

let x = 10;x = (x--, x);console.log(x);

// expected output: 9x = (20, 30);console.log(x);

// expected output: 30

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

x = (20), 30;

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

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

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;

· 列出數組常量中(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循環中提供多個參數。

// 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++可以放在允許一個表達式置入的地方。在這種特殊的情況下,多個表達式的使用會產生副作用,因此複合表達式接不接受最後一個值都並不重要,但是也不排除一些情況下可能也舉足輕重。

瀏覽器兼容性

留言點讚關注

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

如轉載,請後臺留言,遵守轉載規範

相關焦點

  • 七天學會javascript第一天javascript介紹
    javascript介紹javascript數據類型javascript運算符javascript對象javascript Date對象javascript String對象JavaScript常用於實現一些前端效果。前些年流行的flash已經慢慢的被淘汰,js盛行起來。javascript :客戶端編程。javascript是由客戶端去解釋運行的。
  • C語言中的運算符和表達式
    二、算術運算符和算術表達式對計算機中數據進行算術運算的運算符,稱為算術運算符,包括數學中學到的加減乘除和一些擴展。符號運算符、自增和自減運算符為一元運算符。三、關係運算符和關係表達式程序設計中需要經常對運算對象之間的大小進行比較,如:大小、相等等關係,這樣的運算符稱為關係運算符,用關係運算符將數值或表達式連接起來的式子就是關係表達式,滿足關係表達式運算符關係的結果稱為「真」,否則為假。
  • 分享幾個javascript實用函數
    從本文開始小編將定期發布javascript相關的代碼集錦,每次發十個與大家分享,首先是數組篇,也許有人會說,可以用常用的lodash的等庫啊。但是小編覺得,去讀lodash源碼的人並不多吧,所以分享的代碼集錦權當一種學習了,首先開始的是數組篇,基於es6 規範allallEqual找出數組中滿足篩洗條件中的所有元素.any// 找出數組中滿足篩洗條件中的所有元素.
  • Javascript之運算符
    一、一元操作符1、運算元:我們使用運算符所應用的對象。例如我們經常使用的加法運算:1 + 2,有兩個運算元,左邊運算元1和右邊的元算元2,但是我們在開發中經常稱之為參數。2、一元操作符定義:只能操作一個值的操作符叫做一元操作符。一元操作符是ECMAJavascript中最簡單的操作符。
  • 什麼是JavaScript對象?如何創建並引用?這就告訴你!
    1.2 什麼是對象對象:就類中的一個具體的實物。人類-具體某一個人(張三丰)。動物類-(一個具體的動物-東北虎),家電類-(具體一個比如說電視。)js 中我們包含哪些對象呢?內置對象(本地對象):Math對象,Number對象,Date對象等,系統給我們提供好的,我們拿過來用就可以了。
  • 什麼是javascript?javascript需要學哪些內容?這篇文章告訴你!
    內存中堆區和棧區4.1.1 單獨聲明4.1.2 多個變量聲明,中間用逗號隔開4.1.3 重複聲明4.1.4 遺漏聲明4.1.5 顯示聲明與隱式聲明區別JS中變量聲明分顯式聲明和隱式聲明。剩餘可以是任意字母,美元符號,下劃線和數字(3)不能使用javascript中的關鍵字(保留字)來命名變量(4)中文也可以聲明變量,不建議使用它。
  • JavaScript運算符與流程控制
    1 - 運算符(操作符)1.1 運算符的分類**運算符**(operator)也被稱為操作符,是於實現賦值、較和執算數運算等功能的符號。JavaScript中常的運算符有:- 算數運算符 - 遞增和遞減運算符 - 較運算符 - 邏輯運算符 - 賦值運算符1.2 算數運算符- 算術運算符概述概念:算術運算使的符號,於執兩個變量或值的算術運算。- 浮點數的精度問題浮點數值的Y精度是 17 位數,但在進算術計算時其精確度遠遠不如整數。
  • matlab關係運算符
    算數運算符 + 矩陣加 - 減 * 乘 .* 數組乘 ^ 矩陣乘方.^ 數組乘方 \ 矩陣左除 / 矩陣右除 .\ 數組左除 ./ 數組右除 kron 克羅內克張量積 關係運算符 邏輯與 | 邏輯或 ~ 邏輯非 xor 邏輯異或
  • JavaScript中的「黑話」
    在JavaScript中,&只能進行位運算。&,它表示按位與,此運算符需要兩個數字並返回一個數字。如果它們不是數字,則會轉換為數字。==為相等運算符,操作符會先將左右兩邊的操作數強制轉型,轉換為相同的操作數,再進行相等性比較。
  • javascript語言的六大運算符功能,你掌握了多少?
    朦朧中醒來,又過了一個冬夜。昨天還未消化,還有許多事情沒來得急做,今日又開始忙碌。這樣反覆無常的日子,不知道要過到何時!這就是生活!今天的你準備好接受新的東西了嗎?記得昨天小編說過,想要成為一名優秀的程式設計師,基礎最重要,看一遍,不如打開編輯工具,編一遍,打開筆記本,抄一遍。想成為編程大咖的你,照做了嗎?對於昨天的數據轉換,你掌握了多少?好了,廢話就不多講了,咱們開始今天的新旅程吧!
  • 簡碼編程:如何通俗理解javaScript中的三目運算符?
    如何通俗理解javaScript中的三目運算符簡碼編程工作中經常需要用到JavaScript,要閱讀別人寫的JS代碼,所以經常會遇到各種花式語法技巧,其中三目運算符就是比較難理解的一種語法技巧。其中,經常會需要用到判斷語句,某條件被滿足時執行某操作,不被滿足時執行另一個操作,如果用 if else 語句,會比較浪費文字,用三目運算符的話就很精簡了。三目運算符中的問號「?」表示前麵條件判斷不確定,冒號「:」表示後面兩個候選值或操作二選一。問號就是對此有疑問,而冒號的兩個點像不像二選一?這樣容易理解了吧?
  • Javascript之if條件語句和三目運算符
    假設一個場景,在我們的面前有左右兩條路,而我們只能選擇其中的一條,我們無非就兩種選擇,一種是走左邊的路,否則就是走右邊的路,不允許耍賴不走,只能在同一時間選擇一條路,將生活中的這一經驗轉換在js中就是我們今天要學的if條件語句。
  • Excel中公式的基本概念之運算符、絕對引用和相對引用
    其組成要素一般包含函數、單元格引用、數學運算符、常量、字符和標點等。一個公式可計算得到一個或多個結果。公式的編輯/修改有三種常用路徑,一是雙擊公式所在單元格;二是在編輯欄中編輯;三是按F2進行編輯。二、公式中的運算符公式中的運算符可分為算術運算符、比較運算符、文本運算符、引用運算符共4種。我們以單元格A1到A4的值分別2、4、8、10為例,來分別說明一下各類運算符的使用及運算結果。
  • JavaScript入門教程
    起源javascript前身叫做livescript,sun公司推出java,netspace公司引進java的概念,重新設計livescript,並更名javascript。發明者,布蘭登.艾克,表單驗證原先要經過伺服器,伺服器壓力大,等待時間長,js僅在客戶端就可完成。是什麼是一種腳本語言,是一種輕量級的程式語言。
  • Java運算符之位運算符
    位運算符 接下來通過一張表來展示Java中的位運算符及其用法,如表1所示。 表1 位運算符
  • 程式設計師必須掌握的 12 個 JavaScript 技能!
    本文將與大家分享 12 個實用的 JavaScript 技能,未來我也將在 Github 的 JS Tips&Tidbits 倉庫(https://github.com/nas5w/javascript-tips-and-tidbits)中持續更新此概念列表。
  • Python的成員運算符和身份運算符,實操演示
    一、Python的成員運算符Python的成員運算符在其他語言有這個操作,但是沒有這個稱呼,Python的成員運算符是「是否包含運算符」,主要應用在字符串或者集合中Python的成員運算符包括:Python的成員運算符實例02:在一某個集合中是否包含某一個元素
  • MySQL涉及二進位的運算符:位運算符
    截止目前我們已經學習了MySQL的三種運算符:算術運算符、比較運算符、邏輯運算符。三者有一個共同點都是針對字符型、表達式和十進位的數字。那有沒有一種專門為二進位數字提供的運算符呢?這就是本問題的主題:位運算符。
  • 冥王星鮮為人知的七個秘密!
    冥王星本該是九大行星中的一個,但是卻在2006年時被科學家從九大行星中除名,從此冥王星被降為「矮行星」。加外星人微信:UFOsee冥王星為何被除名呢?它的身上有很多秘密等著我們去發掘,下面,小編為大家盤點冥王星鮮為人知的7個秘密,一起來看看吧!從地球角度觀測遙遠冥王星有一定難度,因此它具有諸多神秘色彩。
  • 詳解Java表達式與運算符
    求圓面積的表達式為:S =π* r *r;表達式是由變量、常量和運算符的組合,它執行計算並返回計算結果。在表達式中運算符作用的變量或常量稱為操作數。在求圓面積的表達式中,乘號(*)為運算符,π和r為操作數。