JavaScript入門①-基礎知識築基

• 2022 年 11 月 30 日
• 筆記
• 前端WEB

01、JavaScript基礎知識

JavaScript（縮寫：JS）是一種具有面向對象能力的、解釋型的程式語言，基於對象和事件驅動，具有相對安全性的客戶端腳本語言。JavaScript是一門完備的 動態程式語言，當應用於 HTML 文檔時，可為網站提供動態交互特性，是前端開發最主要、正式的程式語言。

ECMAScript 是由 ECMA 國際標準化組織 制定的一套腳本語言的標準化規範，JavaScript算是他的實現，作為基礎語法規範，構成了JavaScript的核心。再加收瀏覽器提供的DOM（HTML網頁內容）操作API、瀏覽器BOM操作API，共同組成了 JavaScript。

1.1、語法規範

JS程式碼以行為單位，（半形）分號;結尾。

🔸注釋：//

• 單行注釋：//開頭。
• 多行注釋：/*多行注釋 */（同css）

🔸程式碼風格：

• 區分大小寫，字母、數字、下劃線組成，不能數字開頭，不能是關鍵字。
• 小駝峰命名（推薦）：initialColor

🔸關鍵字： 內置的關鍵詞：如var、do、else、enum、eval、false、for、if、void、function、switch...

🔸語句塊：花括弧 { 程式碼塊 }

1.2、引用方式

• 行內JS：元素標籤內部的JS程式碼。
• 內部JS：定義在<script>標籤里的JS程式碼，可以放到head中、body中、body後，推薦body後，先載入html再執行JS。
• 外部JS（推薦）：單獨的JS文件，通過script標籤引入，src屬性指定JS文件地址，此時標籤中寫的程式碼就無效了。
• 動態載入：通過DOM的API動態載入JS腳本資源，用JS創建<script>標籤並引入資源。

🔸腳本載入策略：

• 如果腳本無需等待頁面解析，且無依賴獨立運行，那麼應使用 async。
• 如果腳本需要等待頁面解析，且依賴於其它腳本，應使用 defer，將關聯的腳本按所需順序置於 HTML 中。

<body>
    <div>
        <h1>基礎語法</h1>
        <input type="button" value="行內JS" onclick="alert('Hello world!');"/>
        <input type="button" value="外部JS調用" onclick="hello();"/>
    </div><hr/>
</body>
<script>
    console.log("內部js：網頁載入完成！");
</script>
<!-- 引入外部js文件，設置了src屬性，script內部的程式碼就無效了 -->
<script src="../tstudy/js/js1.js" type="text/javascript" async></script>

02、變數申明var/let/const

變數，就是一個用於存放數值的容器，比如年齡=20，「年齡」就是變數，「20」是他的樹值。JS是一種弱類型語言，不需要指明數據類型，用var或 let關鍵字申明即可。

🔸申明方式：

• 申明並賦值，1步完成：var str="hello world";
• 先申明，再賦值，2步完成。var str1; str1="hello world"; // 默認值為undefined

🔸動態數據類型：JavaScript 是一種「動態類型語言」，意味著一個變數可以被賦值為各種類型數據值，通過typeof判斷數據類型。

let age;
console.log(age); //undefined
age =20;
console.log(typeof age); //number
age='年芳二十';
console.log(typeof age); //string

暫時性死區：由於沒有了變數提升，及塊級作用域，let、const變數只能在申明後才能用，在這之前不可用，稱為「暫時性死區」。

2.1、作用域

特別注意的是 var 作用域在整個文檔或函數內，整個文檔也可認為是一個特殊的頂級函數。

• 如下經典的for循環示例，var的變數提升導致輸出結果詭異。

for (var i = 1; i <= 5; i++) {
    setTimeout(function () {  //setTimeout為非同步執行函數
        console.log(i);	//輸出6 6 6 6 6
    }, 0);
}
//換成let，則輸出：1 2 3 4 5
//換成const，輸出1，然後報錯 Assignment to constant variable

• var作用域在整個函數

function foo() {
    var x = 1; //x作用域在foo函數體內，包括嵌套函數bar也可以訪問
    function bar() {
        var y = 2;	//y作用域只在函數體bar
        console.log(x); // 1 
        console.log(y); // 2 
    }
    bar();
    console.log(x); // 1 (`x` 在作用域內)
    console.log(y); // Uncaught ReferenceError: y is not defined
}
foo();
console.log(x); // Uncaught ReferenceError: x is not defined
console.log(y);    // Uncaught ReferenceError: y is not defined

• let作用域僅限{}塊，可以是函數的塊function{}、循環的塊for{}，或者就一個孤獨的塊{}。

let s1;
let s1;  //Uncaught SyntaxError: Identifier 's1' has already been declared
let x = 1; //後面塊內的 var x會被變數提升，導致重複變數定義報錯
{	
    var x = 2; //Uncaught SyntaxError: Identifier 'x' has already been declared
}

2.2、變數提升

變數提升：JS引擎是先解析程式碼，獲取所有被var申明的變數，然後再逐行執行。只提升用var顯示申明的變數，會把所有var的申明提升到全局程式碼的頂部先執行，⚠️注意只提升申明，不包括賦值。

console.log(sname);  //undefined  只提升了x的變數申明，值為默認值
var sname = "sam";
var x=1;
function print() {
    console.log(sname);  // sam
    console.log(window.sname);  //sam 全局文檔中申明的var變數，會作為 window 的全局變數屬性
    console.log(this.sname);  //sam 這裡的this 指向 全局對象window
}
print();

🔸隱式全局變數：無申明變數(str="hello";)，自動提升為隱式全局變數（不論在什麼地方），類似var變數，除了沒有變數提升。so，🚫盡量不要這麼使用，在嚴格模式下（'use strict';）這樣寫是會報錯的。

x = 0;  //未申明變數，成為隱式全局變數
function f() {
    y = 1;  //當執行該函數時，未申明變數，成為隱式全局變數
    var z = 2;  //z是函數內部申明的變數，作用域只在函數體內
}
f();
console.log(x, y); // 0 1
console.log(window.x, window.y); // 0 1
console.log(z);  //Uncaught ReferenceError: z is not defined

2.3、解構賦值

解構賦值是ES6新增的語法，可以一次性給多個變數賦值，提高了編程效率，賦值操作更簡潔。具體方式就是：將屬性/值從對象/數組中取出，賦值給其他變數的一種賦值方式。有兩種解構賦值的語法形式：

• 數組解構：類似數組的寫法，從數組中按順序賦值，這裡數組可以是其他可迭代數據。
• 對象解構：類似對象的寫法，從對象中按屬性名賦值。

//變數一個個賦值
let x1 = 1, x2 = 2, x3 = 3, x4 = 4;
// 用數組解構賦值
let [y1, y2, y3, y4] = [1, 2, 3, 4];

[x1, x2] = [x2, x1];	//用來交換x1、x2的值，不用第三方變數
// 從對象解構賦值
let { c, d } = { a: 0, c: 1, d: 2 };

03、基礎數據類型

ECMAScript 有 6 種基本類型，Undefined、Null、Boolean、Number、String、Symbol（符號），其他就是都是Object對象類型了，如Array、object、Map、Date、function等。

⚠️注意不要將基本類型中的布爾值 true / false 與值為 true/false 的 Boolean 對象弄混了，基本類型Boolean是一個對象。

console.log(typeof 1); //number
console.log(typeof true); //boolean
console.log(typeof null); //object
console.log(typeof undefined); //undefined
console.log(typeof 'abc'); //string
console.log(null == undefined); //true 值比較
console.log(null === undefined); //false  恆等比較
//boolean
const x = new Boolean(false);  //new Boolean()創建了基本類型Boolean的對象，就不是一個平平無奇的值類型了。
console.log(typeof x);  //object
console.log(x.valueOf()); //false valueOf()方法獲取對象的基本數據的值
console.log(Boolean(undefined));     //false
console.log(Boolean(null));     //false
console.log(Boolean(NaN));     //false
console.log(Boolean(0));     //false
console.log(Boolean(""));     //false
console.log(Boolean(1));     //true
console.log(Boolean(-100));     //true
console.log(Boolean("abc"));     //true

3.1、Number數字

Number的屬性、方法：

📢注意浮點數的精度：0.1+0.2 //輸出 0.3000000000000000**4** 。由於浮點數的精度問題，永遠不要用浮點數值去做條件判斷。這種錯誤是由於IEEE 754標準導致的。

Number.parseFloat("123.4a5"); //123.4
Number.parseInt("123.4a5"); //123
//注意，兩個方法是不同的，全局的window.isNaN()是判斷是否非數值。
window.isNaN("a") //true
Number.isNaN("a") //false  //這屬於JS坑爹的設計，兩個含義完全不同

console.log(Number(""));        //0
console.log(Number("123abc"));     //NaN，不同於parseint、parseFloat
console.log(Number("12.12.12"));     //NaN，不同於parseint、parseFloat
console.log(Number.parseFloat("12.12.12"));     //12.12

let n1=1.336,n2=100;
n1.toFixed(2)	//1.34
n2.toFixed(2)	//100.00

window.parseFloat(string)：從字元串的第一位（空字元會被忽略）開始，如果是數字（正號+、負號-、數字0-9、第一個小數點.、科學計數法e/E）則轉數字，直到非數字或結束。

console.log(parseFloat("123abc"));    //123
console.log(parseFloat("abc123"));    //NaN
console.log(parseFloat("11.11"));      //11.11
console.log(parseFloat("11.11.33"));   //11.11

window.parseint(string)：同parseFloat，除了不識別小數點。

console.log(parseInt("123abc"));    //123
console.log(parseInt("abc123"));    //NaN
console.log(parseInt("11.11"));      //11

3.2、String字元串

String：字元串對象，提供各種字元串操作。

🔸字元串的不變性：字元串一經創建不會改變。 let str="abc"; str="123";

• 這裡的不改變，不是字元變數str不能修改，是指字元串"abc"本身不可更改，修改str會創建新的字元。所以，字元的操作都不會影響原來的字元串值，而是創建新的字元串。
• 字元連接創建新字元：字元的連接，如+，會創建新的字元串。

🔸模板字元串(IE🚫)：${var}+反引號 `` 包裝

板字元串可以包含特定語法（${expression}）的佔位符，由一個內置函數負責計算表達式並輸出最終的字元串。

let x=1,y=2;
console.log(`sum: ${x} + ${y} = ${x+y}`); //sum: 1 + 2 = 3

🔸JavaScript 特殊/轉義字元：在字元串中使用的特殊符號

3.3、類型( 隱式 )轉換

隱式類型轉轉換，是自動進行的，也叫自動類型轉換。

📢隱式轉換總結：

• 轉boolean：undefined、null、NaN、0、空字元轉bool都為false；非0數字（包括負數）、非空字元（包括」true「、」false「）、對象、空數組[] 轉boolean都為true。
• 轉數字：非空字元串都是數字(忽略空格)的轉對應數字，否則NaN；null、空字元轉數字為0。
• 轉字元串：任意類型轉字元串加引號，包括undefined、null。
• +運算：字元串+任意類型（包括空字元）均轉換為字元串；boolean、數字轉數值進行相加。
• -、*、/、% 運算：都是隱式轉換為數值運算。
• ==、>、< 比較運算符：不同的值類型轉數字；都是字元比較碼值；如果存在對象，先轉換為原始值。

console.log("-1" - 1); // -2
console.log(2 > true); // true
console.log("one" + true); // onetrue
console.log("1.5" * 2); // 3
console.log("1.5" + 2); // 1.52
console.log([5] / 2); // 2.5

🔸顯示類型轉換就是調用各種方法、類型構造函數進行顯示的數據轉換。

• toString()：基本每種數據類型都提供了toString()方法，轉換為字元串，除開null和undefined不可使用，會報錯。
• 類型構造函數：Boolean()、Number()、String()的類型函數，都可以轉換對應數據類型。
• valueOf()：valueOf()方法可以轉換對象為一個基本數據值。
• 其他如parseInt()、parseFloat()...等方法。

3.4、值類型與引用類型

⁉️堆和棧：

• 棧(stack)：提供程式碼執行環境，並存放值類型、變數標識符。速度快，空間有限（不同瀏覽器不同）。
• 堆(heap)：存放引用類型數據，速度慢，空間大。

	值類型（基本類型）	對象/引用類型
數據類型	undefined、null、Boolean、Number、String、Symbol	Array、object、window，function等 包裝類型：String、Number、Boolean； 單體內置對象：Global、Math
存儲位置	存儲在棧中（變數標識符、變數值），佔用空間固定	存儲在堆中，佔用空間不固定。變數標識符存儲在棧區，值為地址指針，指向存儲在堆區的對象數據。
屬性方法	不能添加任何屬性、方法。	可以動態添加屬性和方法
複製	複製變數值	複製地址指針（變數值是對象的指針），指向同一對象
參數傳遞	值傳遞，不影響原有變數	引用地址傳遞，共用同一個對象
垃圾回收	函數執行完就回收了	沒有任何引用時，才會被垃圾回收機制收回
類型驗證	typeof：typeof 0; //number	instanceof：[] instanceof Array //true Object.prototype.toString.call({}) //[object Object]
==比較	值類型是值比較	引用類型比較引用地址，所以要用恆等===比較

04、運算/操作符

• 運算符優先順序匯總表

4.1、➕算數運算符

📢運算符優先順序：[ ++，--，!] > [*，/，% ] > [ +，- ]

var x=1;  //經典面試題
console.log(x+x++ + ++x); //1+1+(1+2)=5

🔸+加運算符會隱式轉換：+運算就是字元相加、數字相加兩種情況

• boolean、數字相加會隱式轉換為數值進行相加。
• 字元串 + 非字元串會隱式轉換為字元串。

console.log(true+false);    //1
console.log(true+3);    //4
console.log(true+"1");    //true1
console.log("123"+123);    //123123
console.log("123"+[1,2,3]);    //1231,2,3

🔸-，*，/，% 隱式轉換數值：都是數學運算轉數字。減、乘、除、取余運算都是數學運算，會隱式轉換為數字再運算。

console.log("123"-"12");    //111
console.log("123"-12);    //111
console.log("123"-1-true);    //121
console.log("123"/true);    //123
console.log("123"/2);    //61.5

4.2、⏸️賦值運算符

4.3、🔀比較運算符

比較運算符會隱式轉換為數值！

• 都是字元，轉為碼值進行比較，
• 兩個不同類型比較，隱式轉為數值，然後進行比較。
• 引用類型永遠不相等，雖然其內部的數據一模一樣，因為比較的是引用地址。
• 推薦恆等，由於 ==、!= 比較會隱式轉換，會遇到較多奇葩問題，在開發中，我們一般使用嚴格比較恆等 === !==。
• NaN與任何值比較，都是false, Infinity 只等於它自身。console.log(NaN==NaN); //false
• null 和 undefined， 他們直接相等，和其他原始類型比較，不相等。

console.log("123">"45");    //false 都是字元比較字元碼值
console.log("123">45);  //true  轉換為數值比較
console.log("123"==123);    //轉數值比較，true
console.log(""==false);  //true 轉為數值比較
console.log("false"==false);  //false 轉為數值比較
console.log("true"==true);  //false 轉為數值比較
console.log([1,2,3]==[1,2,3]);  //false，數組是對象

4.4、❗邏輯運算符

邏輯運算符會隱式轉換為boolean值。

短路運算符&&、||常用來判斷都為真、至少有一個為真：

let user = { name: "sam", score: 98, age: 12 };
if (user.age <= 12 && user.score > 95)
    console.log(`${user.name} 是一個少年天才！`);

4.5、⁉️其他操作符

05、邏輯語句

if/switch條件判斷

if條件語句，根據條件執行。if可單獨使用，也可以跟else if （0個或多個，中間）、else（0個或1個，放最後）。

if (條件) { /*程式碼*/ }
else if(條件) { /*程式碼*/ }
else if(條件) { /*程式碼*/ }
else { /*程式碼*/ }  //可以不要else部分，單獨if

switch定值條件分支，值的判斷是用的===恆等比較，多用於枚舉值、固定的常量值。注意每一個case後需要用break，以防止穿透（繼續往後執行）。

switch (表達式) {
    case 值1:
        /*程式碼*/;
        break;     //返回，結束switch，防止無意義的穿透執行
    case 值2:
    case 值3:      //可以多case合併一塊
        /*程式碼*/;
        break;
    default:      //前面的case都沒有命中時執行
        /*程式碼*/
}

try.catch異常處理

用 try...catch...finally 語句捕獲異常，throw語句拋出一個異常。

• JS程式碼如果發生了異常，則不會再執行後面的程式碼了，就需要做好異常捕獲處理。
• finally 語句塊為可選，不管是否拋出異常都會執行，常用來做一些清理收尾工作。
• throw拋出異常，可以是自定義的值、對象，可以用Error對象包裝一個錯誤資訊。

function print(para) {
    if (para <= 0) {
        throw "參數para必須大於0（para= "+para+"）";
        throw new Error("參數para必須大於0（para= "+para+"）");
    }
    console.log(para);
}
print(2);   //如果這裡參數用-2，則會拋出異常，這裡的異常沒人管，後面的程式碼就不會執行了
try{        //try包裝要執行的程式碼
    print(-2);
}
catch(e){   //catch捕獲try中拋出的異常並處理，參數為捕獲到的異常資訊，如果沒有異常則跳過catch語句
    console.log("發生錯誤：" + e);
}
finally{
    console.log("執行完畢！")    //始終會被執行的程式碼，用於一些清理收尾工作
}

break/continue

• break：結束循環，停止本層循環，跳出本層循環，大家都別幹了！
• continue：結束本次循環，暫停本次循環，不執行後面的程式碼了，繼續下一次循環，我不想幹了，你們繼續！

while(true) { }

while循環，先判斷，符合條件才執行，會循環的判斷條件 》執行，所以必須注意結束循環的控制，不然就是死循環了。

while(條件表達式){
    /*循環程式碼*/
    //條件控制程式碼，別忘了
}

do{ } while (true)

do...white循環，先執行 》再判斷。同while，需注意循環的控制，避免死循環。

do{
    /*循環程式碼*/
    //條件控制程式碼，別忘了
}while(條件表達式)

for(i,i<n,i++){ }循環

循環執行邏輯控制語句：

for(初始化語句;判斷條件語句;控制條件語句){
    /*循環程式碼*/
}
for(let i=1;i<=10;i++){ //循環1到10
    if(i>6)
        break; //跳出並結束循環
    if(i%2==1)
        continue;   //如果是奇數，返回繼續下一次循環
    console.log(i);     
}

for(in){ }可枚舉屬性

for...in循環，對一個對象（不僅僅是數組）進行循環遍歷，遍歷其所有可枚舉的屬性（索引下標、屬性），包括繼承來的。

let arr=[1,2];
arr.uname="arr";
arr.print=function(){console.log(this.length)};
for(let i in arr){
    console.log(i+":"+arr[i]);
}
/*輸出：
0:1
1:2
uname:arr
print:function(){console.log(this.length)}
*/

❗慎用 for(in)：for(in)是循環遍歷的是所有可枚舉的（enumerable）屬性，對於數組、可迭代集合一般使用for(of) 。

for(of) {}集合值迭代

for…of(IE🚫)語法是ES6新引入的語法，用於遍歷可迭代（iterable）對象，只遍曆數組對象元素。包括字元串String、數組Array、集合Set、字典Map、arguments 對象、DOM NodeList 對象等。

和for...in最大的區別就是，for...of迭代的是集合的數據值，而不是可枚舉屬性（索引）。

let arr=[1,2];
arr.uname="arr";
arr.print=function(){console.log(this.length)};
for(let i of arr){
    console.log(i); //1  2
}

forEach()數組方法

forEach 作用於數組對象，用於遍曆數組對象的每一個元素，並對每一個元素執行回調(callback)函數。

語法：ArrayObject.forEach(callback(currentValue, index, arr), thisValue))

let arr = [1, 2];
arr.uname = "arr";
arr.print = function () { console.log(this.length) };
arr.forEach(function (item, index) {
    console.log(index + ":" + item);
});
/*輸出： 
0:1
1:2
*/

©️版權申明：版權所有@安木夕，本文內容僅供學習，歡迎指正、交流，轉載請註明出處！原文編輯地址-語雀