javaScript系列 [16]-語言基礎
2022-01-01 23:15:40

概述 JavaScript是一門動態、弱類型的解釋型高級編程語言，它基于原型，支持面向對象和函數式編程等多種編程范式，通常簡稱為js。在世界上的絕大多數網站中都能看到JavaScript的身影，世界上所有的主流瀏覽器(Chrome、IE、Firefox、Safari、Opera)都支持它。

作者 Brendan Eich

背景 JavaScript誕生于1995年，其誕生的初衷是為了減輕服務器端的壓力而在客戶端提供一種表單驗證的功能。最初命名為Mocha，1995年9月在Netscape Navigator 2.0的Beta版中改名為LiveScript，同年12月，Netscape Navigator 2.0 Beta 3中部署時被重命名為JavaScript，當時網景公司與昇陽電腦公司(Sun)組成的開發聯盟為了讓這門語言搭上Java這個編程語言“熱詞”，將其臨時改名為JavaScript(其實就像現在某些網紅蹭熱度一樣)。

標準 1996年11月，網景正式向ECMA（歐洲計算機制造商協會）提交語言標準。1997年6月，ECMA以JavaScript語言為基礎制定了ECMAScript標準規范ECMA-262。JavaScript成為了ECMAScript最著名的實現之一。實現ECMAScript規范的語言還有Adobe的ActionScript和微軟的JScript。

范圍 雖然在大多數情況下，我們都認為ECMAScript和JavaScript表達的是相同的含義，但實際上JavaScript所表達的卻比ECMAScript要廣泛的多。完整的JavaScript應該由以下三部分組成：

? ECMAScript 由ECMA-262定義，提供核心語法功能。
? DOM 全稱Document Object Model文檔對象模型，提供訪問和操作網頁的API。
? BOM 全稱Browser Object Model瀏覽器對象模型，提供與瀏覽器交互的方法和接口。

歷史 ECMAScript迄今已經歷多個版本的迭代，下面給出主要的版本歷史。

關系 ECMAScript是標準(規范)，JavaScript是實現。H5是一種新的技術，JS用于實現H5新標簽深層的擴展功能。HTML表示網頁的核心內容和結構，CSS用于設置網頁的樣式，JavaScript控制網頁的行為。

應用 JavaScript主要用于瀏覽器Web、物聯網、游戲、桌面和移動應用開發和以及服務器端的開發。

參考 ECMA官網 ECMA-262規范PDF文件 布蘭登·艾克博客

在html頁面中使用JavaScript

在html頁面中編寫JavaScript代碼需要借助script標簽，具體的使用方式有兩種。① 在頁面中嵌入JavaScript代碼。在html頁面中創建script標簽，設置script標簽的type屬性為text/javascript，并在標簽中直接編寫JavaScript代碼即可。② 在頁面中引入外部的js文件。在html頁面中創建script標簽，把javaScript代碼單獨保存在.js后綴的文件中，然后通過設置script標簽的src屬性來引入js文件。

script 標簽的 type 屬性可以省略，默認值即為text/javascript。
script 標簽的 屬性(節點)主要有：type(類型)、src(資源地址)、async(異步加載)、defer(延遲執行)、charset(字符集)等。

注釋 JavaScript遵循C語言的注釋風格，支持單行和多行注釋。

單行注釋 // 
多行注釋 /*...*/

語句

概念 在JavaScript中，可以簡單認為一行完整的代碼就是一條語句(statement)。
分類 整體來講，JavaScript的語句大致可以區分為聲明賦值語句和控制語句兩種。
分號 JavaScript中使用分號(;)來間隔多條語句，若各語句獨占一行那么大部分情況下可省略分號。

控制輸出

JavaScript需要具體的JavaScript引擎(解析器)來解析，該引擎通常由瀏覽器提供，即JavaScript代碼需要運行在瀏覽器中。JavaScript代碼中常見的控制輸出方式有以下三種：

? 輸出到頁面 document.write()
? 彈出框顯示 alert()
? 控制臺輸出 console.log()

  /*01 彈出對話框提示*/
  alert("喜歡我就點我吧！");
  alert("小姐姐你好，我是阿貍~");
  alert("拜拜 >.< ");

  /*02 直接向在網頁中輸出內容*/
  document.write("蟬鳴的夏季，剛好遇見你。");
  document.write("<h1>遇見</h1>");

  /*03 控制臺打印輸出*/
  console.log(123);
  console.log("文頂頂");

直接量

說明 直接量(literal)指的是程序中直接使用的數據值。

當一個值(數字、字符串等)直接出現在JavaScript程序中時，我們稱之為直接量。

JavaScript語言中直接量(字面量)有很多，包括數字直接量、字符串直接量、數組直接量、對象直接量以及正則表達式直接量等等，下面簡單給出一些直接量的示例。

null;            //空
18;              //數字
19.3;            //小數
"wendingding";   //字符串文本
true;            //布爾值
false;           //布爾值
/abc/gi;         //正則表達式直接量

變量基礎

定義 變量是編程語言中能夠存儲計算結果或表示值的抽象概念。
使用 在JavaScript語言中 變量需要先聲明再使用。
聲明 使用 var 關鍵字來聲明變量，如果省略var關鍵字那么該變量默認成為全局變量。
作用 記錄特定的內容，并通過變量名來訪問它們。
備注 JavaScript變量是無類型的(untype)，任何變量都可以被賦予任何類型的值。
原理 當使用var關鍵字聲明變量時，計算機會從內存中分配儲存空間來存放不同類型的內容。

    /*01 先聲明兩個變量，然后再輸出變量的值到控制臺*/
    var age = 18;
    var name = "wendingding";
    console.log(age);
    console.log(name);
    age = 20;
    console.log(age);                 //變量的值可以被修改
    
    /*02 可以一次性聲明多個變量*/
    var address = "北京市",className = "H5";
    console.log(address,className);   //北京市 H5

語法說明 var name_1 [ = value1][,...,name_n [ = value_n]]]

    /*聲明示例*/
    var i;
    var a = '<strong></strong>';
    var p,q;
    var x = 2,y = 3,z;
    
    /*示例說明
    * JavaScript中的=和數學中的=不一樣，在JavaScript中=是賦值運算符。
    * var a = '<strong></strong>';  這句話分成兩個部分。
    * 左值 ：在等號左側，是變量名（同時被賦值）
    * 右值 ：在等號右側，是存放進變量中的東西（給變量賦值）
    * 備注 ：使用var關鍵字多次聲明同一個變量是無所謂的(正確、無意義也不報錯)。
    * */  

命名規范

標識符 標識符(identifier)指的是JavaScript代碼中變量、函數、屬性的名字，或者函數的參數。標識符(變量)在命名的時候并不能隨心所欲，也有對應的規則和要求。下面列出具體的命名規范：

① 標識符可以使用下劃線、字母、數字和$符號。
② 標識符不能以數字開頭。
③ 標識符區分大小寫(區別于HTML)。
④ 標識符不能使用JavaScript的關鍵字和保留字。

  /*01 常見(合法)的標識符命名方式*/
  /*純字母*/
  var age  = 18;
  var name = "wendingding";
  var stuAge  = 21;
  var stuName = "寧夏";

  /*字母、數字、下劃線、$的組合*/
  var num1 = 1.5;
  var num2 = 200;
  var num$ = num1 + num2;
  var stu_Score = 99;

  /*02 錯誤的命名演示*/
  var if = 123;               //錯誤：使用關鍵字
  var super =  "哈哈哈"        //錯誤：使用保留字
  var 2age = 123;             //錯誤：數字開頭
  var stu-address = "北京市";  //錯誤：使用了非法的-

命名風格

JavaScript語言常用的標識符命名風格是駝峰標識法(camel-case)，即標識符的名稱由多個單詞組合的時候，每個單詞的首字母大寫以區分。駝峰標識又可以分成大駝峰標識和小駝峰標識，它們的區別在于整個標識符的首字母需要大寫。

小駝峰標識 var wenDingDing  = "神秘人";
大駝峰標識 var WenDingDing  = "神秘人";

當然，在寫代碼的時候給標識符命名并非一定要使用駝峰標識，這只是一種建議的風格，譬如有的開發者就喜歡用下劃線來連接單詞，類似于wen_ding_ding、stu_Name這樣。類似的還有匈牙利命名法等，但在JavaScript編程中不建議使用。

JavaScript規定的關鍵字 關鍵字通常用于執行特定的操作。

JavaScript規定的保留字 保留字是給語言未來發展而預留的。

在編程語言中，能夠表示并操作的值的類型被稱為數據類型(type)，能夠支持多種數據類型是每一門編程語言的基本特征。在編寫程序的時候，如果我們需要將某個(些)值保存起來以備將來使用時，就會將該 值 賦值給一個變量(將值保存到變量中)。

JavaScript語言的數據類型可以簡單的分成基本(簡單)類型和復雜(復合)類型。

基本類型主要包括：字符串(string)、數值(number)、布爾值(boolean)、Null和undefined五種。其中Null類型有一個值，即null表示為空，而undefined類型也只有一個對應值undefined，表示變量未定義(即聲明變量后未給變量賦值)。

復雜類型主要是對象類型，包括Object對象、Function函數、RegExp正則等，這里不做具體的展開。

typeof關鍵字

如果我們需要判斷變量的類型，那么可以使用 typeof 關鍵字(操作符)。

語法 typeof 變量 | typeof(變量)
結果 typeof 關鍵字執行后的結果總是為一個string類型的字符串。

  /*多種類型的變量*/
  var age   = 18;                     //數值類型
  var name  = "寧夏";                  //字符串類型
  var isFun = true;                   //布爾類型值
  var a;                              //未定義
  var obj   = {id:1,desc:"描述信息"};   //Object類型
  function fn() {
    console.log("我是fn函數");
  }

  console.log(typeof age);            //number
  console.log(typeof name);           //string
  console.log(typeof isFun);          //boolean
  console.log(typeof a);              //undefined
  console.log(typeof obj);            //object

  /*typeof的兩種使用方式*/
  console.log(typeof fn);             //function
  console.log(typeof(fn));            //function

  obj = null;
  console.log(typeof obj);            //object

注意 對null執行typeof計算的結果為object,其實這被認為是JavaScript這門語言的一個設計錯誤。

字符串類型

定義 由〇個或多個16位Unicode字符組成的字符序列。
表示 字符串可以由雙引號或單引號表示。
操作 可以通過length屬性來獲取字符串的長度，且多個字符串之間可以通過 + 來進行拼接。

  var str1 = "Hi ~";
  var str2 = "Wendingding!";
  var str3 = str1 + " " +str2;    /*字符串的拼接 */
  console.log(str3);              /*輸出結果：Hi ~ Wendingding!*/
  console.log(str3.length);       /*輸出結果：17 */

注意 JavaScript中的字符串是不可變的，這也就意味著要改變某個變量保存的字符串，那么需要先銷毀原來的字符串然后再用另外一個包含新值的字符串來填充該變量。

    var test = 'Hi ! ';
    test = test + 'Nice to meet u ~';
    console.log(test);  //Hi ! Nice to meet u ~
    
    /*描述上述代碼的內部執行細節
    * 說明：上述示例代碼中 test變量的值最開始時為Hi ！，而后變成了Hi ! Nice to meet u ~   
    *      但這并不意味著字符串是可變的，要想理解這一點需要把變量和字符串區分開來。
    * 上述第二行代碼的實現過程為(整個過程在瀏覽器后臺處理)：
    * [1] 先創建一個能容納21位字符的新字符串。
    * [2] 在新創建的字符串中填充Hi ! 和 Nice to meet u ~內容。
    * [3] 銷毀原先的Hi ! 和 Nice to meet u ~ 字符串，因為它們沒用了。
    */

布爾類型

說明 布爾類型用來表示正確和錯誤兩種狀態(同燈泡有開和關兩種狀態一樣)。
取值 布爾類型(boolean)只有兩個值，分別是true和false。
注意 布爾類型常用于條件表達式，布爾類型的值和字符串以及數值等可以相互轉換。

undefined類型

undefined類型的值也只有一個，那就是undefined。我們在使用var來聲明變量，但是沒有對該變量進行初始化的時候，變量的值就為undefined，表示未定義。

Null類型

Null類型的值只有一個，那就是null(關鍵字)，通常表示空對象指針。
注意 ① typeof null 的結果為 object 而非 null。
注意 ② 實際上，undefined的值派生自null，因此ECMA-262規定它們的相等性測試需要返回true。

  /*01 布爾類型值*/
  var boolA = true;
  var boolB = false;

  /*02 聲明變量但未賦值(未定義)*/
  var test;

  /*03 設置變量的值為null*/
  var boolA = null;

  console.log(boolA);               //null 表示空對象
  console.log(test);                //undefined 未定義

  /*04 測試undefined和null*/
  console.log(undefined == null);   //true

數值類型

定義 數值簡單說就是數字，在JavaScript語言中數值類型包含整數和浮點數(小數)。
小數 浮點數就是小數，數值中必須包含一個小數點，小數點后面必須至少有一位數字。
備注 實際上JavaScript內部并不直接區分整數值和浮點數值，其所有數字均用浮點數值表示。

  /*01 數值的兩種類型*/
  var num1 = 123;       /*整型-數據1*/
  var num2 = 4.0075e7;  /*整型-數據2  科學計數發*/

  /*浮點數特點：數值中必須包含一個小數點，小數點后面必須至少有一位數字。*/
  var floatNum1 = 8.26;  /*浮點型-數據1*/
  var floatNum2 = 1.1;   /*浮點型-數據2*/
  var floatNum3 = 0.5;   /*浮點型-數據3*/
  var floatNum4 = .8;    /*浮點型-數據4-不建議*/
  var floatNum5 = 3.2e-4;/*浮點型-數據4 科學計數法*/

  /*02 整數和浮點數的默認轉換*/
  var intNum1 = 10.0;  /*整數，解析為10*/
  var intNum2 = 2.;    /*整數，解析為2*/

  /* 03  浮點數注意點
   * 001 默認，當小數點后面超過6個0，則以科學計數法的方式來表示。
   * 002 浮點數值的最高精度為17位小數，但算術運算時其精度不如整數。
   * 003 JavaScript使用基于IEEE754數值的浮點格式表示，計算因此存在舍入誤差問題。
   */

進制 JavaScript中的數值類型支持多種進制，包括二進制、八進制、十進制和十六進制等。
說明 在進行算術運算時，所有八進制、十六進制的數據最終都會轉換為十進制的數據。
特點 八進制的特點是數字以 0 開頭，十六進制則以 0x 或 0X 開頭。
補充 實際上ECMAScript并不支持八進制直接量，且嚴格模式下八進制直接量被禁止，因此不建議用。十六進制值是 0 ~ 9之間的數字和a(A) ~ f(F)之間的字母 構成，字母對應的數字為10~15。此外，我們還可以通過調用toString方法傳遞參數的方式來實現進制的轉換。

  /*進制的轉換  通過toString方法*/
  var num1 = 17;
  console.log(num1);              //默認以十進制的方式打印(數字)  17
  console.log(num1.toString());   //默認以十進制的方式打印(字符串)
  console.log(num1.toString(2));  //設置以二進制的方式打印(字符串) 10001
  console.log(num1.toString(8));  //設置以八進制的方式打印(字符串) 21
  console.log(num1.toString(16)); //設置是十六進制的方式打印(字符串)11

  /*二進制、八進制、16進制的數據*/
  console.log(070);   //8進制的數據   對應的十進制值為56
  console.log(0x11);  //16進制的數據  對應的十進制數值為17

NaN 全稱Not a Number(非數值)，NaN用于表示本來要返回數值的操作數而實際未返回的情況。

① 任何涉及NaN的操作都會返回NaN。
② NaN與任何值都不相等，包括NaN自身。

說明 上面列出了NaN的兩個特點，針對NaN的這兩個特點，ECMAScript提供了isNaN() 函數。isNaN()函數接收一個參數，該參數可以是任何類型的，該函數在執行的時候會嘗試把參數轉換為數值，如果參數不能被轉換為數值(轉換失敗)，那么返回true，否則返回false。

  console.log(isNaN(NaN));      //true
  console.log(isNaN(10));       //false
  console.log(isNaN("20.3"));   //false
  console.log(isNaN("5red"));   //true   無法轉換為數值
  console.log(isNaN(true));     //false
  console.log(isNaN("red"));    //true   無法轉換為數值

二進制浮點數的誤差問題 JavaScript在使用數字(實數)的時候，常常只是真實值的一個近似表示。原因就在于JavaScript采用的是IEEE-754浮點數表示法(這是一種二進制浮點數表示法),這種表示法可以精確地表示分數，比如1/2、1/8和1/1024等，而我們開發中常用的反而都是十進制分數，比如1/10、1/100等，神奇的地方就在于這種表示法無法精確的表示類似于0.1 、0.2和0.3這種簡單的數字。正是因為上面的原因，所以JavaScript語言中才會存在奇葩的 0.1 + 0.2 == 0.3 不成立的問題。

在JavaScript的基本數據類型中，字符串、數值以及其他類型之間是可以相互轉換的，而這種轉換大概又可以細分成兩種，其一是在進行算術運算時默認會執行的自動轉換，其二就是強制轉換了。

類型間的強制轉換

強制類型轉換需要用到一些特定的函數，這些函數可以是Number()、Bumber()、String()也可以是parseInt()、parseFloat()、toString()等，下面將通過代碼來演示它們的具體使用。

  /*01 Number(構造)函數把其它類型轉換為數值*/
  console.log(Number(null));         //0
  console.log(Number(undefined));   //NaN
  console.log(Number("miaoXia"));   //NaN
  console.log(Number("18blue"));    //NaN
  console.log(Number("18"));        //18
  console.log(Number(true));        //1
  console.log(Number(false));       //0

  /*02-1 String函數用于把其它類型轉換為字符串*/
  console.log(String(null));       //"null"
  console.log(String(undefined));  //"undefined"
  console.log(String(123));        //"123"
  console.log(String(21.5));       //"21.5"
  console.log(String(-0));         //"0"
  console.log(String(true));       //"true"
  console.log(String(false));      //"false"

  /*02-2 toString函數
  * a、其實其它類型的值直接調用toString方法也能強轉為字符串
  * b、toString方法可以接收一個參數，該參數用于表示轉換時的進制數
  * c、如果toString方法的參數缺省，那么默認采用的十進制
  * d、null和undefined值無法調用toString方法
  * */
  console.log((123).toString());  //"123"
  console.log(true.toString());   //"true"
  console.log(false.toString());  //"false"
  console.log(NaN.toString());    //"NaN"

  /*03 Boolean函數用于將其它類型轉換為字符串*/
  console.log(Boolean(null));     //false
  console.log(Boolean(undefined));//false
  console.log(Boolean("Nice"));   //true
  console.log(Boolean(""));       //false
  console.log(Boolean(" "));      //true
  console.log(Boolean(123));      //true
  console.log(Boolean(0));        //fasle
  console.log(Boolean(NaN));      //fasle

在上面的代碼示例中Number函數用于將其他類型的數據轉換成數字，而parseInt()和parseFloat()函數相對于Number()函數而言更加靈活。

parseInt()函數用于解析整數，如果字符串前綴是0x或0X，則將會被解析為十六進制數。解析規則為：跳過任意數量的前導空格，盡可能解析更多數值字符，并忽略數字后面的內容，如果第一個非空格字符是非法的數字直接量，將最終返回NaN。

 /*parseInt()基本使用*/
  console.log(parseInt(" 123"));        //123 忽略前面的N個空格
  console.log(parseInt("123"));         //123
  console.log(parseInt("123.59"));      //123 僅解析為整數
  console.log(parseInt("-13.14"));      //-13
  console.log(parseInt("826 Birthday"));//826
  console.log(parseInt("Birthday826"))  //NaN
  console.log(parseInt("0.1"))          //0
  console.log(parseInt(".1"))           //NaN 整數不能以.開頭
  console.log(parseInt("0xff"))         //255 以十六進制來解析
  console.log(parseInt("071"));         //71  十進制處理(非八進制)

parseInt() 被定義為declare function parseInt(s: string, radix?: number): number; 該函數的第一個參數為字符串，它還可以接收第二個參數用于指定數字轉換的進制基數，合法的取值范圍是2~36。

  console.log(parseInt("111",2));       // 7  = 1 * 2 * 2 + 1 * 2 + 1
  console.log(parseInt("aa",16));       //170 = 10 * 16 + 10
  console.log(parseInt("076",8));       //62  = 7 * 8 + 6
  console.log(parseInt("077",10));      //77

parseFloat()函數用于解析浮點數。解析規則為：跳過任意數量的前導空格，檢索純數字字符串后面第一個.后的不為數字的字符，并對之前所有的結果進行返回，如果第一個非空格字符是非法的數字直接量，將最終返回NaN，如果沒有.則以整數解析的方式處理。

  /*parseFloat()基本使用*/
  console.log(parseFloat(" 123"));            //123
  console.log(parseFloat(" 123.55"));         //123.55
  console.log(parseFloat(" 8.26 Birthday"));  //8.26
  console.log(parseFloat(" Birthday 8.26"));  //NaN
  console.log(parseFloat("0.1"));             //0.1
  console.log(parseFloat(".1"));              //0.1
  console.log(parseFloat("0xff"));            //0
  console.log(parseFloat("abc 12.5"));        //NaN
  console.log(parseFloat("$12.5"));           //NaN