性價比極高的程式語言JavaScript - 詳細教學(1)

前言

最近有人問我如果想踏入軟體行業該學習甚麼語言，而我的回答是JavaScript(以下簡稱 JS)。

原因是 JS 幾乎無處不在，從網頁前端的 React、Vue、Angular 到後端的 Nodejs，甚至是 App 方面的 React Native 都是使用 JS，但不是說這些工作都一定使用 JS，而是學會 JS 後可以往這些方向來做發展，不會被侷限在一個領域。

此系列會以我個人對 JS 的見解來做介紹，主要目的是讓沒接觸過 JS 的人也可以看懂並學會，此外也是自己對於 JS 的一個統整。若對文章中有任何問題可以點擊右下方的對話框來與我對話。

變數宣告

變數的宣告有三種類型 var 、 let 、 const，會有許多人搞不清楚這三者的差異，這邊直接解釋清楚

var

es6 以前是沒有 let 和 const 的，且 var 有可改變值、可重複宣告的特性

javascript
1//改變a的內容
2var a = "hello";
3console.log(a); //hello
4
5a = "test";
6console.log(a); //test
7
8//重複宣告 a
9var a = "hello";
10var a = "test";
11console.log(a); // test
12
13//重複宣告 a 後在區塊語法下也會更動到 a，例如for迴圈(不懂for迴圈的下面會做介紹)
14var a = "hello";
15console.log(a); //hello
16
17for (var a = 0; a < 2; a++) console.log(a); //0, 1
18
19console.log(a); //2

let

let 算是 var 的升級版一樣有著可以改變值的特性，但不可以重複宣告，大大的降低了使用者宣告重複變數的問題

javascript
1//改變a的內容
2let a = "hello";
3console.log(a); //hello
4
5a = "test";
6console.log(a); //test
7
8//不可重複宣告
9let a = "hello";
10let a = "test";
11
12console.log(a); //Identifier 'a' has already been declared

const

const 有著不可重複宣告、不可改變值的特性，通常會用來宣告不能更改的變數，例如: api 的 host(不懂也沒關係之後會介紹到)

javascript
1//不可改變a的內容
2const a = "hello";
3console.log(a); //hello
4
5a = "test";
6console.log(a); //Assignment to constant variable.
7
8//不可重複宣告
9const a = "hello";
10const a = "test";
11
12console.log(a); //Identifier 'a' has already been declared

函式 Function

函式分為 函式 和 箭頭函式，差別在於:

1. 箭頭函式語法不同、寫法也較簡潔
2. 箭頭函式沒有自己的 this、也無法直接修改 this 的指向
3. 箭頭函式沒有自己的 arguments
4. 箭頭函式不能作為構造函式使用

這邊不懂沒關係先看過就好。

javascript
1const a = 1;
2
3//箭頭函式
4const test = () => {
5  const a = 2;
6  return a //會先判斷函式內是否有a變數，若有會使用函式內的a變數，反之會往外找a變數
7}
8
9//函式
10function test1 {
11  return a
12}
13
14console.log(test()) // 2
15console.log(test1()) // 1
16console.log(a) // 1

判斷式 - 運算子

和判斷式相關的運算子有比較運算子、邏輯運算子，首先先介紹各個運算子:

1. 比較運算子:

嚴格等於(===): 1 === 1 會回傳 true。

等於(==): 1 == "1" 會回傳 true，若使用嚴格等於 1 === "1" 會回傳 false，數字不該等於字串所以請使用嚴格等於。

嚴格不等於(!==): 1 !== 2 會回傳 true。

大於(>): 1 > 1 會回傳 false。

大於或等於(>=): 1 >= 1 會回傳 true。

小於(<): 1 < 1 會回傳 false。

小於或等於(<=): 1 <= 1 會回傳 true。

2. 邏輯運算子:

AND(&&): 所有條件都符合才會回傳 true，1 === 1 && 1 === 2 會回傳 false。

OR(||): 其中一個條件都符合就會回傳 true，1 === 1 || 1 === 2 會回傳 true。

NOT(!): !(1===1) 會回傳 false，!(1===2) 會回傳 true。

判斷式 if...if else...else...

javascript
1const a = 1;
2
3if (a === 1) {
4  console.log("a = 1"); //當a等於1 會執行此行
5} else if (a === 2) {
6  console.log("a = 2"); //當a等於2 會執行此行
7} else {
8  console.log("a不等於1或2"); //不符合上面的if 會執行此行
9}

三元運算子

三元運算子算是 if...else...的簡化寫法，讓我們將上面的代碼轉換成三元運算子

javascript
1const a = 1;
2
3a === 1
4  ? console.log("a = 1")
5  : a === 2
6  ? console.log("a = 2")
7  : console.log("a不等於1或2");

switch case

同理將上面的代碼轉換成 switch case

javascript
1const a = 1;
2
3switch (s) {
4  case 1:
5    console.log("a = 1"); //當a等於1 會執行此行
6    break; //跳出switch讓代碼不會繼續往下執行
7  case 2:
8    console.log("a = 2"); //當a等於2 會執行此行
9    break;
10  default:
11    console.log("a不等於1或2"); //不符合上面的if 會執行此行
12    break;
13}

迴圈

常見的迴圈有 for 、 while 、 do while 、遞迴，下面將用這 4 種方法來達成 0 加到 10。

for

javascript
1let a = 0;
2
3for (let i = 0; i < 10; i++) a++;
4
5console.log(a); // 10

while

當條件符合才會執行代碼

javascript
1let a = 0;
2
3while (a < 10) {
4  a++;
5}
6
7console.log(a); // 10
8
9// while也可以當無線迴圈使用
10let a = 0;
11
12while (true) {
13  //當條件等於true時則一直執行，就會變成無限迴圈
14  a++;
15  if (a === 10) break; //我們可以使用判斷式+break，來達到跳出無限迴圈的效果
16}
17
18console.log(a); // 10

do while

跟 while 差不多的寫法，差別在於 do while會先執行一次代碼才判斷是否該中斷迴圈

javascript
1let a = 0;
2
3do {
4  a++;
5} while (a < 0);
6
7console.log(a); // 這樣會印出 1;
8
9//若使用while
10let a = 0;
11
12while (a < 0) {
13  a++;
14}
15
16console.log(a); // 這樣則會印出 0;

遞迴

遞迴則是使用一直回傳 Function 的方式來達簡化迴圈的目的。

javascript
1const add = (a) => (a < 10 ? add(a + 1) : a);
2
3console.log(add(0)); // 10

最後

今天介紹了變數、函式、判斷式以及迴圈，所有的程式都是從這些基礎衍生的，之後會介紹Object、Array等，我們下次見。