JavaScript小記

JavaScript小記

1. 簡介

1. 語言描述

JavaScript 是一門跨平台、面向對象的弱類型動態腳本編程語言

JavaScript 是一門基於原型、函數先行的語言

JavaScript 是一門多範式的語言，它支持面向對象程序設計、命令式編程以及函數式編程

其最初被創建的目的是「使網頁更生動」

腳本被以純文本的形式提供和執行；它們不需要特殊的準備，編譯即可運行

2. 名稱淵源

JavaScript 原型於 1995年4月 被在NetScape工作的布蘭登•艾克（Brendan Eich ; Moizlla/Brave瀏覽器創始人）創造

誕生之初名為「LiveScript 」，後因推廣搭上當時的編程熱詞「Java」，所以更名為 JavaScript

JavaScript 和 Java 除了語法上有一些類似，兩者的應用領域以及後續的發展均無聯繫

語言標準化：

1997年6月，ECMA（European Computer Manufacturers Association 後更名 Ecma International） 以 JavaScript為語言基礎

制定了 ECMAScript標準規範 ECMA-262, JavaScript 也成為了 ECMAScript 最著名的實現之一

3. 其它簡介

隨着 JavaScript不斷發展，JavaScript 不僅可以在瀏覽器中執行，也可以在服務端執行（node.js），甚至可以在任意搭載 JavaScript 引擎的設備中執行

瀏覽器中嵌入了 JavaScript 引擎，有時也稱作 「JavaScript 虛擬機」

不同的引擎有不同的 「代號」

  • V8 ———— Chrome 和 Opera 中的 JavaScript 引擎
  • SpiderMonkey ———— Firefox 中的 JavaScript 引擎
  • Chakra ———— IE 中的 JavaScript 引擎
  • ChakraCore ———— Microsoft Edge 中的 JavaScript 引擎
  • Nitro 和 SquirrelFish ———— Safari 中的 JavaScript 引擎

引擎是如何工作的 ？

​ 引擎很複雜，但是基本原理很簡單

  1. 引擎（如果是瀏覽器，則引擎被嵌入其中）讀取（「解析」）腳本
  2. 然後，引擎將腳本轉化（「編譯」）為機器語言
  3. 然後，機器代碼快速執行

  • 引擎會對流程中的每個階段都進行優化；它甚至可以在編譯的腳本運行時監視它

    分析流經該腳本的數據，並根據獲得的信息進一步優化機器代碼

瀏覽器中的 JavaScript 能做什麼？

現代的 JavaScript 是一種 「安全的」 編程語言；

它不提供對內存或 CPU 的底層訪問；因為它最初是為瀏覽器創建的，不需要這些功能

瀏覽器中的 JavaScript 可以做與網頁操作、用戶交互和 Web 服務器相關的所有事情

  • 在網頁中添加新的 html ，修改網頁已有的內容和網頁的樣式
  • 響應用戶的行為，響應鼠標的點擊，指針的移動，按鍵的移動
  • 向遠程服務器發送網絡請求，下載和上傳文件（AJAX 和 COMT 技術）
  • 獲取或設置 cookie ，向訪問者提供問題或發送消息
  • 記住客戶端的數據（「 本地存儲 」）

瀏覽器中的 JavaScript 不能做什麼 ？

為了用戶的（信息）安全，在瀏覽器中的 JavaScript 的能力是受限的

目的是防止惡意網頁獲取用戶私人信息或損害用戶數據

  • 網頁中的 JavaScript 不能讀、寫、複製和執行硬盤上的任意文件；它沒有直接訪問操作系統的功能

    現代瀏覽器允許 JavaScript 做一些文件相關的操作，但這個操作是受限制的

    僅當用戶做出特定的行為，JavaScript 才能操作這個文件

    例如：用戶把文件」 拖放「 到瀏覽器中 或者通過<input>標籤選擇了文件

  • 不同的標籤頁/窗口之間通常互不了解

    有時候，也會有一些聯繫

    例如：一個標籤通過 JavaScript 打開的另一個標籤頁；但即使在這種情況下

    ​ 如果兩個標籤頁打開的不是同一個網站（URL中協議、域名或者端口任一不相同的網站），他們都不能相互通信

    ​ 這就是所謂的 「同源策略」 （同源策略僅適用於腳本）

    ​ 為了解決「同源策略」問題，兩個標籤必須都包含一些處理這個問題的特定的 JavaScript 代碼，並均允許數據交換

  • JavaScript 可以輕鬆的通過互聯網與當前所在的服務器進行通信；但是從其他網站/域的服務器中接收數據的能力被削弱了

    儘管可以，但需要來自遠程服務器的明確協議（在 HTTP header 中）

    倘若在瀏覽器外（例如在服務器上）使用 JavaScript，則不會存在此類限制

    現代瀏覽器還允許安裝可能會要求擴展權限的插件/擴展

    JavaScript 「上層」 語言

    隨着發展推進，JavaScript的語法無法滿足所有人的需求，因此出現了很多新語言

    這些語言在瀏覽器中執行之前，都會被 編譯（轉化）成 JavaScript

    此類語言諸如：CoffeeScript 、TypeScript 、Flow 、Dart 、Brython 等

2. 語法

1. JavaScript引入方式

1.內嵌

在 html 文檔中可以放置任意數量的 JavaScript腳本

  1. <head>中的 JavaScript腳本

    <!DOCTYPE html>
  <html>
    <head>
      <script>
      	function myFunction(){
          document.getElementById("demo").innerHTML="段落被更改";
        }
      </script>
    </head>
    <body>
      <h1>一張網頁</h1>
      <p id="demo">一個段落</p>
      <button type="button" onclick="myFunction()"> 試一試</button>
    </body>
	</html>

  2. <body>中的 JavaScript 腳本

    <!DOCTYPE  html>
	<html>
    <head>
      <title>body中的JavaScript腳本</title>
      <style type="text/css">
        #Oliva{
          color: blue;
          font-family: serif;
          font-style: italic;
        }
      </style>
    </head>
    <body>
      <p id="Oliva">Oliva is a beautiful words!</p>
      <script>
        document.getElementById("Oliva").style.color= "gray";
        document.getElementById("Oliva").style.fontFamily= "san-serif";
        document.getElementById("Oliva").style.fontStyle= "oblique";
        /*注意 italic與oblique的區別；italic指文本樣式為斜體,而oblique是人為傾斜字體*/
        /*通常把腳本置於<body>元素底部*/
      </script>
    </body>
	</html>

2. 外聯

當然也可通過完整的 URL 或相對於當前網頁的路徑引用外部腳本

<script src=「xxxxx」></script> 放在 head 和 body 都可以

  1. 完整的 URL 鏈接腳本

    <!DOCTYPE html>
<html>
  <head>
    <title>一個橢圓</title>
    <style type="text/css">
      #oval{
        width= 200px;
        height= 100px;
        border-width: 1px;
        border-style: groove;
        border-color: rgb(129,60,133);
        border-radius: 40px/20px; 
      }
    </style>
  </head>
  <body>
    <div id="oval">Draw an oval</div>
    <script src="//github.com/Kuiperabxy/libertas/tree/main/oval.js">
    /*通過完整的 URL 來鏈接至腳本*/
    </script>
  </body>
</html>

  2. 引入當前網站上指定文件夾中的腳本

    <script src="/Kuiperabxy/libertas/tree/main/oval.js">
 /*引入當前網站指定文件夾的腳本*/</script>

  3. 引入與當前頁面相同文件夾的腳本

    	<div id="oval">Draw an oval</div>
    <script src="oval.js"> /*引入當前網站相同文件夾的腳本*/</script>
	<!--若需要引入多個JavaScript文件 需要多個script標籤-->

    外聯的優勢：

    • 分離了 html 和 JavaScript 代碼
    • 使 html 和 JavaScript 更易於閱讀和加載
    • 已緩存的 JavaScript 文件可加速頁面加載

2. JavaScript 輸出方式

JavaScript 不提供任何內建的打印或顯示函數

JavaScript 能夠以不同的方式 「顯示」數據：

  • 使用 window.alert( ) 寫入警告框

  • 使用 document.write( ) 寫入 html 輸出 ( 僅用於測試 )

  • 使用 innerHTML 寫入html 元素 ( 更改 html 元素的 innerHTML 屬性是在 html 中顯示數據的常用方法 )

  • 使用 console.log( ) 寫入瀏覽器控制台

    <!DOCTYPE  html>
<html>
<head>
    <title>JavaScript不同的輸出方式</title>
  </head>
  <body>
    <script>window.alert(2+8);</script>
    <script>document.write(2+8);</script>
    <p>更改 html 元素</p>
    <p id="nua">改變的內容在這裡</p>
    <script>
     	document.getElemntById("nua").innerHTML="SiChuan University is best university in SiChuan!" 	
    </script>
    <script>console.log(2+8);</script>
  </body>
</html>

3. JavaScript 基礎語法

計算機程序是計算機「執行」的一系列的「指令」

在編程語言中，這些編程「指令「被稱為語句

JavaScript 程序 就是一系列編程語句

1. JavaScript 語句構成

​ 值 、 運算符 、 表達式 、 關鍵詞 和 注釋

2. JavaScript 值

JavaScript 語句定義兩種類型的值：混合值( 字面量值 literal ) 和 變量值 ( 變量 )

字符串屬於字面量的一種；用雙引號或者單引號包圍

常量也屬於字面量的一種

Javascript 變量

在編程語言中，變量是 存儲 數據值的容器

例如： var x = 7; var y = 10;(x 存儲 7 ； y 存儲 10)

類似代數

例如： var total = x + y; ( total 也是一個變量，採用類似代數的方式表達)

3. JavaScript 表達式

表達式是值、變量和運算符的組合，計算結果是值

如：6*10 、「Bill」 + 「 」 + 「Gates」

4. JavaScript 關鍵詞

JavaScript 語句常常通過某個關鍵詞來 標識 需要執行的 JavaScript 動作

  • 附：JavaScript關鍵詞

    關鍵詞 描述
    break 終止 switch 循環
    continue 跳出循環並在頂端開始
    debugger 停止執行 JavaScript，並調用調試函數(若可用)
    do……while 執行語句塊，並在條件為真時重複執行代碼塊
    for 標記需要被執行的語句塊，在條件為真的情況下
    function 聲明函數
    if……else 標記需要被執行的語句塊，根據某個條件
    return 退出函數
    try……catch 對語句塊實現錯誤處理
    var 聲明變量

5. JavaScript 代碼塊

​ 代碼塊的作用是 定義一同執行的語句

​ 代碼塊的內容一般需要空格縮進，增強可讀性

注意：

  1. 分號分隔 JavaScript 語句，一定要加
  2. 給 JavaScript 語句添加空格以增強可讀性（在運算符旁）
  3. 為了達到最佳可讀性，代碼行字符往往控制在80個以內

6. JavaScript 注釋

並非所有 JavaScript 語句 都被 「執行」

雙斜杠 // (單行) 或者 介於 / / (多行) 之間的代碼被視為注釋

7. JavaScript 標識符

標識符是名稱，JavaScript 標識符對大小寫敏感 且 具有唯一性

在 JavaScript 中，標識符用於 命名變量（以及關鍵詞 、 函數、 標籤)

大多數編程語言，合法名稱的規則近乎相同

規則： 首字符必須是 字母、下劃線 (__) 或者 美元符號 ( $)

​ 連串字符可以是字母、數字、下劃線或美元符號

​ 連串字符用 駝峰式大小寫方式 （eg: getElementById）

8. JavaScript 字符集

JavaScript 使用 Unicode ( 萬國碼 ) 字符集

Unicode 覆蓋世界上 幾乎所有的字符、標點和符號

9. JavaScript 運算符

詳情查閱網址：//www.w3school.com.cn/js/js_operators.asp

10. JavaScript 數據類型

數據類型即具體的值類型

  • 5 種 可能包含值得數據類型
    • 字符串值 (string)
    • 數字值 (number)
    • 布爾值 (boolean)
    • 對象 (object)
    • 函數( function)
  • 3種 對象類型
    • 對象(object)
    • 日期(date)
    • 數組(array)
  • 2 種 不能包含值的類型
    • null
    • undefined

JavaScript 擁有動態類型，意味着相同變量可用作不同類型 ；例如： var x = 10; var x = 「bill」

在 JavaScript 中，沒有值的變量，其值是 undefined ，類型也是 undefined；即任何變量可以將其值設為 undefined 進行清空

空值 (「 」) 和 undefined 不是一回事，空的字符串既有值也有類型

null 的值是 null ，數據類型是 對象；當然也可設置值為 null 清空對象

在 JavaScript中 ，數組也是對象 例如：typeof [3,5,6,8] 返回的是 object 而非 array

原始數據： 原始數據值是一種沒有額外屬性和方法的單一簡單數據值

例如：string 、 number 、boolean 、undefined

對象 、 函數 屬於複雜數據

11. JavaScript 函數

JavaScript 函數是被設計為執行特定任務的代碼塊；通常只要定義一次，就可多次調用

JavaScript 函數 會在某代碼調用它時被執行

語法結構

function myFuncationName ( param1 , param2 , param3 ) {

​ 要執行特定任務的代碼；

}

myFuncationName 是函數名 ，在被調用時使用

param 是在調用函數時，由函數接收的真實的值

在函數中 ， param 是局部變量，即僅在函數內部才能被訪問；在函數開始時創建，完成時被刪除

在其他編程語言中，函數近似 程序（ Procedure）或 子程序（Subroutine）

函數調用

  • 當事件發生時（用戶點擊按鈕時）
  • 當 JavaScript 代碼調用時
  • 自動的（自調用）

函數返回

當 JavaScript 到達 return語句時，函數停止執行

通常函數會計算返回值返回給調用者

12. JavaScript 對象

在真實生活中，汽車是一個對象

汽車有諸如 車重 和 顏色 等屬性；也有諸如 啟動 和 停止 等方法

所有汽車都擁有同樣的 屬性，但 屬性值 因車而異

所有汽車都擁有相同的 方法，但是方法會在不同時間被執行

對象也是變量；但是對象包含很多值(即對象屬性)；對象無法被比較

對象屬性以名稱：值 對的方式來書寫

JavaScript 對象 是被命名值 (對象屬性) 的容器

例如：var car = {type: "porsche", model: "911", color: "white"};

對象的方法是在對象上執行的動作

方法以 函數定義 被存儲在屬性中； 即 方法是作為屬性來存儲的 函數

例如： var person = {

​ firstName: 「Bill」 ,

​ lastName: 「Gates」 ,

​ fullName: function( ) {

​ return this.firstName + 「 」 + this.lastName ;

​ }

​ }

this關鍵詞

在函數定義中，this 引用 該函數的 「擁有者」，即當前對象； 上述例子中，this.firstName 等價於 person.firstName;

訪問對象屬性

有兩種方式可訪問對象的屬性

  1. objectName.propertyName 即 對象名：屬性名
  2. objectName[「 propertyName 」] 即 對象名[「 屬性名」 ]

訪問對象方法

objectName.methodName( ) 即 對象名.方法名( )

13. JavaScript 事件

html 事件是發生在 html 元素上的 「事情」，JavaScript 能夠 「應對」 這些事件

html 事件可以是 瀏覽器 或 用戶做的某些事情，通常事件發生時，用戶會希望做某件事

通過 JavaScript 代碼，可以在 html 元素添加事件處理程序

事件處理程序 可用於 處理、驗證用戶輸入、用戶動作和瀏覽器動作

  • 每當頁面加載時應該做的事情
  • 當頁面被關閉時應該做的事情
  • 當用戶點擊按鈕時應該被執行的動作
  • 當用戶輸入數據時應該被驗證的內容

代碼格式（單/雙引號都可）

< element event= 「一些 JavaScript”>

例如：

改變 id=「demo」的元素的內容

<button onclick = 『document.getElementById(「demo」).innerHTML = Date( )'>現在時間是？</button>

改變當前元素自身的內容

<button onclick = 『this.innerHTML = Date( )'>現在時間是？</button>

事件屬性直接調用函數

<button onclick = 'displayDate()'>現在時間是？</button>

在 Js 文件中聲明一個 displayDate( ) 函數，html 文檔中直接調用

14. JavaScript 字符串

JavaScript 字符串 用於 存儲和操作文本

可用 + 對字符串進行換行

例如：document.getElementById("demo").innerHTML ="Hello"+

​ 「Kitty」!;

字符串可通過 關鍵詞 new 定義為對象；但是會拖慢執行速度

例如：var x = new String("Bill"); 創建一個 Bill 對象

字符串相加 叫級聯 ( concatenation)

字符串中的原始屬性和方法

  1. length 屬性返回字符串的長度

    var txt = "ABCDEFGHIJKMNA"
var sln = txt.length;

  2. indexOf( ) / lastIndexOf( )方法 分別返回字符串中指定文本首次/最後一次 出現的索引

    var txt = "ABCDEFGHIJKMNA"
var pos = txt.indexOf("A");
// JavaScript 從0開始索引，若未找到對應文本，indexOf()/lastIndexOf()均返回 -1

  3. search( ) 方法搜索特定值的字符串，並返回匹配的索引

    var txt = "ABCDEFGHIJKMNA"
var pos = txt.search("A");

注意 indexOf( ) 和 search( ) 的區別

  • search( ) 方法無法設置第二個開始位置的參數
  • indexOf( ) 方法無法設置更強大的搜索值 (正則表達式)

  1. slice( ) / substr( ) 提取字符串的某個部分並在新字符串中返回被提取的部分

    slice( param1,param2)

    param1 表示起始索引，param2 表示結束索引

    var txt = "ABCDEFGHIJKMNA"
var pos = txt.slice(7,14);
// 若某個參數為負數，則從字符串的結尾開始計數（從右向左）
// 若省略第二個參數，則改方法將裁剪字符串的剩餘部分

  2. replace( ) 方法用另一個值替換在字符串中指定的值

    默認地，replace( ) 只替換首個匹配 且對大小寫敏感

    var txt = "ABCDEFGHIJKMNA"
var pos = txt.replace(/A/g,"a");
//替換所有匹配，使用正則表達式 g 修飾符(全局搜索) 且正則表達式不帶引號

  3. toUpperCase( ) / toLowerCase( ) 分別把字符串轉換為 大/小寫

    var txt = "ABCDEFGHIJKMNA"
var pos = txt.toUpperCase();

  4. concat( ) 方法連接兩個或多個字符串

    var txt1 = "ABCD"
var txt2 = "abcd"
var txt3 = "EFGH"
var txt = txt1.concat("",txt2).concat("",txt3);
// concat() 方法可用於代替加運算符，txt 和 txt4 是等效的
var txt4 = "ABCD" + "" + "abcd" + "EFGH";

  5. charAt( ) / charCodeAt( ) 分別返回字符串指定下標(索引)的字符串 和 指定索引的字符 Unicode編碼

    var txt = "ABCDEFGHIJKMNA"
var pos = txt.charAt(0);
// 若找不到字符，返回空串

  6. split( ) 將字符串轉換為數組

    var txt = "a,b,c,d,e"
var arr = txt.split(",")/txt.split("")/txt.split("|");
// 分別用 逗號、空格、豎線 分隔符分隔數組
// 若省略分隔符，返回數組包含整個字符串

15. JavaScript 數字

JavaScript 與其他編程語言不同的是 只有一種數值類型 且書寫數值時帶不帶小數點都可

JavaScript 數值始終是以 64 位的雙精度浮點數來存儲，根據國際 IEEE 754標準

整數精度(不使用科學計數法) 會被精確到15位

小數精度是17位，但浮點的算數並不總是100%精準

例如：var x = 0.2 + 0.1 得到的結果將是0.30000000000000004

使用乘除法可有助於解決上述問題：var x = (0.2 * 10 + 0.1 * 10) // x = 0.3

數字字符串

在所有數字運算中，JavaScript 會嘗試將字符串轉換為數字進行運算

var x = "100"; var y = 10 ; var z = x / y; // z = 10

需要注意的是，數字相加 和 字符串級聯 都用 + 號表示，所以上述只適用於 */- 三種運算

var x = "100" ; var y = 10 ; var z = x + y // z = 10010 而非110

NaN (非數值) 數據類型是number

NaN (Not a Number ) 屬於 JavaScript 保留詞，指示某個數 不是合法數

var x = 100 / "a" // x = NaN

對於確定某個值是否是數值，可用全局 JavaScript 函數 isNaN( ) 來判定，返回布爾值

var x = 100 / "a" ; isNaN(x); //返回true

關於 NaN 的一些有趣例子：

var x = NaN; var y = 6; var z = x + y; // z = NaN而非 6

var x = NaN; var y ="6"; var z = x + y; // z = NaN5 而非NaN 此處是級聯

Infinity (無窮) 數據類型是number

Infinity/-Infinity 是 JavaScript 在計算數時超出最大可能數範圍時返回的值

除以0 返回的也是 Infinity

var num1 = 2; while (num1 != Infinity) { num1 = num1 * num 1;} //執行直到Infinity

十六進制 / 八進制

JavaScript 會把前綴為 0x 的數值常量解釋為 十六進制

JavaScript 會把前綴為 0 的數值常量解釋為 八進制

var x = 0xff; //x = 255

var x = 077; // x = 63 而非 77

使用 toString( ) 方法可以實現 二進制 / 八進制 / 十六進制進型轉換(以字符串形式返回)

var x = 128; var y = x.toString(16); //y = 80

Number 中的 方法和屬性

所有數字方法均可用於任意類型的數字(字面量(常量)、變量、表達式)

  1. toString( ) 方法 以字符串返回數值

    var x = 123;
x.toString();          //從變量x 返回 123
(123).toString();      // 從常量 返回 123
(100 + 24).toString(); // 從表達式 返回 124

  2. toExponential( param ) / toFixed(param )方法 分別以返回字符串值,包含已被四捨五入並使用指數計數法/ 直接返回指定位數小數 的數字

    param 定義小數點後的字符數，參數可選，若未設置，JavaScript 不會對數字進行舍入

    var x = 98.8998;
x.toExponential(3);  // 返回 9.890e+1
x.toExponential();   // 返回 9.88998e+1
x.toFixed(2);        // 返回 98.90  適合處理關於金錢的數字

  3. toPrecision(param ) 以字符串返回數值，包含了指定長度

    var x = 98.8998
x.toPrecision(3)       //返回 98.9

  4. valueOf( ) 以數值返回數值

    在 JavaScript 中， 數字可以是 原始值(typeof = number ) 或 對象 (typeof = object )

    在 JavaScript 內部 使用 valueOf( ) 方法可將 Number 對象 轉換為 原始值

    所有 JavaScript 數據類型 都有 valueOf( ) 和 toString( ) 方法

    var x = 123;
x.valueOf();          // 從變量 x 返回 123
(123).valueOf();      // 從字面量 123 返回 123
(100+25).valueOf();   // 從表達式 100+25 返回 125

  5. 關於數值的全局方法

    JavaScript 全局方法 可用於 所有 JavaScript 數據類型

  • Nubmer( ) 方法 把 JavaScript 變量 轉換為數值， 由其參數轉換而來

    x = true ; Number(x);         // 返回 1
x = new Date(); Number(x);    // 返回 1611294882633  以時間戳形式
x = "10 20" ; Number(x);      // 返回 NaN

  • parseInt( ) / parseFloat( ) 方法解析一段字符串，允許空格，分別以 整數/浮點數形式返回首個數字

    parseInt ("10.33");         // 返回 10
parseFloat ("10.33");       // 返回 10.33

    數字屬性

    數字屬性屬於名為 number 的 JavaScript 數字對象包裝器，僅對number這個數字對象有效

  1. MAX_VALUE / MIN_VALUE 屬性分別返回 JavaScript 中可能的最大 / 最小 數字

    var x = Number.MAX_VALUE;     //返回 1.7976931348623157e+308
var x = Number.MIN_VALUE;     //返回 5e-324

  2. POSITIVE_INFINITY / NEGATIVE_INFINITY 屬性表示 正/負 的無窮大，溢出時返回該屬性

    var x = Number.POSITIVE_INFINITY;  //返回 infinity
var x = Number.NEGATIVE_INFINITY;  //返回 -infinity

  3. NaN 屬性 表示非數字

    var x = Number.NaN;

16. JavaScript 數組

數組是一種特殊的變量，它能夠一次存放一個以上的值；並可以通過引用索引號來訪問這些值

語法結構

var arrayName = [item1 , item2 , …] ;

訪問數組及其元素

數組是對象，可直接通過引用 數組名來訪問完整的數組

通過引用索引號(即下標號) 來訪問某個數組元素

var varName = arrayName[ n] ;

數組元素也可以是對象

JavaScript 變量可以是對象；數組是特殊類型的對象

正因如此，可以在相同數組中存放不同類型的變量

數組中可以保存對象，數組中也可以保存函數，甚至數組中可以保存數組

數組的原始屬性和方法

  1. length 屬性 返回數組的長度( 數組元素的數目)

    var person = [Jim,Tom,Sam,Tim]
var personNumber = person.length;      // personNumber = 4

  2. 訪問第一個/最後一個 數組元素

    var person = [Jim,Tom,Sam,Tim]
var firstPerson = person[0];									// 返回 firstPerson = Jim
var lastPerson = person[person.length - 1];   // 返回 lastPerson = Tim

  3. 遍曆數組元素

    for 循環 / Array.foreach( ) 都可用來遍曆數組

    var person , personNumber , personText , i;
person = [Jim,Tom,Sam,Tim];
personNumber = person.length;
personText = "<ol>"
for (i = 0 ; i < personNumber;i++ ) {
  personText += "<li>" + person[i] + "</li>";
}
text += "</ol>"



var person , personText;
person = [Jim,Tom,Sam,Tim];
personText = "<ul>";
person.forEach(myFunction);
personText += "</ul>";
document.getElementById("demo").innerHTML = personText;

function myFunction(value){
  personText += "<li>" + value + "</li>";
}

  4. push( ) 方法 和 length 屬性 可向數組添加新元素；pop( ) 方法 從數組中刪除最後一個元素

    var person = [Jim,Tom,Sam,Tim];
person.push("Dom");      // 從數組最後添加一個元素"Dom"
person.push();           // 返回 新數組的長度 5
person[person.length] = "Xom";

person.pop();          // 刪除最後一個元素 「Xom」;返回被彈出的值"Xom"

  5. 關聯數組

    很多編程元素支持命名索引的數組

    具有命名索引的數組被稱為 關聯素組（或散列）

    JavaScript 不支持 命名索引的數組

    在 JavaScript中， 數組只能使用 數字索引

    var person = [];
person[0] = "Jim";
person[1] = "Tom";
person[2] = "Sam";
var x = person.length;         // x = 3；
var y = person[0];             // y = "Jim";

// 若在JavaScript 中使用命名索引，JavaScript 會把數組重定義為標準對象
// 之後，所有數組的方法和屬性將產生非正確的結果

var person = [];
person["fistName"] = "Jim";
person["secondName"] = "Tom";
person["lastName"] = "Sam";
var x = person.length;        // x = 0 ; 
var y = person[0];            // y = undefined;(未定義)

  • 數組和對象的區別

    JavaScript 中 ，數組使用 數字索引 ； 對象使用 命名索引

    即 元素名為字符串(文本) 應該用對象；元素名為數字應該用數組

  1. 如何識別某個變量是否為數組

  • ECMAScript 5 定義了新方法 Array.isArray( ) ，返回布爾值判斷

    Array.isArray(person);

  • 創建 isArray( ) 函數， 返回布爾值判斷

    function isArray(person){
  return person.constructor.toString().indexOf("Array")> -1 ;
}
// 若對象原型包含單詞"Array"，則返回true

  • 若對象由給定的構造器創建，則 instanceof 運算符 返回 true

    var person = [Jim,Tom,Sam,Tim];
person instanceof Array

  1. toString( ) / join( ) 方法 把數組轉換為數組值的字符串

    var person = [Jim,Tom,Sam,Tim];
person.toString();       // 返回 Jim,Tom,Sam,Tim  默認逗號分隔

person.join("*");        // 返回 Jim * Tom * Sam * Tim  可指定分隔符

17. JavaScript 數組綜合

位移元素

位移與彈出等同，但處理首個元素而非最後一個

  1. shift ( ) 方法會刪除首個數組元素 ，並把所有其它元素「位移」到更低的索引

    var person = [Jim,Tom,Sam,Tim];
person.shift();       // 刪除首個元素「Jim」,可返回被刪除的元素「Jim」

  2. unshift( ) 方法(在開頭) 向數組添加新元素，並「反向位移」舊元素

    var person = [Jim,Tom,Sam,Tim];
person.unshift("Dom");   // 在person數組開頭添加新元素「Dom」
person.unshift();				// 返回新數組的長度 5

拼接和刪除元素

  1. delete 運算符 可刪除數組中指定索引的元素的值, 而數組結構不變

    var person = [Jim,Tom,Sam,Tim];
delete person[1];       // 把person數組中第二個元素「Tom」刪除
// 使用delete 會在數組中留下未定義(undefined)的空洞；請使用 pop() 或 shift()取而代之

  2. splice(param1 ,param2, param3 … ) 方法可用於向數組添加新項

    param1 定義應添加新元素的索引位置(拼接)

    param2 定義了應刪除多少元素

    其餘參數 定義需要添加的新元素值

    var person = [Jim,Tom,Sam,Tim];
person.splice(1,1,"Dom","Xom");  // 刪除"Tom"，並在其後添加「Dom」和"Xom"

    通過 splice( ) 方法 刪除指定元素，可避免出現未定義的空洞

    var person = [Jim,Tom,Sam,Tim];
document.getElementById("demo1").innerHTML ="第二個人是："+ person[1];
person.splice(1,1);
document.getElementById("demo2").innerHTML ="第二個人是："+ person[1];

// 元素id ="demo1" 返回"Tom"
// 元素id =」demo2「 返回"Sam"
// 可以發現刪除了」Tom「,原數組結構即數字索引發生了改變

合併(連接)數組

  1. concat( ) 方法通過合併(連接) 現有數組來創建一個新數組

改方法不會更改現有數組，而總是返回一個新數組 ； 且可使用任意數量的數組參數(合併多個數組)

var arr1 = ["1","2","3"];
var arr2 = ["4","5"];
var arr3 = ["6","7","8"];
var arr4 = ["9","10"];
var arr0 = arr1.concat(arr2,arr3,arr4);    // 連接4個數組

var arr5 = arr1.concat("6","7");
// concat參數也可以是具體的元素值

裁剪數組

  1. slice( param1 , param2 ) 方法 用數組的某個片段切出新數組

    該方法是新建一個數組，而不會從源數組中刪除任何元素

    param1 定義了截取的開始索引位置；param2 定義了截取的結束索引位置(不包括結束索引)

    var person = [Jim,Tom,Sam,Tim];
var american = person.slice(1,3);     // 返回新數組 [Tom,Sam]

var nords = person.slice(1);         // 返回新數組 [Tom,Sam,Tim]

數組排序

  1. sort ( ) 方法 以字母順序對數組進行排序

    var person = [Jim,Tom,Sam,Dom];
person.sort();              // 返回[Dom,Jim,Sam,Tom]

  2. 通過 sort( ) 對數字數組進行 升序 / 降序

    // 升序
var points = [2,5,68,83,3,6,14,48];
points.sort(
	function (a,b) {
    return a - b;
  }
);

// 降序
var points = [2,5,68,83,3,6,14,48];
points.sort(
	function (a,b) {
    return b - a;
  }				
);
// 這裡是比值函數，當 sort()函數比較兩個值時，會將值發送到比較函數
// 並根據所返回的值(負/零/正值)，對兩個數進行排序
// 比如 48 和 14 ; 48-14=34>0 排序函數將把38排序為比14更高的值
// a-b>0 即返回值為正，則a排b後面 ; a-b<0 即返回值為負 則a排b前面

  3. reverse( ) 方法 對數組進行反向排序(降序)

    var person = [Jim,Tom,Sam,Dom];
person.reverse();           // 返回 [Tom,Sam,Jim,Dom]

查找數組中的最值

  1. JavaScript 不提供查找數組中最大或最小數值得內建函數

    不過通過排序之後，可根據數組索引來獲得最高或最低值；當然這種效率是極低的

    var points = [2,5,68,83,3,6,14,48];
points.sort(
	function (a,b){
        return a - b;
    }
);
var pointsMin =  points[0];      // 返回數組最小值 2
var pointsMax =  points[points.length-1]; // 返回數組最大值 83

  2. Math.max.apply / Math.min.apply 分別可以查找出數組中最大/最小 值

    Math.max.apply( [ 1 , 2 , 3 ] ) 等價於 Math.max( 1 , 2 , 3 )

     function myArrayMax(points) {
     return Math.max.apply(null ,points);
 }
// 返回最大值 83

  3. 自己構造函數達到目的

    通過遍曆數組，用找到的最高值與每個值進行比較

    var points = [2,5,68,83,3,6,14,48];
function myArrayMax(points) {
    var pointsLength = points.length;
    var pointsMax = - Infinity;
    while (pointsLength --) {
        if (points[pointsLength] > pointsMax ) {
            pointsMax = points[pointsLength];
        }
    }
    return pointsMax;
}
// 返回 pointsMax = 83;

對象數組排序

  1. JavaScript 數組 經常會包含對象

    即使對象擁有不同數據類型的屬性，sort( ) 方法仍可通對比其屬性值來對數組進行排序

    // 比較數字屬性
var car  = [{type:"Volvo",year:2016},{type:"Cadillac",year:2018},{type:"BWM",year:2017}];
car.sort(
	function (a,b) {
        return a.year - b.year;
    }
);	

// 比較字符串屬性
var car  = [{type:"Volvo",year:2016},{type:"Cadillac",year:2018},{type:"BWM",year:2017}];
car.sort(
	function (a,b) {
        var x = a.type.toLowerCase();
        var y = b.type.toLowerCase();
        if (x < y) {
            return -1;
        }
        if (x > y) {
            return 1;
        }
    }
);

數組迭代

  1. forEach( ) 方法 為每個數組元素調用一次函數(回調函數)
var txt = "";
var points = [2,5,68,83,3,6,14,48];
points.forEach(myFunction);

function myFunction(value,index,array) {
    txt = txt + value + "<br>";
}
// 該調用的函數可接收3個參數 分別是 項目值：value ; 項目索引：index;數組本身：array
// myFunction該函數被作為參數傳遞，是回調函數的特徵
  1. map( ) 方法對每個數組元素執行函數來創建新數組

該方法不會對沒有值的數組元素執行函數；且不會更改源數組

var points = [2,5,68,83,3,6,14,48];
var newPoints = points.map();

function myFunction(value,index,array ) {
    return value * 2;
}
// 返回新數組 newPoints = [4,10,136,166,6,12,28,96]
  1. filter( ) 方法創建一個包含通過某種條件過濾數組元素的新數組
var points = [2,5,68,83,3,6,14,48];
var over20 = points.filter(myFunction);

function myFunction(value,index,array) {
    return value > 20;
}
// 返回新數組  over20 = [68,83,48]
  1. reduce( ) / reduceRight( ) 方法在每個數組元素上運行函數，以生成(減少它 )單個值

該方法默認在數組中從左到右工作,區別於 reduceRight( ) ；且不會減少源數組

reduceRight( ) 從右到左工作，即從數組末尾向數組起始位置

var points = [2,5,68,83,3,6,14,48];
var sum = points.reduce(myFunction);

function myFunction(total,value,index,array) {
    return total+value;
}
// 返回 sum = 229
// 該調用的函數可接收4個參數
// 分別是 總數(初始值/先前返回的值)：total;項目值：value;項目索引：index;數組本身:array

// reduce() 方法能夠接收一個初始值
var points = [2,5,68,83,3,6,14,48];
var sum1 = points.reduce(myFunction,100);

function myFunction(total,value,index,array) {
    return total+value;
}
// 返回 sum1 = 329
  1. every( ) 方法檢查數組中的所有元素是否通過某個條件的過濾，返回布爾值

該方法區別於 some( )

some( ) 方法是檢測數組中某些數組元素值是否通過過濾，只要存在1個，則返回 true

var points = [2,5,68,83,3,6,14,48];
var allOver20 = points.every(myFunction);

function myFunction(value,index,array) {
    return value > 20;
}
// 返回 allOver20 = false
  1. indexOf( item ,start ) / lastIndexOf( item,start) 方法在數組中搜索元素值並返回位置，分別從起始到結束/從結束到起始

item 定義需要檢索的項目 ; start 定義開始搜索的位置

var points = [2,5,68,83,3,6,14,48];
var a = points.indexOf(3);           // 返回 a = 4    
var b = points.lastIndexOf(3);       // 返回 b = 3
// 若沒有檢索到指定的值，返回 -1

  1. findIndex( ) 方法返回通過某個條件過濾數組的第一個數組元素的索引

    var points = [2,5,68,83,3,6,14,48];
var first = points.findIndex(myFunction);

function myFunction(value,index, array) {
    return value > 18;
}
// 返回 first = 2

18. JavaScript 日期

UTC ( Coordinated Universal Time) 世界協調時、世界統一時間、世界標準時間

是世界上最主要的時間，其以 原子時 秒長為基礎，在時刻上盡量接近於GMT

GMT (Greenwish Mean Time) 格林威治標準時間、格林尼治平均時間

是指位於英國倫敦郊區的皇家格林尼治天文台當地的平太陽時

因為本初子午線被定義為通過那裡的經線

北京是時間 等於 UTC+8 等於 GMT+8

默認情況下， JavaScript 將使用瀏覽器的時區並將日期顯示為全文本字符串

Sat Jan 23 2021 00:15:13 GMT+0800 (GMT+08:00)

注意：JavaScript 從 0 到 11 計算月份

  1. new Date( ) 用當前日期和時間創建新的靜態日期對象

    Date( ) 對象有新的Date( ) 構造函數創建

    var now = new Date();

  2. new Date( year , month , day ,hours, minutes ,seconds,milliseconds) 用指定日期和時間創建新的日期對象

    7個數字分別代表 年 / 月/日/小時/分/秒/毫秒，順序不能變

var now = new Date(2021,1,22,00,21); //返回 Mon Feb 22 2021 00:21:00 GMT+0800 (GMT+08:00)

  1. new Date (dateString) 從日期字符串創建一個新的日期對象

    var now = new Date("Janury 22 ,2021 ,00:23:47") // 返回 Fri Jan 22 2021 00:23:47 GMT+0800 (GMT+08:00)

  2. new Date(milliseconds) 以時間戳的形式創建一個新日期對象

    注意轉換格式是以毫秒(milliseconds)進行轉換

    var now = new Date(1611333032000); //返回　Sat Jan 23 2021 00:30:32 GMT+0800 (GMT+08:00)　

日期格式

完整格式：( YYYY-MM-DDTHH:MM:SS )

短日期格式：(MM/DD/YYYY) 例如：( 「02/19/2018」 )

長日期格式：(MMM DD YYYY) 例如：(「Feb 23 2021」)

日期和時間通過大寫字母 T 來分隔

UTC 時間通過大寫字母 Z來定義

時區

在設置/獲取 日期時，如果不規定時區，JavaScript 默認會使用瀏覽器的時區

換句話說，假如日期/時間以 GMT 創建 ，該日期/時間將被轉換為 CST (中國標準時間)，用戶在中國境內使用瀏覽器的情況下

設置/獲取日期的方法

設置 (set) / 獲取 (get)

需要注意的是：JavaScript 月、周、小時、分鐘、秒、毫秒 均是從0開始計數，而天是從1開始計數

例如：getDate( ) 方法 以數值返回天 (1-31)

​ getMinutes( ) 方法 獲取分的數值 (0-59)

設置日期：//www.w3school.com.cn/js/js_date_methods_set.asp

獲取日期：//www.w3school.com.cn/js/js_date_methods.asp

19. JavaScript 數學綜合

JavaScript Math

JavaScript Math 對象可對數字執行數學任務

  1. 8個數學常量

    JavaScript 提供了可由 Math 對象訪問的8個數學常量

    屬性 含義
    Math.E 返回歐拉指數(e) e = 2.718281828459045
    Math.PI 返回圓周率 π = 3.141592653589793
    Math.SQRT2 返回 2 的平方根 \(\sqrt{2}\) = 1.4142135623730951
    Math.SQTR1_2 返回 ½ 的平方根 \(\sqrt{½}\) = 0.7071067811865476
    Math.LN2 返回2的自然對數 \(\log_e 2\) = 0.6931471805599453
    Math.LN10 返回10的自然對數 \(\log_e 10\) = 2.302585092994046
    Math.LOG2E 2為底的自然對數 \(\log_2 e\) = 1.4426950408889634
    Math.Log10E 10為底的自然對數 \(\lg e\) = 0.4342944819032518

  2. Math.round(x) 方法返回值是 x 四捨五入後最接近的整數

    Math.round(8.8); //返回 9

  3. Math.pow(x,y) 方法返回值是 x 的 y 次冪

    Math.pow(3,3); // 返回 9

  4. Math.sqrt(x) 方法返回 x 的平方根

    Math.sqrt(16); //返回 4

  5. Math.abs( x) 方法返回 x 的絕對(正)值

    Math.abs(-3.8) // 返回 3.8

  6. Math.ceil(x) / Math.floor(x) 方法返回值時 x 向上/向下 舍入最接近的整數

    Math.ceil(6.3); // 返回 7

    Math.floor(6.3); // 返回 6

  7. Math.sin(x) / Math.cos(x) / Math.tan(x) / Math.asin(x) / Math.acos(x) / Math.atan(x)

    方法 返回 x (以弧度計) 的 正 / 餘弦(介於 -1 到 1之間的值) / 正切 / 反正/餘弦 /正切

    角度 = 弧度 * Math.PI /180

    Math.sin( 90 * Math.PI/180) // 即 sin (π/2) = 1

  8. Math.random( ) 方法返回 大於等於 0 且小於 1之間的隨機數（16位小數）

    Math.random(); // 返回 0.7163944549620018

    Math.random( ) 和 Math.floor( ) 一起使用可以返回隨機整數

    Math.floor(Math.random() * 10);        // 返回0~9之間的整數
Math.floor(Math.random() * 100);       // 返回0~99之間的整數
Math.floor(Math.random() * 10) + 1 ;   // 返回 1~10之間的整數
Math.floor(Math.random() * 11);        // 返回 0~10之間的整數

    一個適當的隨機函數

    document.getElementById("demo").innerHTML = getRndInteger(1,10);
function getRndInteger(min,max) { 
	return Math.floor(
    	Math.random() * ( max - min)
    ) + min;
}
// 返回 1 >= 且 <= 9 之間的隨機整數 即 （min <= x< max）

document.getElementById("demo").innerHTML = getRndInteger(1,10);
function getRndInteger(min,max) { 
	return Math.floor(
    	Math.random() * ( max - min + 1)
    ) + min;
}
// 返回 1~10(均包含)的隨機整數    即( min =< x <= max)

  9. atan2(y,x) 方法返回從 x 軸 到 點(x,y) 的角度

    Math.atan2(0,1); //返回 0

  10. log(x) 方法返回 x 的自然對數（e為底）

    Math.log(1); // 返回 0

JavaScript Boolean(邏輯)

通常，在編程中，兩個值之一的數據類型有很多

諸如 YES/NO ; ON/OFF ; TRUE/FALSE

鑒於此，JavaScript 提供一種布爾數據類型，它只接收 值 true 或 false

  1. Boolean( ) 方法 確定表達式(或變量) 是否為真

    Boolean(10 > 8);           //返回true
Boolean(0);                //返回false
Boolean(-0);               //返回false
Boolean("");               //返回false
Boolean(x);                //在x申明未賦值情況下返回false
Boolean(null);             //返回false
Boolean(false);            //返回false
Boolean(NaN);              //返回false

20. JavaScript 條件循環

條件語句用於基於不同條件執行不同的動作

if 語句

  1. 語法

    if(條件) {
    如果條件為 true 時 執行的代碼
}

    if (hour < 18) {
    greeting  = "Good day";
}
// 如果時間早於18:00,則發出"Good day"的問候

if…else 語句

  1. 語法

    if(條件) {
    條件為 true 時執行的代碼塊
} else {
    條件為 false 時執行的代碼塊
}

    if (hour< 18) {
    greeting = "Good day";
} else {
    greeting = "Good evening";
}
// 如果時間早於18：00,發出"Good day"的問候，否則 發出"Good evening"

else…if 語句

  1. 語法

    if(條件1) {
    條件1 為 true 時執行的代碼塊
} else if(條件2) {
    條件1 為 false 且條件2 為 true 時執行的代碼塊
} else {
    條件1 和 條件2 同時為 false 時執行的代碼塊
}

    if (hour < 10) {
    greeting = "Good morning";
} else if (hour < 18) {
    greeting = "Good day";
} else {
    greeting = "Good evening";
}
// 如果時間早於10：00 ,發出"Good moring"的問候，如果不是，且時間早於 18:00,發出"Good day"的問候
// 如果上述都不是,則發出"Good evening"的問候

switch 語句

switch 語句用於選擇多個需要被執行的代碼塊之一

  1. 語法

    switch(表達式) {
    case n:
        代碼塊
        break;
    case n:
        代碼塊
        break;
    default:
        默認代碼塊
}
// 計算一次 switch 表達式;把表達式的值與每個case的值進行對比;如果匹配，則執行關聯代碼
// break 關鍵詞 中斷跳出switch代碼塊
// default關鍵詞 規定不存在case匹配時默認運行的代碼;並不是最後一個，可放在任意位置

    var day;
switch (new Date().getDay()) {
    case 0 :
        day = "星期天";
        break;
    case 1 :
        day = "星期一";
        break;
    case 2 :
        day = "星期二";
        break;
    case 3 :
        day = "星期三";
        break;
    case 4 :
        day = "星期四";
        break;
    case 5 :
        day = "星期五";
        break;
    case 6 :
        day = "星期六";
        // 不必中斷 switch代碼塊中的最後一個case;代碼塊在此處自然會結束
}

    // 不同的case 使用相同的代碼

var text;
switch(new Date().getDay()) {
    case 4:
    case 5:
        text = "周末快到了:)";
        break;
    case 0:
    case 6:
        text = "今天是周末~";
        break;
    default:
        text = "期待周末！";
}

如果多種case匹配一個case值，則選擇第一個case

如果未找到匹配的case且未找到默認執行的代碼塊,程序將繼續 switch 後的語句

switch case 的值必須與要匹配的類型相同(嚴格比較 ===)

三元運算

三元運算適用於基於某些條件向變量賦值的情況

  1. 語法

    varName = (條件)? value1 : value2
// 如果條件為 true 則 varName被賦值value1;否則被賦值value2

    var voteable = (age < 18) ? "To young" "Mature enough"

循環 適用於 需要運行某代碼多次，且每次使用不同的值的情況

for 循環

for 循環 多次遍歷代碼塊

  1. 語法

     for(語句1 ; 語句2 ; 語句3) {
     要執行的代碼塊
 }
// 語句1在循環開始之前執行  (初始化值,可以是多個,用","逗號隔開)
// 語句2定義運行循環的條件  (什麼條件下才執行循環)
// 語句3會在循環每次被執行後執行  (通常遞增/減初始變量的值)
// 語句1 和 語句3都可在其他位置申明，但是";"分隔符不能少

    var cars = ["BMW","Volvo","Porsche","Ford"];
var i,len,text;
for(i = 0 ,len = car.length ,text = "";i < len ;i ++) {
    text += car[i] + "<br>";
}

for / in 循環

for / in 循環 遍歷對象的屬性

  1. 示例

    var person = { fanme:"Bill",lname:"Gates",age:62};
var text = "";
var x ;
for (x in person) {
    text += person[x];
}

while 循環

while 循環會一直循環代碼塊，只要指定的條件為 true

  1. 語法

     while(條件) {
     要執行的代碼塊
 }

    var i,text; 
while (i < 10) {
    text += "數字是" + i;
    i ++ ;
 }
// 只要 變量 i<10，代碼塊會一直執行;切記要對變量進行遞增/減操作

do / while 循環

do / while 循環 是 while 循環的變體

在檢查條件是否為真之前，這種循環會執行一次代碼塊，然後只要條件為真就會重複循環

  1. 語法

    do {
     要執行的代碼塊
 }
while (條件)

    var i = 0.1;
var text = "";
do {
    text += "<br>數字是" + i;
    i++;
}
while (i < 10)

for 循環 與 while循環 的區別

  1. 示例

    var cars = ["BWM","Volvo","Saab","Ford"];
var i = 0;
var text = "";
for(;cars[i];) {      //分隔號不能少
    text += cars[i] + "<br>";
    i ++;
}

var cars = ["BWM","Volvo","Saab","Ford"];
var i = 0;
var text = "";
while(cars[i]) {
    text += cars[i] + "<br>";
    i ++;
}

break 和 continue

break 語句 不僅可用於跳出 switch 代碼塊 ,也可以用於跳出循環

continue 語句 「跳過」 循環中的一個迭代

注意兩者之間的區別

  1. 示例

    var text = "";
var i = 0;
for (i = 0;i < 10;i ++) {
    if(i===3){ break;}
    text += "數字是" + i + "<br>";
}
// 這個循環只能遍歷 i = 0 , 1 ,2 這三種情況
// 當 i = 3時，已經通過 break語句跳出循環，執行循壞後面的代碼了

    var text = "";
var i = 0;
for (i = 0;i < 10;i ++) {
    if(i===3){ continue;}
    text += "數字是" + i + "<br>";
}
// 這個循環能遍歷除了 i = 3這種情況，其他情況都遍歷了 
// 當 i = 3時，已經通過 continue 語句跳出當前循環的迭代，執行循壞中下一迭代了

21. JavaScript 異常

當執行 JavaScript 代碼時，可能會發生各種錯誤

錯誤可能是編碼錯誤、由輸入格式引起的錯誤或是其它不可預見的問題

JavaScript 擁有當錯誤發生時提供錯誤信息的內置 error 對象

error 對象提供兩個有用的屬性： name 和 message

  1. name 屬性：設置或返回錯誤名

    name屬性返回值 描述
    EvalError 已在 eval( ) 函數中發生的錯誤
    RangeError 已發生超出數字範圍的錯誤
    ReferenceError 已發生非常引用
    SyntaxError 已發生語法錯誤
    TypeError 已發生類型錯誤
    URIError 在 encodeURI( ) 中已發生的錯誤

  2. message 屬性：設置或返回錯誤消息( 一條字符串)

和其它編程語言一樣，當程序運行發生異常時，將拋出異常(錯誤) 給程序員，以便處理異常或錯誤

try 和 catch 語句

JavaScript 語句 try 和 catch 成對出現

try 語句 允許您定義一個代碼塊，以便執行時檢測錯誤

catch 語句 允許您定義一個要執行的代碼塊，如果 try 代碼塊發生錯誤 (如何對錯誤進行處理)

  1. 語法

     try {
     供測試的代碼塊
 }
 catch(err) {
    處理錯誤的代碼塊
 }

    <p id = "demo"> </p>
<script>
	try { 
    	adddlert("歡迎訪問！");
    }
    catch(err) {
        document.getElementById("demo").innerHTML = err.message;
    }
</script>
// 返回 adddlert is undefinded

throw 語句

throw 語句 用來拋出一個用戶自定義的異常

如果把 throw 與 try 和 catch 一同使用，就可以控制程序流並生成自定義錯誤消息

  1. 示例

    function getRectArea(width,heigth) {
    if (isNaN(width) || isNaN(heigth)) {
        throw `Parameter is not a number!`;
    }
}
try {
    getRectArea(3,'A')
} 
catch (err) {
    console.error(err);
}
// 返回 `Parameter is not a number!`

finally 語句

finally 語句 在 try 和 catch 之後執行自定義的代碼，無論結果如何

  1. 語法

     try {
     供測試的代碼塊
 }
catch(err) {
    處理錯誤的代碼塊
}
finally {
    無論 try 和 catch 結果如何都執行的代碼塊
}

    function myFunction() {
    var message, x;
    message = document.getElementById("message");
    message.innerHTML = "";
    x = document.getElementById("demo").value;
    try { 
        if(x == "") throw "是空的";
        if(isNaN(x)) throw "不是數字";
         x = Number(x);
        if(x >  10) throw "太大";
        if(x <  5) throw "太小";
    }
    catch(err) {
        message.innerHTML = "錯誤：" + err + ".";
    }
    finally {
        document.getElementById("demo").value = "";
    }
}

22. JavaScript 作用域

作用域是指您有權訪問的變量集合

作用域決定了 從代碼不同部分對變量 、 對象 和函數的可訪問性

JavaScript 作用域的3種 類型

  • 全局作用域 ( Global scope )
  • 局部作用域 （ Local scope）
  • 塊作用域 （ Block scope）

JavaScript 擁有 函數作用域，即每個函數創建一個新的作用域，作用域決定了這些變量的可訪問性(可見性)

函數內部定義的變量從函數外部是不可訪問的(不可見的)

局部 / 全局 變量

在 JavaScript 函數內 聲明的變量，會成為函數的局部變量；局部變量的作用域是局部的，即僅能在函數內部訪問它們

函數參數也是函數內的局部變量

局部變量在函數開始時被創建，在函數結束是會刪除它們

函數之外聲明的變量，會成為全局變量； 全局變量的作用域是全局的，即 網頁的所有腳本和函數都能訪問它

除非有意為之，否則勿創建全局變量，全局變量容易被覆蓋

JavaScript Hoisting

hoisting (提升) 是 JavaScript 將 所有聲明提升到當前作用域頂部的默認行為(提升到當前腳本或當前函數的頂部)

hoisting 不適用於 JavaScript嚴格模式

JavaScript 只提升 變量聲明 ，不提升變量初始化

  1. 示例

    var x = 5; 
var y = 7;         // 初始化 x / y 

elem = document.getElementById("demo");     // 查找元素
elem.innerHTML = x + "" + y;             // 顯示元素 x和y
返回 5 7 


var x = 5 ; 

elem = document.getElementById("demo");
elem.innerHTML = x + "" + y ; 
var y = 7 ;
 返回 x undefinded         
 // y僅被聲明，但未被賦值，所以是undefinded

JavaScript Strict 模式

嚴格模式 定義了 JavaScript 代碼應以 「嚴格模式」 規範 執行；來兼容更早版本的 JavaScript

通過 在 腳本或函數的開頭 添加 「use strict」 ; 來聲明嚴格模式 且僅在腳本或函數開頭才能被識別

在嚴格模式中，類如 錯打變量名 、 向不可寫屬性賦值這種情況，會拋出異常或者錯誤；而普通模式則不會

注意：

  1. 在 strict 模式中，在未聲明 變量(對象等) 前提下 直接給變量賦值 是不允許的
  2. 刪除變量(對象、函數等) 是不允許的
  3. 八進制數值文本 、 轉義字符 是不允許的
  4. 寫入 只讀、只能獲取的 屬性 是不允許的
  5. 「eval」 、 「arguments」 字符串不能作為變量 ；且 eavl( ) 函數在被調用時不能傳遞參數
  6. with 語句 是不允許的

let 和 const

let 和 const 兩個關鍵字 在 JavaScript 中 提供了聲明 塊作用域變量和常量

通過 var 關鍵詞 聲明的變量 沒有 塊作用域 ; 即 在塊 { } 內 聲明的變量可以從塊 之外 進行訪問

  1. 示例

    	var x = 10 ;
{
    var x = 6 ; 
}
// 塊作用域
// 此處 x 為 6

var i = 7 ;
for ( var i = 0 ; i < 10 ; i ++) {
    // 一些語句
}
// 循環作用域，i 可以被循環外訪問,即循環外可見  
// 此處 i 為 10

而 let 解決了這一問題

  1. 示例

    let i = 7 ;
for (let i = 0 ; i < 10 ; i ++) {
    // 一些語句
}
// 此處 i 為 7

HTML 中的全局變量

在HTML 中 全局作用域是 window 即所有全局變量均屬於 window 對象

通過 var 關鍵詞定義的 全局變量 屬於 window 對象

通過 let 關鍵詞 定義的 全局變量 不屬於 window 對象

  1. 示例

    var carName = " porsche";
// 此處的代碼可用 window.carName

let carName = "porsche";
// 此處的代碼不可用 window.carName

var 和 let / const 的其它區別

  1. 允許在程序的任何位置 使用 var 重新聲明 JavaScript 變量

    var x = 10; 
var x = 5;
// 現在 x 為 5

  2. 在相同的作用域 或 相同塊中，通過 let 重新聲明 一個 (var 變量 / let 變量) / 通過 var 重新聲明 一個 let變量 都是不允許的

    var x = 10;          // 允許
let x = 6;    		// 不允許
{
    var x = 10;      // 允許
    let x = 6;       // 不允許
}


let x = 5 ;          // 允許
var x = 6 ;          // 不允許
{
    let x = 5;       // 允許
    var x = 6;       // 不允許
}

let x = 5;          // 允許 
let x = 6;          // 不允許
{
    let x = 5;      // 允許
    let x = 6;      // 不允許
}

  3. 在不同作用域 或 塊 中 ，通過 let 重新聲明變量是允許的

    let x =6;           // 允許
{
    let x = 7 ;    // 允許
}
{
    let x = 8 ;    // 允許
}

  4. 通過 var 聲明的 變量會被提升到頂端 ； 而 通過 let 聲明的變量 則不會

// 在此處，您可以使用 carName
var carName;

// 在此處，您不可以使用 carName
let carName;

23. JavaScript this關鍵詞

JavaScript this 關鍵詞指的是 它所屬的對象

它擁有不同的值，具體取決於它的使用位置

  • 在方法中， this 指的是 所有者對象

  • 單獨的情況下， this 指的是 全局對象

  • 在函數中， this 指的是全局對象

  • 在函數中， 嚴格模式下 this 是 undefined

  • 在事件種， this 指的是接收事件的元素

    // 在方法中，this指的是 person 對象;person 對象是 fullName 的擁有者
var person = {
    firstName : "Bill",
    lastName : "Gates",
    id : 9527,
	fullName : function () {
    	return this.firstName + " " + this.lastName;
	}
};

//默認模式，單獨的 this, this指的是 全局對象; 在瀏覽器窗口中，全局對象是 [object Window]
var x = this; 
// 返回 [object Window]

// 在嚴格模式中，如果單獨使用，那麼 this 指的是全局對象  [ object Window]
"use strict";
var x = this;
// 返回 [object Window]

function myFunction( ) {
    return this;
}
// 默認模式下，this指的是函數擁有者 即全局對象 [object Window]

"use strict";
function myFunction( ) {
    return this;
}
// 嚴格模式下,this是未定義狀態 undefined

<button onclick = "this.style.display = 'none' "> 點擊可刪除我！</button>

24. JavaScript 保留詞

  1. JavaScript 保留詞

    在 JavaScript 中，應避免 將保留詞 作為變量、標記或 函數名來使用

    abstract double in super
    arguments else instanceof switch
    await enum int synchronized
    boolean eval interface this
    break export let throw
    byte extends long throws
    case false native transient
    catch final new true
    char finally null try
    class float package typeof
    const for private var
    continue function protected void
    debugger goto public volatile
    default if return while
    delete implements short with
    do import static yield

  2. JavaScript 對象、屬性和方法

在 JavaScript 中 應避免使用 JavaScript 內建對象的名稱、屬性和方法

Array Date eval function
hasOwnproperty Infinity isFinite isNaN
isPrototypeOf length Math NaN
name Number Object prototype
String toString undefined valueOf

  1. Java 保留詞

    JavaScript 常 與 Java 一起使用，應該避免把某些 Java 對象 和屬性作為 JavaScript 標識符

    getClass java javaArray
    javaClass javaObject javaPackage

  2. HTML 和 Window 對象和屬性

    JavaScript 能夠在很多應用程序種被用作編程語言，應該避免使用HTML 和 Window 對象和屬性的名稱

    alert element navigator plugin
    all elements frames prompt
    anchor embed frameRate propertyIsEnum
    anchors embeds hidden radio
    area encodeURI history rest
    assign encodeURIComponent image screenX
    blur escape images screenY
    button event offscreenBuffering scroll
    checkbox fileUpload open secure
    clearInterval focus opener select
    clearTimeout form option self
    clientInformation forms outerHeight setInterval
    close frame outerWidth setTimeout
    closed innerHeight packages submit
    confirm innerWidth pageXOffset taint
    constructor layer pageYOffset text
    crypto layers parent textarea
    decodeURI link parseFloat top
    decodeURIComponent location parseInt unescape
    defaultStatus mimeTypes password untaint
    document nevigate pksc11 window

  3. HTML 時間處理程序

    還應該避免使用 所有 HTML 事件處理程序的名稱

    onblur onclick onerror onfocus
    onkeydown onkeypress onkeyup onmouseover
    onload onmouseup onmousedown onsubmit
Tags:

VirMach 便宜 VPS

QNews

QNews