Typescript入門-Day5:運算符

更新於 2024/06/09閱讀時間約 6 分鐘

算數運算子

算數運算子用於執行基本的數學操作。以下是 TypeScript 中常見的算數運算子:

  • +(加法):將兩個操作數相加。
  • -(減法):從第一個操作數中減去第二個操作數。
  • *(乘法):將兩個操作數相乘。
  • /(除法):將第一個操作數除以第二個操作數。
  • %(取餘):將第一個操作數除以第二個操作數並返回餘數。
  • ++(自增):將操作數加一。
  • -(自減):將操作數減一。

範例:

let a: number = 10;
let b: number = 5;

console.log(a + b); // 15
console.log(a - b); // 5
console.log(a * b); // 50
console.log(a / b); // 2
console.log(a % b); // 0

a++;
console.log(a); // 11

b--;
console.log(b); // 4

比較運算子

比較運算子用於比較兩個值並返回布林值。以下是常見的比較運算子:

  • ==(相等):如果兩個操作數相等,則返回 true
  • ===(嚴格相等):如果兩個操作數值和類型都相等,則返回 true
  • !=(不相等):如果兩個操作數不相等,則返回 true
  • !==(嚴格不相等):如果兩個操作數的值和類型都不相等,則返回 true
  • >(大於):如果左操作數大於右操作數,則返回 true
  • <(小於):如果左操作數小於右操作數,則返回 true
  • >=(大於等於):如果左操作數大於或等於右操作數,則返回 true
  • <=(小於等於):如果左操作數小於或等於右操作數,則返回 true

範例:

let x: number = 10;
let y: number = 5;

console.log(x == y); // false
console.log(x === 10); // true
console.log(x != y); // true
console.log(x !== y); // true
console.log(x > y); // true
console.log(x < y); // false
console.log(x >= 10); // true
console.log(x <= 5); // false

賦值運算子

賦值運算子用於為變數賦值。以下是常見的賦值運算子:

  • =(賦值):將右操作數的值賦給左操作數。
  • +=(加賦值):將右操作數與左操作數相加,並將結果賦給左操作數。
  • =(減賦值):將右操作數從左操作數中減去,並將結果賦給左操作數。
  • =(乘賦值):將左操作數與右操作數相乘,並將結果賦給左操作數。
  • /=(除賦值):將左操作數除以右操作數,並將結果賦給左操作數。
  • %=(取餘賦值):將左操作數取餘右操作數,並將結果賦給左操作數。

範例:

let a: number = 10;
let b: number = 5;

a += b; // 相當於 a = a + b;
console.log(a); // 15

a -= b; // 相當於 a = a - b;
console.log(a); // 10

a *= b; // 相當於 a = a * b;
console.log(a); // 50

a /= b; // 相當於 a = a / b;
console.log(a); // 10

a %= b; // 相當於 a = a % b;
console.log(a); // 0

位元運算子

位元運算子用於對二進位進行操作。以下是常見的位元運算子:

  • &(按位與):按位與操作。
  • |(按位或):按位或操作。
  • ^(按位異或):按位異或操作。
  • ~(按位非):按位取反操作。
  • <<(左移):將左操作數的二進位向左移動指定的位數。
  • >>(右移):將左操作數的二進位向右移動指定的位數。
  • >>>(無符號右移):將左操作數的二進位向右移動指定的位數,並在左側補零。

範例:

let a: number = 5;  // 二進位:0101
let b: number = 3; // 二進位:0011

console.log(a & b); // 1 -> 0001
console.log(a | b); // 7 -> 0111
console.log(a ^ b); // 6 -> 0110
console.log(~a); // -6 -> 1010
console.log(a << 1); // 10 -> 1010
console.log(a >> 1); // 2 -> 0010
console.log(a >>> 1); // 2 -> 0010

運算子的優先等級

運算子的優先等級決定了在表達式中運算子執行的順序。以下是常見運算子的優先等級(從高到低):

  1. 括號:()
  2. 成員訪問:obj.property
  3. 物件創建:new
  4. 函數調用:func()
  5. 遞增和遞減:++-
  6. 一元運算子:+,``,!~
  7. 乘法,除法,取餘:``,/%
  8. 加法和減法:+,``
  9. 位移運算:<<>>>>>
  10. 比較運算:<<=>>=
  11. 相等運算:==!====!==
  12. 按位與:&
  13. 按位異或:^
  14. 按位或:|
  15. 邏輯與:&&
  16. 邏輯或:||
  17. 三元運算子:? :
  18. 賦值運算子:=+===
  19. 解構賦值:=

範例:

let a: number = 10;
let b: number = 5;
let c: number = 2;
let result: number;

result = a + b * c; // 20,因為乘法的優先等級高於加法
console.log(result);

result = (a + b) * c; // 30,因為括號的優先等級最高
console.log(result);

result = a > b && b > c; // true,因為比較運算和邏輯運算
console.log(result);

理解運算子的優先等級對於編寫正確和高效的代碼非常重要。

avatar-img
15會員
111內容數
日後將分享關於我的經驗(日常、工作、技術),並期待未來能創造屬於我的宇宙。
留言0
查看全部
avatar-img
發表第一個留言支持創作者!
Michael楊 的其他內容
本章節旨在介紹 TypeScript 的基本資料型別,包括內建型別、型別轉換、自訂型別、元組、集合、陣列、和字典型別。透過理解和使用這些型別,可以提高代碼的可讀性和可維護性。
本章節將引導你如何建立一個TypeScript開發環境,這包括安裝Node.js、npm和TypeScript,建立一個TypeScript項目,設置編輯器,以及編寫和編譯TypeScript代碼。在完成這些步驟之後,你將能夠編寫、編譯和運行TypeScript代碼。
本章節旨在介紹TypeScript的基本語法,包括一般結構、程式進入點、註解以及變數的定義和賦值。這些知識將幫助讀者瞭解TypeScript的基本架構,並且可以開始使用TypeScript進行開發。
TypeScript是一種由Microsoft開發和維護的開源編程語言。它是JavaScript的超集,主要擴展了JavaScript的語法,增加了靜態類型檢查和其他特性,使得開發大型應用程序更為方便和可靠。
套件(Package)是將程式或程式庫進行組織、分發和共享的一種方式。在軟體開發中,套件通常包含了相關的程式碼、資源文件和元數據,並提供了統一的名稱空間和版本管理。
當你在開發程式時,難免會遇到各種錯誤和異常情況。這些錯誤可能是因為代碼中的錯誤、外部資源無法訪問或其他不可預期的狀況。為了提高程式的可靠性、穩定性和可維護性,我們使用「例外處理」來處理這些異常情況。
本章節旨在介紹 TypeScript 的基本資料型別,包括內建型別、型別轉換、自訂型別、元組、集合、陣列、和字典型別。透過理解和使用這些型別,可以提高代碼的可讀性和可維護性。
本章節將引導你如何建立一個TypeScript開發環境,這包括安裝Node.js、npm和TypeScript,建立一個TypeScript項目,設置編輯器,以及編寫和編譯TypeScript代碼。在完成這些步驟之後,你將能夠編寫、編譯和運行TypeScript代碼。
本章節旨在介紹TypeScript的基本語法,包括一般結構、程式進入點、註解以及變數的定義和賦值。這些知識將幫助讀者瞭解TypeScript的基本架構,並且可以開始使用TypeScript進行開發。
TypeScript是一種由Microsoft開發和維護的開源編程語言。它是JavaScript的超集,主要擴展了JavaScript的語法,增加了靜態類型檢查和其他特性,使得開發大型應用程序更為方便和可靠。
套件(Package)是將程式或程式庫進行組織、分發和共享的一種方式。在軟體開發中,套件通常包含了相關的程式碼、資源文件和元數據,並提供了統一的名稱空間和版本管理。
當你在開發程式時,難免會遇到各種錯誤和異常情況。這些錯誤可能是因為代碼中的錯誤、外部資源無法訪問或其他不可預期的狀況。為了提高程式的可靠性、穩定性和可維護性,我們使用「例外處理」來處理這些異常情況。
你可能也想看
Google News 追蹤
Thumbnail
*合作聲明與警語: 本文係由國泰世華銀行邀稿。 證券服務係由國泰世華銀行辦理共同行銷證券經紀開戶業務,定期定額(股)服務由國泰綜合證券提供。   剛出社會的時候,很常在各種 Podcast 或 YouTube 甚至是在朋友間聊天,都會聽到各種市場動態、理財話題,像是:聯準會降息或是近期哪些科
Thumbnail
本文帶你深入探索 TypeScript 中的 satisfies 特性,能幫助你實現精確的型別推導與型別檢查。透過實際案例,展示如何使用 satisfies 提升代碼的型別安全與程式碼的整潔,是每位 TypeScript 開發者不可或缺的知識。
Thumbnail
本文介紹 TypeScript 常遇到的混合型別,以及如何透過五種型別防禦(Type Guard)來解決。涵蓋了使用型別斷言、型別謂詞、in 運算子、typeof 運算子以及 instanceof 運算子這幾種方式。透過本文的學習,能夠更好地運用 TypeScript 進行程式碼開發。
Thumbnail
上一篇文章分享了 TypeScript 的定義、前端角色定位,如果你不是很確定「TypeScript 是什麼?」、「TypeScript 作為 JavaScript 的超集,在網頁開發扮演怎麼樣的角色?」這兩個問題的答案,建議可以回到上一篇先了解一下。
Thumbnail
前言 create react app 是一個可以快速設定 react 專案的一個工具,在建立專案時已經把 babel,webpack 都已經預先封裝設置好,如果我們要修改 webpack alias 設定該如何設定呢 什麼是 alias alias 在 webpack 設定意義叫做,檔案路徑
Thumbnail
自己在剛開始進入前端領域時,很剛好遇上需要使用 TypeScript 的案子,一開始都是跟著前輩怎麼寫就怎麼寫,不太有其他餘力來思考「為什麼」會需要寫這門程式語言,直到自己後來使用了 TypeScript 完整開發了電商的購物流程,才慢慢理解到使用 TypeScript 的好處與優勢。
Thumbnail
Todo App是一個很好學習程式語言的專案開始,JayLin來帶大家手把手用TypeScript | React | TailwildCSS 來做一個小專案
Thumbnail
Typescript: It's not actually validating your types. - DEV Community 👩‍💻👨‍💻 有時他會讓你誤解: 我遇到一個相信 typescript 保證型別就是你說的那樣. 但我必須告訴你: Typescript 不是這樣做的.
Thumbnail
*合作聲明與警語: 本文係由國泰世華銀行邀稿。 證券服務係由國泰世華銀行辦理共同行銷證券經紀開戶業務,定期定額(股)服務由國泰綜合證券提供。   剛出社會的時候,很常在各種 Podcast 或 YouTube 甚至是在朋友間聊天,都會聽到各種市場動態、理財話題,像是:聯準會降息或是近期哪些科
Thumbnail
本文帶你深入探索 TypeScript 中的 satisfies 特性,能幫助你實現精確的型別推導與型別檢查。透過實際案例,展示如何使用 satisfies 提升代碼的型別安全與程式碼的整潔,是每位 TypeScript 開發者不可或缺的知識。
Thumbnail
本文介紹 TypeScript 常遇到的混合型別,以及如何透過五種型別防禦(Type Guard)來解決。涵蓋了使用型別斷言、型別謂詞、in 運算子、typeof 運算子以及 instanceof 運算子這幾種方式。透過本文的學習,能夠更好地運用 TypeScript 進行程式碼開發。
Thumbnail
上一篇文章分享了 TypeScript 的定義、前端角色定位,如果你不是很確定「TypeScript 是什麼?」、「TypeScript 作為 JavaScript 的超集,在網頁開發扮演怎麼樣的角色?」這兩個問題的答案,建議可以回到上一篇先了解一下。
Thumbnail
前言 create react app 是一個可以快速設定 react 專案的一個工具,在建立專案時已經把 babel,webpack 都已經預先封裝設置好,如果我們要修改 webpack alias 設定該如何設定呢 什麼是 alias alias 在 webpack 設定意義叫做,檔案路徑
Thumbnail
自己在剛開始進入前端領域時,很剛好遇上需要使用 TypeScript 的案子,一開始都是跟著前輩怎麼寫就怎麼寫,不太有其他餘力來思考「為什麼」會需要寫這門程式語言,直到自己後來使用了 TypeScript 完整開發了電商的購物流程,才慢慢理解到使用 TypeScript 的好處與優勢。
Thumbnail
Todo App是一個很好學習程式語言的專案開始,JayLin來帶大家手把手用TypeScript | React | TailwildCSS 來做一個小專案
Thumbnail
Typescript: It's not actually validating your types. - DEV Community 👩‍💻👨‍💻 有時他會讓你誤解: 我遇到一個相信 typescript 保證型別就是你說的那樣. 但我必須告訴你: Typescript 不是這樣做的.