JavaScript >> Javascript 文檔 >  >> JavaScript

JavaScript 比較、數學和邏輯

在 JavaScript Day One 中,我們介紹了編程的一些基本基礎知識:變量、數據類型、註釋以及如何編寫簡單的“Hello, World!”。程序。在本課中,我將介紹比較、算術(數學)和條件語句(邏輯)。

比較運算符

在第一課中,我們介紹了單個等號 (= ) 將值應用於變量。

  • var language = "English"; 應用字符串 "English" 到變量 language .

不要與比較運算符混淆,比較運算符使用兩個 (== ) 或三個 (=== ) 等號等符號。等號將值應用於變量時,比較運算符檢查值之間的相等或差異。這是比較運算符的列表。

運算符 比較
== 相等
=== 嚴格相等
!= 不等於
!== 嚴格不等於
< 小於
> 大於
<= 小於或等於
>= 大於或等於

其中一些是小學數學課上熟悉的,還有一些是新的。比較運算符返回 truefalse 結果。

假設我們定義了一個名為 x 的變量 並為其賦值 5 .假設在每一行,x 等於 5 .

var x = 5 // assigning the number 5 to x.
x == 5 // true: 5 is equal to 5.
x == '5' // true: "5" is equal to 5 in value, but not in type ("5" is a string, not a number).
x === 5 // true.
x === '5' // false: "5" is not equal in both type and value to 5.
x != 6 // true: 6 is not equal to 5.
x !== 6 // true: 6 is not equal to 5.
x != '5' // false: "5" is equal in value, but not type, to 5.
x !== '5' // true: "5" is not equal in value and type to 5.
x < 6 // true: 5 is less than 6.
x > 4 // true: 5 is greater than 4.
x <= 4 // true: 5 is less than or equal to 5
x >= 4 // false: 4 is neither greater than nor equal to 5.

算術運算符

您可以像計算器一樣使用 JavaScript 進行基本數學運算。這些數學函數中的大部分你都會非常熟悉。

運算符 說明
+ 加法
- 減法
* 乘法
/ 部門
% 模數(餘數)
++ 增量
-- 遞減

加減乘除 完全按照您的預期工作。不太熟悉的是模數運算符,遞增和遞減。

模運算符 打印除法運算的餘數。

  • 6 / 3 = 2的情況 ,商(結果)為 2 ,餘數為 0 ,因為它是一個乾淨的整數除法。
  • 6 / 4 = 1.5的情況下 ,但是,商是 1 , 如 4 分為6 乾淨地一次,剩餘的 2 .
  • 因此,6 % 3 = 0 , 和 6 % 4 = 2 .

增量運算符 加一,遞減運算符 減一。這些對於 loops 變得非常有用 ,我們很快就會介紹。

var x = 5 // assigning the number 5 to x.
x + 5 // returns 10.
x - 5 // returns 0.
x / 5 // returns 1.
x * 5 // returns 25.
x % 3 // returns 2.
++x // returns 6.
--x // returns 4.

如果您嘗試添加一個字符串和一個數字,它將轉換為一個字符串。 5 + "5" 不返回 10 , 它返回 "55" .大多數其他不應該工作的操作將導致 NaN , 不是數字。

var x = 5 // assigning the number 5 to x.

x + '5' // returns the string "55".

x / 'Five' // returns NaN (Not a Number).

條件語句

條件語句類似於“選擇你自己的冒險”一書——你可能有選項 A、B 和 C,如果你選擇選項 B,你將跳過 A 頁面。JavaScript 中有兩種類型的條件語句 - if...else 語句和 switch 聲明。

有了條件,我們終於可以開始用我們學到的知識開始執行動作了。此時,縮進 對於代碼的可讀性變得非常有用,因為現在我們的代碼塊將比單行更長。您可以使用製表符或空格進行縮進,只要在整個代碼中保持一致即可。

條件語句是邏輯,我們有幾個邏輯運算符 幫助評估我們的陳述。

  • && - 並且
  • || - 或者
  • ! - 不是

如果...否則

您可以在 if 語句 中使用三個關鍵字 - if , else , 和 else if .基本語句如下所示。

if (condition) {
  // do something.
} else {
  // do something else.
}

在英語中,意思是“如果滿足這個條件,做某事。否則,做其他事情”。

涉及到兩個重要的語法位 - 括號 (() ) 和花括號 ({} )。要滿足的條件必須始終包含在括號中,將執行的操作將包含在大括號中,這稱為 代碼塊 .

使用我們已經學到的一些知識,我們可以執行一些代碼。想像一下穿越神秘地牢的冒險。你遇到一扇門並試圖打開它。

var doorIsLocked = true // the door is locked

if (doorIsLocked) {
  console.log('The door is locked!')
} else {
  console.log('The door is not locked. You open the door.')
}

doorIsLocked 是一個真實的陳述,“門是鎖著的!”將打印到文檔。 if 語句默認檢查真假,所以我不需要指定 if (doorIsLocked === true) ,儘管兩者都可以。在這種情況下,ifelse 就像真假。如果我們有更多的選擇而不僅僅是兩個呢?

var doorIsLocked = true // the door is locked.
var hasKey = true // you have the key.

if (doorIsLocked && hasKey) {
  // the door is locked, and you have the key
  console.log('You unlocked the door! You open the door.')
} else if (doorIsLocked && !hasKey) {
  // the door is locked, and you don't have the key (!hasKey is the same as hasKey === false)
  console.log('The door is locked.')
} else {
  console.log('The door is not locked. You open the door.')
}

演示

由於門是鎖著的並且你有鑰匙,“你打開了門!你打開了門。”將打印到文檔中。

條件語句不只是檢查真假 - 您可以使用任何條件運算符來評估表達式。假設你在武器店想買一把劍。

var money = 1000 // you have 1000 in your inventory
var swordCost = 1200 // the sword costs 1200

if (money < swordCost) {
  console.log("You don't have enough money to buy this sword!")
} else {
  console.log('You buy the sword!')
}

演示

由於你的庫存比劍的成本少,“你沒有足夠的錢買這把劍!”將打印到文檔中。

切換

switch 語句 當我們有許多表達式要評估時,它變得很有用。這類似於使用帶有許多 else if 的 if 語句 塊,但它更乾淨,更易於閱讀。

switch (expression) {
  case x:
    // do something
    break
  case y:
    // do something else
    break
  case z:
    // do something else
    break
  default:
    // default code block
    break
}

例如,讓我們打印一些您可能會根據季節進行的活動。

var season = 'Autumn'

switch (season) {
  case 'Winter':
    console.log('Go sledding!')
    break
  case 'Autumn':
    console.log('Drink a pumpkin spice latte!')
    break
  case 'Spring':
    console.log('Fly a kite!')
    break
  case 'Summer':
    console.log('Go to the beach!')
    break
  default:
    console.log('Study JavaScript.')
    break
}

演示

由於季節是“秋天”,“喝南瓜香料拿鐵!”打印到文檔中。對於每個 case ,執行不同的位。 break 關鍵字導致 switch 找到匹配項時停止運行的代碼。如果未找到匹配項,則 default 代碼將執行,就像 else .在這種情況下,“學習 JavaScript”總是一個很好的活動,無論什麼季節(但你對它的熱情不高,所以沒有感嘆號)。

結論

至此,我們已經介紹了數據類型、變量、註釋、條件、數學和邏輯,這些都是任何編程語言中非常重要的概念。接下來,我們將介紹循環和函數,並開始操作 DOM(文檔對像模型),這樣我們就可以開始與 HTML 和 CSS 交互了。


Tutorial JavaScript 教程
  1. 使用 Vue 繪製圖表:比較

  2. 在開始之前你需要知道多少?

  3. 用於 React 的 Webpack(介紹)

  4. 防止在單擊超鏈接時觸發父容器單擊事件

  5. Svelte - 新的前端框架!

  6. 什麼是 React Native?混合移動應用的興起

  7. 如何使用 CircleCI 從 Git 部署到共享主機

  1. 使用 Ivy 在 Angular 9 中動態加載組件

  2. 頂級 React UI 庫和框架

  3. 在 redux 中用新狀態更新狀態

  4. 如何在 Deno 中構建 URL 縮短器

  5. JavaScript 數組方法:map、filter、find、findIndex、fill、copyWithin、some、every、reduce

  6. docker-https-proxy 代理你的 docker 容器

  7. 我們如何打造更好的搜索體驗

  1. 使用 Backstop JS 進行視覺回歸測試

  2. 將電子應用程序編譯到預定義的操作系統

  3. 部署反應配置文件!

  4. Scrollspy、功能、Mouseaway 模態 |模塊星期一 40