第 12 屆 iThome 鐵人賽

DAY 14

Modern Web

For 前端小幼苗的圖解筆記系列第 14 篇

[JavaScript] 基礎語法 / 資料型態

12th鐵人賽 javascript

Eudora

2020-09-29 23:11:20

3285 瀏覽

分享至

這邊不會介紹 JS 的歷史，此系列文章只會以語法應用筆記的方式呈現。

身為被公認語法有很多雷、很多坑的 JavaScript，若本系列文有錯誤理解敬請留言指正，感激不盡！

基本格式

命名慣例&限制

命名格式(慣例):
- 變數、函式：小駝峰式(camelCase)
- 常數：全大寫、底線分隔（如 CIRCLE_PI )
- 類別：大駝峰式(CamelCase)
字元限定
- 開頭：$、_、英文字
- 開頭後可以接數字
- 不可使用 - 連字符(保留給減法)
- 其實可以中文喔!(但不建議使用)
對大小寫敏感
- 如變數 lastName、lastname 視為不同
- 變數 Var 跟 VAR 會成功(不會當作關鍵字var)
不可使用保留字、關鍵字

註解

結尾分號可有可無，但最好統一
單行註解　//
多行註解
/*
*/

值 / 型別

資料型態 x7

boolean 布林（true / false）
null 空
undefined 未定義
number 數值
string 字串
symbol
Object 物件

基本資料型態（Primitive data types）:1 ~ 6
複合資料型態（Composite data types) :7 - Object
- 基本上不屬於基本型態的，都是 Object
- Array 是 Object 子型別（subtype）：以 typeof 查詢會得到 "object"

falsy value

fales
undefined
null
0
空字串 ''
NaN

有點特別的空陣列 []
- 用 if 判斷的時候會是 true ：
  - if([]) {} .... 會執行...
  - 用 .length 判斷才會為才會為 false (因為[].length = 0)
- 用等號符判斷時，得到 == false
  - [] === true ? false
  - [] === false ? false
  - [] == false ? true

簡易速記

句末分號可加可不加(但最好統一)
array 用 [ ]
object 用 { }
字串用 ' '或 " " 包住
單引號 / 雙引號都可以(會自動抓對應的視為範圍)

undefined / null / ""

undefined
- 宣告變數 var x 但未賦值時...
  - 其值是 undefined、類型是 undefined
- 把任一變數清空 y = undefined
空字串
- var car = "";
- 值是""，類型是 string
Null
- 是 "Nnothing"、被視為不存在的事物。
- 類型是 object
undefined 與 null值會相等、但類型不相等 (undefined vs object )：
- typeof undefined => undefined
- typeof null => object `
- null === undefined => false
- null == undefined => true
NaN 非數值
- 表示：不是合法的數
- 例如數字/字串結果會是 NaN (not a number)
  （但如果字串內是數字,JS會自動轉型,成功運算）
- 但 NaN 的 typeOf 是number哦！（不是數的數）
Infinity / -Infinity
- 超出最大可能數範圍時回傳的值
- 數字除以 0 或無窮迴圈一直加總/加乘計算
- typeOf 也是 number

用`typeof` 查詢型別

typeof "Eudora"   //=>"string" 
typeof 3.14     //=>"number" 
typeof true     //=>"boolean" 
typeof false    //=>"boolean" 
typeof x        //=>"undefined" (假如x沒有值)
typeof {name:'Eudora', age:18} //=>"object" 
typeof [1,2,3,4]              //=>"object" (並非"array"，在JS中array是object。) 
typeof null                   //=>"object" 
typeof function myFunc(){}    //=>"function非object"

Object & Array 的寫法

Object `{ }`

物件.屬性=屬性值
```
object.type=value
```
物件.方法(參數)
```
object.method()
```
- 相同物件都有相同的屬性、不同的屬性值
- 相同物件都有相同的方法可以用
name(key) & Value 成對
```
object={name1:value, name2:value....}
```

示例

var member = {
    firstName: "Eudora",
    lastName: "Huang",
    fullName: function(){
         return this.firstName + " " + this.lastName
    }
}
console.log(member.fullName())
//結果 :  "Eudora Huang"

注意:用箭頭函示寫value裡的function時，this會是undefind(this的初始值)而非該函數擁有者(此例為member)
取值時若為function必須要加 ( )，不然會輸出整段fucntion code

Array `[ ]`

基本寫法

var arr = [
    "va1",
    "va2",
    "var"
];

等同於

var arr = new Array("va", "va2", "va3");

最後一個值後面不要加逗號！
換行不換行都沒差

[ ] 取陣列值第幾個
arr[0] 第一個陣列值
arr[-1] 最後一個陣列值

同場加映

如何在網頁中加入 JS ？

寫法1. 直接寫在HTML檔

<script>
    (...JS Code)
</script>

完整寫法type="text/javascript"可省略,因JS是HTML中的默認語言:
```
<script type="text/javascript">。
    (...JS Code)
</script>
```

寫法2. 寫在獨立的JS檔，在於HTML檔中引入

<script src="js/index.js"></script>

備註

放置位置
- 可放在 <head></head>
- 可放在 <body></body>
注意引用的前後順序!

參考資料

個人 Blog: https://eudora.cc/

[CSS] 定位屬性 Position

[JavaScript] 宣告 / hoisting / function

系列文

For 前端小幼苗的圖解筆記共 30 篇

RSS系列文訂閱系列文

61 人訂閱

完整目錄

直播研討會

{{ item.channelVendor }} {{ item.webinarstarted }} |

直播中

尚未有邦友留言

立即登入留言

參賽組數

1064 組

團體組數

40 組

累計文章數

22045 篇

完賽人數

594 人

15th鐵人賽 16th鐵人賽 13th鐵人賽 14th鐵人賽 12th鐵人賽 11th鐵人賽鐵人賽 2019鐵人賽 javascript 2018鐵人賽 python 2017鐵人賽 windows php c# windows server linux css react vue.js

IT邦幫忙

For 前端小幼苗的圖解筆記系列 第 14 篇