---
# System prepended metadata

title: 站在 Python 的肩膀上開啟 JavaScript 的大門，用 Py 角度學 JS | Ep. 3 資料型態
tags: [JavaScript, Python]

---

# 站在 Python 的肩膀上開啟 JavaScript 的大門，用 Py 角度學 JS | Ep. 3 資料型態
:::info
這個系列帶著各位通過Python的角度，開始認識JavaScript這個實用的程式語言。專為曾經學習Python或認識Python，並且想學習JavaScript的人們設計，將會頻繁的提到每一種函式或語法與Python相關之處，便於將理解的知識再次利用，從中學習！
:::

本文章同步發布於 OTP Blog 個人部落格，歡迎[前往閱讀](https://winson-otp.github.io/posts/from-python-to-javascript-ep-3/)！

## 前言
這篇文章，將會介紹幾種JavaScript中的資料型態。若您曾經學習並認識 Python 中的資料型態，學習將會變得相當簡單！

Python 中的基本資料型態，包含數值(例如：int, float, bool)、字串(例如：str)，以及容器(例如：list, dict)。這些資料型態，在JavaScript都有著對應或類似的資料型態。

| Python   | JavaScript |
| -------- | ---------- |
| 整數 (int) | 數字 (Number) |
| 浮點數 (float) | 數字 (Number) |
| 布林值 (bool) | 布林值 (Boolean) |
| 字串 (str) | 字串 (String) |
| 陣列 (list) | 陣列 (Array) |
| 字典 (dict) | 物件 (Object) |

## 資料型態
接下來將開始和各位介紹各種JS中的資料型態。將會一一介紹資料型態存放的內容！

### 數字 (Number)
數字，顧名思義便是一個數值，JavaScript中的數字包含了整數 (Integer) 或帶有小數點的浮點數 (Float) ，這點與Python不同。

這邊舉幾個數字的例子

```js
// 十進制表示法
let a = 100;
let b = 1920.25;
// 科學記號表示法
let c = 1e5; // 100000
let d = 200e2; // 20000
```

除此之外，也有著較為特殊的例子，也就是無限大與無限小

```js
// Infinity; 無限大與無限小
let e = Infinity; // 無限大
let f = -Infinity; // 無限小
```

任何數都不會大於無限大 (Infinity)，並且任何數都不會小於無限小 (-Infinity)。

另一個例子是 NaN (Not a Number)，判斷方式是使用 `isNaN()` 函式，而在Python會使用 `isnan()` 函式，兩者功能相同。

```js
let g = NaN;

// 通過 isNaN() 函式判斷
isNaN(g); // 將會回傳布林值 true
isNaN(2); // 將會回傳布林值 false
```

### 布林值 (Boolean)
布林值，就像是是非題，只有是 (true) 和否 (false) 兩種可能。而在Python中的布林值，首字母是大寫的(True / False)，筆者也常常因為這點的區分而產生錯誤。

布林值會被應用在條件判斷的情況，以下是布林值的例子

```js
let h = true;
let i = isNaN(20); // 將會回傳 false，並且 false 會被作為 i 變數的值
```

### 字串 (String)
字串曾經在上一篇中提到，可以是任何的文字或內容，並且需使用單引號 (`'`) 或雙引號 (`"`) 於左右包裹，否則會發生錯誤。包裹方式使用單引號 (`'`) 或雙引號 (`"`) 在Python中同樣如此，因此若曾學習Python將能夠快速適應。

以下是幾個字串的例子

```js
let j = '中文 English हिन्दी العربية বাংলা 日本語국어 தமிழ் עברית'; // 任何語言都可以於字串中使用
let k = "這是一個字串"; // 除了用單引號外，亦可用雙引號
// 字串中不能包含與字串外的符號相同的符號
let l = "雙引號內不能包括雙引號，但可以包含'單引號'";
let m = '單引號內不能包括單引號，但可以包含"雙引號"';
let n = "可以使用反斜線\"突破限制\"，使用同樣的符號";
// 字串的其他小知識
let o = '字串' + '連接'; // 會將o變數的值定義為 字串連接
let p = '跨行\n字串'; // 會將 \n 取代為換行
```

### 陣列 (Array)
陣列，也就是一組資料，舉一個在許多教學都會出現的例子「學生成績」

當我們要存放五個學生的成績，我們或許會這樣儲存

```js
let var1 = 90;
let var2 = 100;
let var3 = 87;
let var4 = 59;
let var5 = 80;
```

但若這樣一個一個變數儲存，首先，程式碼會很長，尤其是若有更多學生的資料，將會更加嚴重。接著，當要調用一個學生的資料時，我們便需要使用該學生的變數名稱來調用，相當難以辨識，但若我們使用陣列 (使用中括號包裹，每一筆資料間用半形逗號間隔)

```js
let score = [90, 100, 87, 59, 80];
```

便可以讓程式碼較好閱讀，也適合存取資料，存取資料的方式如下，使用 `陣列名稱[索引]` 來讀取，而索引由順序從0開始計算

```js
let score = [90, 100, 87, 59, 80];
console.log(score[0]); // 會輸出 90
console.log(score[3]); // 會輸出 59
```

而陣列中也可以存取其他資料型態的資料

```js
let myList = ["first data", true, 314, false, [123]];
// 第4項資料是一個陣列，在陣列中的陣列被稱為巢狀陣列，讀取方式如下
console.log(myList[4][0]); // 將會輸出 123
```

### 物件 (Object)
物件，與Python中的字典(dict)類似。若要理解物件的用途，筆者認為可以通過Python中的字典來理解，物件就像是一個字典，可以通過一個索引，來得到一筆資料。並且索引是一段文字。

這邊舉一個物件的例子，來讓各位可以從範例認識物件

```js
let obj = { bob: 101, jame: 500, total: 601 };
```

此時，我們定義了一個名為 obj 的物件，有三個屬性，分別是 bob, jame 和 total，有兩種方法可以取出其值

```js
let obj = { bob: 101, jame: 500, total: 601 };

// 取出物件中的值
console.log(obj['bob']); // 物件名稱[屬性名稱]，將得到 101
console.log(obj.jame); // 物件名稱.屬性名稱，將得到 500
```

若使用 `物件名稱[屬性名稱]` 的方法，可以將變數名稱作為要取的屬性名稱來取值，而若使用 `物件名稱.屬性名稱` 的方法，可能會由於名稱為中文等因素無法取值。

以上，便是對於JS中幾種基本的資料型態之介紹！

## 結語
這篇文章向各位介紹了 JavaScript 中的幾種基本的資料型態，以及其用法。或許會有讀者納悶，為什麼這篇文章沒有任何實作的程式碼？這是因為資料型態雖然看似困難，但其實在每一段程式碼中，或許都有資料型態的範疇唷！例如 `console.log()` 這個函式，輸出的內容便可以是資料型態中的任何一種，如： `console.log(1.1)`、`console.log('ouo')`。

希望這篇文章，能夠讓各位更加認識 JS 中的資料型態，以上便是這篇文章的內容囉！別忘了多多追蹤本系列文章，並且歡迎留言分享你的心得或問題！感謝您的閱讀～

###### tags: `Python` `JavaScript`