Typescript入門-Day5:運算符

閱讀時間約 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);

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

9會員
99內容數
日後將分享關於我的經驗(日常、工作、技術),並期待未來能創造屬於我的宇宙。
留言0
查看全部
發表第一個留言支持創作者!
你可能也想看
迎新活動「方格新手村」:新格友註冊加入方格子,知名日料吃到飽餐券送給你! 👉 還不是 vocus 的會員嗎?點此註冊,參與新手村活動 👈 近期站上也出現了不少新格友,為了歡迎各位的加入,「方格新手村」隨之登場! 即日起,只要是新註冊帳號於活動期間內發佈 3 則文章,就有機會抽獎獲得知名日料吃到飽餐券。原格友也可以一起同樂,我們準備了小任
Thumbnail
2024-06-21
92
[TypeScript] 快速上手 satisfies,讓你輕鬆推論型別與類型檢查本文帶你深入探索 TypeScript 中的 satisfies 特性,能幫助你實現精確的型別推導與型別檢查。透過實際案例,展示如何使用 satisfies 提升代碼的型別安全與程式碼的整潔,是每位 TypeScript 開發者不可或缺的知識。
Thumbnail
[TypeScript] 10 分鐘學會 TS 中必會的 5 種型別防禦 Type Guard本文介紹 TypeScript 常遇到的混合型別,以及如何透過五種型別防禦(Type Guard)來解決。涵蓋了使用型別斷言、型別謂詞、in 運算子、typeof 運算子以及 instanceof 運算子這幾種方式。透過本文的學習,能夠更好地運用 TypeScript 進行程式碼開發。
Thumbnail
2024-03-26
10
【前端開發】TypeScript 的型別推論、型別註記與型別斷言上一篇文章分享了 TypeScript 的定義、前端角色定位,如果你不是很確定「TypeScript 是什麼?」、「TypeScript 作為 JavaScript 的超集,在網頁開發扮演怎麼樣的角色?」這兩個問題的答案,建議可以回到上一篇先了解一下。
Thumbnail
TS 筆記 | TypeScript 基礎TypeScript 基礎語法
Thumbnail
2023-11-16
2
react + typescript + webpack 如何設定 webpack alias前言 create react app 是一個可以快速設定 react 專案的一個工具,在建立專案時已經把 babel,webpack 都已經預先封裝設置好,如果我們要修改 webpack alias 設定該如何設定呢 什麼是 alias alias 在 webpack 設定意義叫做,檔案路徑
Thumbnail
2023-11-06
2
【前端開發】TypeScript 是什麼?優化 JavaScript 開發體驗的程式語言自己在剛開始進入前端領域時,很剛好遇上需要使用 TypeScript 的案子,一開始都是跟著前輩怎麼寫就怎麼寫,不太有其他餘力來思考「為什麼」會需要寫這門程式語言,直到自己後來使用了 TypeScript 完整開發了電商的購物流程,才慢慢理解到使用 TypeScript 的好處與優勢。
Thumbnail
學習用TypeScript | React | TailwildCSS 跟JayLin一起做待辦事項 AppTodo App是一個很好學習程式語言的專案開始,JayLin來帶大家手把手用TypeScript | React | TailwildCSS 來做一個小專案
Thumbnail
發佈在
JayLinXR
2023-05-16
6
Typescript: 他實際上沒有驗證你的型別Typescript: It's not actually validating your types. - DEV Community 👩‍💻👨‍💻 有時他會讓你誤解: 我遇到一個相信 typescript 保證型別就是你說的那樣. 但我必須告訴你: Typescript 不是這樣做的.
Thumbnail
2022-08-15
0
迎新活動「方格新手村」:新格友註冊加入方格子,知名日料吃到飽餐券送給你! 👉 還不是 vocus 的會員嗎?點此註冊,參與新手村活動 👈 近期站上也出現了不少新格友,為了歡迎各位的加入,「方格新手村」隨之登場! 即日起,只要是新註冊帳號於活動期間內發佈 3 則文章,就有機會抽獎獲得知名日料吃到飽餐券。原格友也可以一起同樂,我們準備了小任
Thumbnail
2024-06-21
92
[TypeScript] 快速上手 satisfies,讓你輕鬆推論型別與類型檢查本文帶你深入探索 TypeScript 中的 satisfies 特性,能幫助你實現精確的型別推導與型別檢查。透過實際案例,展示如何使用 satisfies 提升代碼的型別安全與程式碼的整潔,是每位 TypeScript 開發者不可或缺的知識。
Thumbnail
[TypeScript] 10 分鐘學會 TS 中必會的 5 種型別防禦 Type Guard本文介紹 TypeScript 常遇到的混合型別,以及如何透過五種型別防禦(Type Guard)來解決。涵蓋了使用型別斷言、型別謂詞、in 運算子、typeof 運算子以及 instanceof 運算子這幾種方式。透過本文的學習,能夠更好地運用 TypeScript 進行程式碼開發。
Thumbnail
2024-03-26
10
【前端開發】TypeScript 的型別推論、型別註記與型別斷言上一篇文章分享了 TypeScript 的定義、前端角色定位,如果你不是很確定「TypeScript 是什麼?」、「TypeScript 作為 JavaScript 的超集,在網頁開發扮演怎麼樣的角色?」這兩個問題的答案,建議可以回到上一篇先了解一下。
Thumbnail
TS 筆記 | TypeScript 基礎TypeScript 基礎語法
Thumbnail
2023-11-16
2
react + typescript + webpack 如何設定 webpack alias前言 create react app 是一個可以快速設定 react 專案的一個工具,在建立專案時已經把 babel,webpack 都已經預先封裝設置好,如果我們要修改 webpack alias 設定該如何設定呢 什麼是 alias alias 在 webpack 設定意義叫做,檔案路徑
Thumbnail
2023-11-06
2
【前端開發】TypeScript 是什麼?優化 JavaScript 開發體驗的程式語言自己在剛開始進入前端領域時,很剛好遇上需要使用 TypeScript 的案子,一開始都是跟著前輩怎麼寫就怎麼寫,不太有其他餘力來思考「為什麼」會需要寫這門程式語言,直到自己後來使用了 TypeScript 完整開發了電商的購物流程,才慢慢理解到使用 TypeScript 的好處與優勢。
Thumbnail
學習用TypeScript | React | TailwildCSS 跟JayLin一起做待辦事項 AppTodo App是一個很好學習程式語言的專案開始,JayLin來帶大家手把手用TypeScript | React | TailwildCSS 來做一個小專案
Thumbnail
發佈在
JayLinXR
2023-05-16
6
Typescript: 他實際上沒有驗證你的型別Typescript: It's not actually validating your types. - DEV Community 👩‍💻👨‍💻 有時他會讓你誤解: 我遇到一個相信 typescript 保證型別就是你說的那樣. 但我必須告訴你: Typescript 不是這樣做的.
Thumbnail
2022-08-15
0