前端-JavaScript基礎知識

程式設計碼農發表於2021-10-21
前端JavaScript

簡介

什麼是JavaScript？

JavaScript ( JS ) 是一種具有函式優先的輕量級，解釋型或即時編譯型的程式語言。

函式優先：程式語言中的函式可以被當作引數傳遞給其他函式，可以作為另一個函式的返回值，還可以被賦值給一個變數。

解釋型：對標編譯型語言，編譯型需預先將原始碼編成中間碼，再由直譯器解釋執行。解釋型不需要預先編譯，在程式在執行時才由直譯器翻譯執行。

JavaScript 的標準是ECMAScript截至 2012 年，所有的現代瀏覽器都完整的支援 ECMAScript 5.1，舊版本的瀏覽器至少支援 ECMAScript 3 標準。

我們所熟知的ES6是在2015年6月17日，由ECMA國際組織釋出的ECMAScript 的第六版，該版本正式名稱為 ECMAScript 2015。

https://developer.mozilla.org...

使用場景

網際網路的興起，JavaScript的使用範圍已經超出了瀏覽器。

  1. 瀏覽器平臺。HTML5的出現，瀏覽器本身的功能越來越強，JavaScript 因此得以呼叫許多系統功能，如操作本地檔案、操作圖片、呼叫攝像頭和麥克風，可以開發更多富客戶端產品。
  2. 服務端應用。node的出現使得 JavaScript 可以用於開發伺服器端應用，也使得JavaScript成為一門可以同時開發前後端的語言。
  3. 移動應用。js也正在成為手機應用的開發語言，比如：React Native 專案則是將 JavaScript 寫的元件，編譯成原生元件。
  4. 桌面應用。JavaScript甚至可以開發桌面應用，比如electronjs。
  5. 資料庫操作。在一些Nosql資料都是支援JavaScript作為操作語言，像mongodb。

基本語法

變數

變數是對值的引用，JavaScript 的變數名區分大小寫，A和a是兩個不同的變數。

var total; // 未賦值的變數是 undefined，它是個特殊的值，表示無定義。
total = 1;
var a,b; // 一個var後可以宣告多個變數。

變數提升

你可能很奇怪，執行下面程式碼沒有報錯。由於JavaScript引擎工作方式是先解析程式碼，獲取所有被宣告的變數，換句話說就是所有的變數的宣告語句，都被提升到程式碼的頭部。

console.log(a);
var a = 1;

變數規則

  • 第一個字元任意 Unicode 字母（包括英文字母和其他語言的字母），以及美元符號（$）和下劃線（_）
  • 第二個字元及後面的字元，除了 Unicode 字母、美元符號和下劃線，還可以用數字0-9。

另外中文也可以宣告變數，下面保留字除外

arguments、break、case、catch、class、const、continue、debugger、default、delete、do、else、enum、eval、export、extends、false、finally、for、function、if、implements、import、in、instanceof、interface、let、new、null、package、private、protected、public、return、static、super、switch、this、throw、true、try、typeof、var、void、while、with、yield。

語句

JavaScript程式的執行單位行，一般情況一行就是一條語句，如果一行要寫多個語句我們使用;表示語句結束。

var total = 1 + 1; // 宣告瞭一個變數total，然後將1+1的運算結果賦值給它。

註釋

// 這是單行註釋

/*
 這是
 多行
 註釋
*/

區塊

JavaScript使用大括號將多條語句包裹起來表示一個區塊，注意var宣告的變數不構成單獨的作用域，這裡區別於java。

{
  var a = 1;
}
a // 1

條件語句

// if結構
if (m === 1){ // 往往由一個條件表示式產生的
    console.log('ok')
}
// 或者
if (bool) console.log('ok');

// if/else結構
if (m === 1){
  語句;
}else{
    語句;  
} 

// if/else if.../else 結構 m==1 m==2 其它
if (m === 1) {
} else if(m === 2){
}else {
}

switch 結構

switch (m) {
  case 1:
    // ...
    break;
  case 2:
    // ...
    break;
  default:
    // ...
}

注意區別 ==與===

使用==比較兩個變數時，會發生隱式型別轉換，例如，自動將字串型別轉換為數字型別。

為了避免隱式轉換帶來的問題，我們都是用=== 進行嚴格進行比較。

三元運算子

三元運算子也可以用於邏輯判斷。

(條件) ? 表示式1 : 表示式2

迴圈語句

var i = 0;
while (i < 100) {
  console.log('i 當前為：' + i);
  i = i + 1;
}
// 區別上面，它至少會執行一次
var i = 0;
do {
  console.log('i 當前為：' + i);
} while (i < 100);

for迴圈語句

  • 初始化表示式：確定迴圈變數的初始值，只在迴圈開始時執行一次。
  • 條件表示式：每輪迴圈開始時，都要執行這個條件表示式，只有值為真，才繼續進行迴圈。
  • 遞增表示式：每輪迴圈的最後一個操作，通常用來遞增迴圈變數。
for (初始化表示式; 條件; 遞增表示式) {
  語句
}

break 和 continue

break語句用於跳出程式碼塊或迴圈，continue是結束當前迴圈，跳到下一次。

資料型別

null和undefined

● 變數沒有初始化：undefined。

● 變數不可用：null。

數值

整數和浮點數，JavaScript 內部，所有數字都是以64位浮點數形式儲存，即使整數也是如此。

1 === 1.0 // true

數值精度：根據國際標準 IEEE 754，JavaScript 浮點數的64個二進位制位，從最左邊開始，是這樣組成的。

  • 第1位：符號位，0表示正數，1表示負數
  • 第2位到第12位（共11位）：指數部分
  • 第13位到第64位（共52位）：小數部分（即有效數字）

數值範圍：64位浮點數的指數部分的長度是11個二進位制位，意味著指數部分的最大值是2047（2的11次方減1）超出的範圍不能表示。

數值進位制：

  • 十進位制：沒有前導0的數值。
  • 八進位制：有字首0o或0O的數值，或者有前導0、且只用到0-7的八個阿拉伯數字的數值。
  • 十六進位制：有字首0x或0X的數值。
  • 二進位制：有字首0b或0B的數值。

NaN

NaN是 JavaScript 的特殊值，表示“非數字”（Not a Number），主要出現在將字串解析成數字出錯的場合。

字串

由單雙引號包裹在一起的字元，就是字串。

單引號字串的內部，可以使用雙引號。雙引號字串的內部，可以使用單引號。

'abc' "abc" "'a'" // 字串

// 字串換行
var str = 'String \
String \
String';

轉義符：

  • \0 ：null（\u0000）
  • \b ：後退鍵（\u0008）
  • \f ：換頁符（\u000C）
  • \n ：換行符（\u000A）
  • \r ：Enter鍵（\u000D）
  • \t ：製表符（\u0009）
  • \v ：垂直製表符（\u000B）
  • \' ：單引號（\u0027）
  • \" ：雙引號（\u0022）
  • \\ ：反斜槓（\u005C）

字符集：javaScript 使用 Unicode 字符集。JavaScript 引擎內部，所有字元都用 Unicode 表示。

物件

var obj = { // 物件宣告
  a: '1',
  b: '2'
};

// 物件屬性讀取
obj.a 
obj['a']

// 刪除物件屬性
delete obj.a

// 判斷屬性是否存在
'a' in obj 

//物件遍歷
for (var i in obj) {
  console.log('鍵名：', i);
  console.log('鍵值：', obj[i]);
}

函式

function 關鍵字宣告。

function foo(s) {
  console.log(s);
}
// 表示式形式
var foo = function(s) {
  console.log(s);
};

Function 建構函式

var add = new Function(
  'x',
  'y',
  'return x + y'
);

// 等同於
function add(x, y) {
  return x + y;
}

函式名提升：JavaScript 引擎將函式名視同變數名，所以採用function命令宣告函式時，整個函式會像變數宣告一樣，被提升到程式碼頭部。

foo();
function foo() {console('ok')}
JavaScript函式知識點還是蠻多的，後面針對函式這一塊單獨整理。

陣列

陣列屬於一種特殊的物件。

typeof [1, 2, 3] // "object"

length：JavaScript 使用一個32位整數，儲存陣列的元素個數。這意味著，陣列成員最多隻有 4294967295 個（2^32 - 1）個，也就是說length屬性的最大值就是 4294967295。

陣列遍歷

var a = [1, 2, 3];
for (var i in a) {
  console.log(a[i]);
}

小結

本文要點回顧，歡迎留言交流。

  • JavaScript介紹。
  • JavaScript基本語法。
  • 資料型別。

相關文章