iT邦幫忙

2023 iThome 鐵人賽

DAY 15
3
Modern Web

GPT 救救我!菜雞小海獺的前端成長之旅系列 第 15

D15 - JS - 基礎 - 資料型別、運算子、陳述式與表達式定義

  • 分享至 

  • xImage
  •  

資料型別(Data type)

String(字串)

  • 可以是任何文字。
  • 若作為變數的值時,須以 " "' ' 包起來。
  • 字串的長度是指字串內有多少個字

let userName = "Amy";
console.log(userName); // amy
console.log(userName.length) // 3

Number(數字)

  • 純粹的整數(上下限為 -(2^53 -1) ~ 2^53 -1 )。超出範圍 JS 會壞掉
  • 也可以是上述範圍內的浮點數(帶小數點的數值)
  • 例:let age = 25const PI = 3.14159

Boolean(布林值)

  • 代表 true(真) 或 false(假)
  • 例:let status = false

null

  • 就是 null (空的),「不存在」、沒有對象的意思

undefined

  • 宣告但沒給值

補充:undefind 跟 not defined 的差異

undefind 是宣告了但沒賦值(沒給予值);not defined 是連宣告都沒有,所以連找都找不到。

let dinner = "noodles";
let lunch;

console.log(lunch); // undefined
console.log(amy); // ReferenceError: amy is not defined

Object(物件)

  • 在 JS 中的所有東西都可以視為 Object,且可被存於變數中。
  • 物件、陣列、函式的型別都是 Object。
  • 是鍵與鍵值(key-value)的組合。
// 我是物件
let user = {
  name: "otter",
  age: 18,
  habbit: "eat",
  family: {
    couple: "boxy",
    daughter: "littleOtter"
  }
};
let device = ["apple", "android", "sony"]; // 我是陣列

// 物件
console.log(user.name); // otter
console.log(user.family.daughter); // littleOtter
console.log(typeof user); // object

// 陣列
console.log(device[0]); // apple
console.log(device[1]); // android
console.log(typeof device); // object

symbol(ECMAScript 6 新增)

這坑先略過,我還沒實際用過……以後再來填 @W@!! (握拳


運算子們(operators)

有時也會需要 JS 幫我們做加減乘除等運算,除了基本加減乘除外,還有一些符號的使用法需要了解。以下僅列出部分,需要其他運算子的話可以到 MDN 找。

ps. 三元運算子會在流程控制時說明。(其實是漏了XD)

大類 名稱 符號 用法 說明
賦值(assignment) 賦值 = x = y 把 y 的值賦予給 x
- 加法賦值(Addition assignment) += x += y x = x + y
- 減法賦值(Subtraction assignment) -= x -= y x = x - y
算術(Arithmetic) 加(addition) + 阿就加法
- 減(Subtraction) - -
- 乘(Multiplication) * -
- 除(Division) / -
- 指數(Exponentiation) ** 2**3 2 的 3 次方=8
- 遞增(Increment) ++ i++ 先傳回 i 值再遞增,看例子
- - ++ ++i 先遞增再傳回結果,看例子
- 遞減(Decrement) -- i-- 先傳回 i 值再遞減,同 i++
- - -- --i 先遞減再傳回結果,同 ++i
- 取餘數(Remainder ) % 5 % 3 回傳 5/3 的餘數1
邏輯(Logical) 而且(and) && exp1 && exp2 若 exp1 與 exp2 皆為true,回傳 true;若任一為 false,回傳 false
- 或(or) ` `
- 否定、反轉(not) ! !(3>2) 反轉結果,原本 true 的會變 false,反之回傳 true
比較(Comparison) 等於(Equal) == x == y 兩邊值相等時回傳 true,反之回傳 false;是寬鬆的比較
- 完全等於(Strict equal) === x === y 兩邊值與 type 皆相等時回傳 true,反之回傳 false;是嚴格的比較
- 不等於(Not equal) != x != y 若 x 與 y 的值相等,則回傳 false,反之則回傳 ture;是寬鬆的比較
- 完全不等於(Strict not equal) !== x !== y 若 x 與 y 的值與 type 皆相等,則回傳 false,反之則回傳 ture;是嚴格的比較
  • 取餘數運算子:%
let x = 15;
let y = 3;

console.log(x % y); // 0

let a = 5;
let b = 2;

console.log(a % b); // 1
  • ++ 的例子,差異在於回傳的時間點不同,一個是先傳後加(i++),另一個是先加後傳(++i)
console.clear();
let i = 0;
let j = 0;

console.log(i++, ++j); // 0 1
console.log(i, j); // 1 1
  • 邏輯的例子
let x = 5;
let y = 3;
let z = 5;

if (x == y) { // false,直接跳出if
  console.log("1", x, y);
}

if (x != y) {
  console.log("2", x + y); // 8
}

if (x === z) {
  console.log("3", z); // 5
}

if (x && y) {
  let a = x + y;
  console.log("4", a); // 8
}

接下來會提到函式(Function)與流程控制(Flow conctrl),這邊先來個名詞定義一下。

陳述式(Statement)

  • 陳述式是一段敘述,是可能會做些什麼,但不會回傳結果的程式碼。
  • JS 是由多個具適當語法的陳述式(Statement)組成的

例:

  • 宣告(Declaration):如 var, let, const,class 或函式的宣告
    • 一般定義函式的方式也會提升(函式陳述式,Function Statements)。
    • 函式表達式(Function expressions)的變數會被提升,函式不會。
  • 流程控制(Control flow):如 return、break、switch、if...else、…… 等
  • 迭代(Iterations):如 for、while、…… 等
  • 其他:如 import、export、debugger、import.meta、…… 等

表達式(Expression)

是一串會回傳結果的 code。只要會回傳結果,都算是表達式。範圍太廣了就不列了XD (欸


想說的

  • 寫文章好開心,難道我很適合寫文章學習法XD?
  • 默默地寫文章,鐵人也過了半個月,繼續努力,不可以爛尾XD"
  • 因為還是一隻待轉職的菜雞,若各位大大有看到任何錯誤,請不吝指正唷!小菜雞感謝您O_<

參考資料

  • Data Type 資料型別 - JavaScript 教學|ALPHA Camp - JavaScript 入門指南,https://javascript.alphacamp.co/data-type.html
  • 語法與型別 - JavaScript | MDN,https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Guide/Grammar_and_types#%E8%B3%87%E6%96%99%E7%B5%90%E6%A7%8B%E5%8F%8A%E5%9E%8B%E5%88%A5
  • 感謝 dannyisadog 提供的教學
  • 運算式與運算子 - JavaScript | MDN,https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Reference/Operators
  • Expressions and operators - JavaScript | MDN,https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Expressions_and_operators#arithmetic_operators
  • 遞增運算子(++) - JavaScript | MDN,https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Reference/Operators/Increment
  • javascript ++i 和 i++ 的差別 | 文章 | DeTools 工具死神,https://tools.wingzero.tw/article/sn/242
  • i++和++i的区别 js-掘金,https://juejin.cn/s/i%2B%2B%E5%92%8C%2B%2Bi%E7%9A%84%E5%8C%BA%E5%88%AB%20js
  • JavaScript 表達式觀念及運用 - JS Expression | 卡斯伯 Blog - 前端,沒有極限,https://www.casper.tw/development/2020/09/17/js-expression/
  • 语句和声明 - JavaScript | MDN,https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Statements
  • JS 原力覺醒 Day07 - 陳述式 表達式 - iT 邦幫忙::一起幫忙解決難題,拯救 IT 人的一天,https://ithelp.ithome.com.tw/articles/10218937
  • 表达式与运算符 - JavaScript | MDN,https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Guide/Expressions_and_operators#%E8%A1%A8%E8%BE%BE%E5%BC%8F
  • Javascript 的表達式 (Expressions)和陳述式 (Statements) | by itsems | itsems_frontend | Medium,https://medium.com/itsems-frontend/javascript-expressions-and-statements-7bd374effc95

上一篇
D14 - JS - 基礎 - 變數與宣告、暫時死區(TDZ)
下一篇
D16 - JS - 基礎 - 函式的宣告與名詞定義
系列文
GPT 救救我!菜雞小海獺的前端成長之旅30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言