程式導師實驗計畫 [第二週] JavaScript 程式基礎篇

該如何執行 JavaScript

透過 Node.js 運行 JavaScript

官方安裝:https://nodejs.org/en/

安裝 Node.js 讓 JavaScript 跑跑跑起來

node.js 並不是一種程式語言,而是一個運行環境,它可以讓 JavaScript 在終端機上直接就給它跑起來

所以如果要運行一隻 test.js 檔

test.js

1
2
const test = "跑起來跑起來";
console.log(test);

使用 node 關鍵字運行 test.js

使用 VSCode 編輯 JavaScript

官方安裝:https://code.visualstudio.com/

VSCode 是由微軟開發的一個編輯器 ,擁有非常強大的功能,而且內建終端機,再找時間做一個整理。

用 VSCode 打開 test.js 檔案,並用它內建的終端機透過 node 運行 test.js 檔

JavaScript 基礎篇

變數

宣告變數

一開始在學程式的時候搞不太清楚變數(variable)到底是啥,其實概念就像一個可以裝東西箱子,建立一個箱子來裝東西的時候就相當於宣告一個變數來存放資料。
ES6標準之後的 JavaScript 可以定義變數的種類,就像是宣告你想用哪個種類的的  箱子來裝這個東西。

變數的種類:常數與變數

  • 常數(const):數值裝進去之後直接鎖起來,不能再更動裡面的數值
1
2
//這個a是不可變的(常數)
const a = 10;
  • 變數(let):暫時存放數值的箱子,隨時可以更動裡面的數值
1
2
//這個b是可變的(變數)
let b = 5;

而宣告數值的=並不是說a真的等於 10 的意思,比較類似於賦值的概念,把這個10裝進名叫a的箱子,把這個10賦予到名叫a的箱子上。

命名規則

所以當我們要宣告這個變數,就需要先想一個好名字給它,有其命名規則存在。

  • 開頭必需是 ASCII 字元(英文大小寫字元)、錢號($)。不可以用數字當開頭。
  • 之後的字元就可以用數字,也能用底線( _ )。
  • 大小寫是什麼,使用的時候就是什麼,大小寫是有差的。
  • 名稱不可以使用 JavaScript 的保留字,例如 const 就是 JavaScript 的保留字。

undefinednot defined

undefined:有宣告這個變數,沒有賦予數值

1
2
3
let box;
console.log(box);
// output : undefined

not defined:連宣告都沒有宣告,根本沒有這個變數,就會是not defined,而且會就會出錯。

1
console.log(somebox);
變數、函式、類別命名
  • 小駝峰式(camelCase)
    • 開頭小寫,後面的詞彙大寫,ex: this is a box => thisIsABox
  • 大駝峰式命名法(CamelCase)
    • 每個詞彙都大寫,ex: this is a box => ThisIsABox

變數與函式,用小駝峰式(camelCase),類別用大駝峰式命名法(CamelCase)

1
2
3
4
const numberOfLegs // 常數
let numberOfStudents // 變數
function setBackgroundColor() // 函式
class Student{} //類別

變數的各種型態

變數的原始型態就分為三種:booleannumberstring

另外三種型態分別為:objectundefinedfunction

可以透過typeof這個關鍵字來查詢變數的型態

1
2
3
4
5
6
7
8
9
10
console.log("typeof true,", typeof true);
console.log("typeof 30,", typeof 30);
console.log("typeof 0.5,", typeof 0.5);
console.log("typeof hello,", typeof "hello");
console.log("typeof 30,", typeof "30");
console.log("typeof [1],", typeof [1]);
console.log("typeof {a:1},", typeof { a: 1 });
console.log("typeof null,", typeof null);
console.log("typeof undefined,", typeof undefined);
console.log("typeof function,", typeof function () {});

結果如下

1
2
3
4
5
6
7
8
9
10
typeof true, boolean
typeof 30, number
typeof 0.5, number
typeof hello, string
typeof 30, string
typeof [1], object # 註1
typeof {a:1}, object
typeof null, object # 註2
typeof undefined, undefined
typeof function, function
  • 註 1 : 在 JavaScript 中其實沒有 array 的型態,如果查詢[1]會回傳 object
  • 註 2 : 需要注意的是null也被分在了object

陣列

一維陣列

一維陣列陣列的概念類似於一個箱子,裡面存放著多個東西

1
let fruits = ["banana", "apple", "watermelon"];

陣列的索引值由 0 開始,可以透過 array[number]的方式才取得資料

1
2
console.log(fruits[0]);
//output: banana

二維陣列

二維陣列就是箱子裡面又存放箱子,透過 array[number][number]第幾排第幾格來存取

1
2
3
4
5
6
const magicMatrix = [
[2, 9, 4],
[7, 5, 3],
[6, 1, 8],
];
console.log(magicMatrix[1][1]); //第一個陣列的索引值 1

儲存多種型態

JavaScript 的陣列並沒有規定只能存放哪種型態,陣列是可以存放不同型態的

但是在陣列中儲存多種不同的資料型態,會影響到處理效能,如果有多種類型,倒不如都用字串類型,取值時再做轉換。

1
let arr = [1, "1", true];

拷貝陣列

如果將一個陣列的變數在賦予給另一個變數,這並不是複製一份的意思,而是參照的概念
如果更動了aArray的數值,bArray也會跟著改變。

1
2
3
4
5
6
const aArray = [1, 2, 3];
const bArray = aArray;

aArray[0] = 100;

console.log(bArray); //[100, 2, 3]

迴圈

當條件達成時,重複執行程式。

for 迴圈

範例

1
2
3
for (let count = 0; count < 10; count++) {
//do something
}
  • 迴圈一開始,count 賦予數值 0
  • 當 count < 10 時 (判斷條件),執行區塊中的程式碼。
  • 每當執行完區塊中的程式碼後,count++ 即 count +1

while 迴圈

範例

1
2
3
4
5
let count = 0;

while (count < 10) {
//do something
}

判斷式

如果…我就…不然…我就…

1
2
3
4
5
6
7
const x = 10;

if (x > 100) {
console.log("x > 100");
} else {
console.log("x < 100");
}

解釋: x 變數為 10,如果 x 大於 100 執行 console.log('x > 100'),不然就執行 console.log('x < 100')

JavasScript 學習資源

最直覺的變數型態:物件(Object)

物件取值的方法

  • Object.key
  • Object[key]
1
2
3
4
5
6
7
8
9
10
11
12
13
14
var skillKey = "skill";
var person = {
name: "luke lin",
skill: "javascript",
pet: {
name: "neinei",
sex: "male",
},
};

console.log(person.skill); // javascript
console.log(person["skill"]); // javascript
console.log(person[skillKey]); // javascript
console.log(person.pet.sex); // male

沒那麼簡單 : 變數的運算

各種注意!!注意還動啊!!!

注意型別

javascript 屬於弱型別的程式語言,宣告變數的時候不用一起宣告型態,如果今天要執行某個運算

1
2
3
const a = "1";
const b = 1;
console.log(a + b);

前者a是 string後者bnumber,結果會是啥?

結果會印出11,所以要記得

弱型別碰到型態不一樣的情況時,會嘗試自己轉換型態

所以當碰到型態不同的情況時,可以先轉換成相同型態

1
consle.log(Nunber(a) + b); //2

可參考這篇

注意浮點數 float

針對更精確的浮點數算法的幾種做法

可參考這篇

== vs ===

 一般相等(==)會將型別一致化後才進行比較,嚴格相等(===)則不會,所以建議都只用嚴格相等(===)

  • 進行比較時當型別不一致則會先轉換型別

嚴格相等

  • 進行比較的時候不會轉換型別,所以當型別不同時就會回傳false

參考資料

從 Object 的等號真正理解變數

記憶體位置

兩個物件看起來是一樣的,但比較的結果卻是false,因為物件的比較是比較記憶體位置,當物件在宣告時,會新增一個新的記憶體位置存放。

1
2
3
4
5
6
7
8
9
const objA = {
name: "luke",
};
const objB = {
name: "luke",
};

console.log(objA === objB);
//output : flase

更新物件

1
2
3
4
5
6
7
const objA = {
name: "luke",
};
const objB = objA;

console.log(objB);
//output : { name: 'luke' }

當 objB 被賦予 objA 這個物件的資料時,是以 objA 作為參照,因此記憶體位置是相同的,所以當 objA 的資料改變時, objB 也會跟著改變。

1
2
3
4
5
6
7
8
9
const objA = {
name: "Luke",
};
const objB = objA;

objB.name = "Evan";

console.log(objA); //{ name: 'Evan' }
console.log(objA === objB); // true

當物件本身被改變,記憶體位置也會改變。

1
2
3
4
5
6
7
8
9
10
11
12
let objA = {
name: "Luke",
};
let objB = objA;

objB = {
name: "Joe",
};

console.log(objA); //{ name: 'Luke' }
console.log(objB); //{ name: 'Joe' }
console.log(objA === objB); //false

網路上的學習資源很多

如果覺得光看文件有點苦澀的話也可以找找線上的教學平台

 以上就是這篇的筆記內容

程式導師實驗計畫第三期