JavaScript入門①-基礎知識築基
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>標籤並引入資源。
<script>屬性 |
描述 | 值/備註 |
|---|---|---|
| src | 外部資源地址，與嵌入腳本程式碼不可同時使用 | <script src="js1.js" async></script> |
| type | 定義腳本語言類型，可空，默認為JavaScript類型 | 支援的MIME類型包括text/javascript、 text/ecmascript、 application/javascript 和application/ecmascript |
| async | 非同步並行載入，只針對外部JS資源 | 多個async腳本載入完成的順序不確定 |
| defer | 等HTML解析完成再執行JS，在DOMContentLoaded之前執行，只針對外部JS資源 | 多個腳本資源順序載入 |
🔸腳本載入策略：
- 如果腳本無需等待頁面解析，且無依賴獨立運行，那麼應使用
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
| var | let (IE11 ES6) | const (IE11 ES6) | |
|---|---|---|---|
| 說明 | 變數申明 | 變數申明 | 只讀常量申明：申明時必須初始化值，不可更改 |
| 作用域 | 全局（整個文檔）或整個函數體內 | 塊級作用域{}包含的區域 |
塊級作用域{} |
| 命名規範 | 推薦：小駝峰命名 | 同var | 推薦：全大寫+下劃線，const MAX_SPEED |
| 默認值 | undefined |
undefined |
必須賦值 |
| 變數提升 | 提升所有var申明的變數，可以先使用後申明（不推薦），把var變數申明提升到程式碼頭部，⚠️注意不包括賦值 | 不會提升，順序執行：必須先申明，後使用。存在暫時性死區let foo=(foo+55)第二個foo未申明報錯 |
不會提升，順序執行：必須先申明，後使用。 |
| 全局屬性 | 在全局環境時，會成為頂級對象的屬性（不可配置屬性），作為全局變數存在。var age=3; //this.age;window.age |
無 | 無 |
| 重複申明 | 可以重複申明，覆蓋前面的，有點太隨意了 | 不可重複申明，作用域內重複申明會報錯 ● 包括var、const申明的變數 ● 子塊可重新申明let，不同的作用域了 ● 子塊中用var變數會重複，var會提升 |
不可重複申明，會提示錯誤，同let |
| 申明多個 | 支援：var s1=1,st=2; |
支援：let s1,s2=2; |
支援：const s1=1,s2=2; |
| 性能 | 一般 | 一般 | 編譯器會做常量替換優化，提升程式碼效率 |
| 總結 | 🚫有點粗獷，不推薦 | 💛更嚴謹，推薦使用 | 💚不僅更嚴謹，性能還好，優先推薦！！！ |
暫時性死區：由於沒有了變數提升，及塊級作用域，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等。
| 數據類型 | 描述 | |
|---|---|---|
| Number | 數值：整數、小數（浮點型） ● 都是64位浮點類型存儲的，最高精度17位，所以1和1.0是相等的。 ● 浮點數計算時（小數位）可能不準確，不建議用浮點數做判斷。 ● 存儲時會自動轉換整數的浮點數值，如1.0轉換為1。 |
let myAge = 17; |
| Boolean | 布爾類型：有兩個值true、false |
let isFirstBlood=true; |
| null | 空值關鍵字，表示空缺、空值，其類型為object，表示一個空對象的指針。undefined繼承自null，等值比較時返回true。 |
注意判斷object類型時須排除null。 |
| Undefined | 未定義：只有一個值undefined，表示未定義或不存在● 未賦值的變數默認為 undefined。● 調用函數時未傳遞必須參數，則為 undefined。● 函數沒有返回值，默認返回 undefined。 |
|
| String | 字元串：單引號、雙引號括起來，用加號+連接字元串。● 不可變：JS的字元串一旦創建不可變，所有更改都會創建新的字元串 ● 每一個字元元素是16 位的無符號整數值 |
|
| Symbol ES6 | 符號類型，具有唯一性和不變性，常用於對象屬性名 | const fooSym = Symbol('foo') |
| bigint | 新添加的數據類型(ES2020) | |
| object對象 | 對象：引用類型，各種值的組合 | |
| Array | 數組對象 | var list1=[1,2,3]; |
| JSON對象 | 對象：var jobj={name:"zhang",age:1}; |
|
| function | 函數，本身也是對象 | function f1(){/*...*/} |
⚠️注意不要將基本類型中的布爾值 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的屬性、方法：
| 屬性/方法 | 描述 | 示例 |
|---|---|---|
| 🔖靜態屬性/方法 | ||
| Number.NaN | NaN是一個特殊的Number值，即非數值（Not a Number） ● NaN和任何值都不相等，包括它自己，和任何值計算都為NaN ● Math、parseInt函數執行失敗會返回NaN |
同window.NaN |
| Number.MAX_VALUE | 最大數值（靜態屬性），值接近於 1.79E+308 | |
| Number.MIN_VALUE | 最接近 0 的正值，而不是最小的負值，約為 5E-324 | |
| Number.isNaN() IE🚫 | 判斷是否等於NaN，window.isNaN是判斷是否非數值，坑！ |
只有NaN才返回true |
| Number.isInteger() IE🚫 | 是否為整數 | |
| Number.parseFloat() IE🚫 | 解析浮點數，從第一個非空字元解析獲取數字，識別第一個小數點 | 同window.parseFloat() |
| Number.parseInt() IE🚫 | 解析整數，從第一個非空字元解析獲取數字，支援進位參數 | 同window.parseInt() |
| 🔖構造函數 | ||
| Number() | 轉換為數字（忽略空格）。Number()轉換數據不同於parseint、parseFloat，要求必須為合法數字，要求更嚴格，不成功便成仁。 | Number(true) //1 |
| 🔖實例屬性/方法 | ||
| toFixed(小數位數) | 轉換為指定小數位數的字元，多了會四捨五入，不足用0補位 | n1.toFixed(2) |
| toString() | 轉字元串，參數可以指定基數（進位） | n2.toString(2) //2進位 |
📢注意浮點數的精度：
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：字元串對象，提供各種字元串操作。
| 屬性/方法 | 描述 | 示例 |
|---|---|---|
| 🔖構造函數 | ||
| String() | 支援任意值轉換為字元串，包括null、undefined，都是直接加引號，很粗暴！📢可以用來判斷null、undefined |
String(null) //"null" |
| 🔖實例屬性/方法 | ||
| length | 字元串長度 | "abc".length; // 3 |
| charAt(index) | 返回指定位置的字元 | |
| indexOf(char) | 返回字元的索引位置，從前往後找，lastIndexOf是從後往前找 |
s1.indexOf("12") |
| substr(start,length?) | 截取字元串：指定起始位置、長度，無length到結尾（下同） |
s1.substr(2) |
| substring(start,end?) | 截取字元串：指定起始位置、結束位置 | |
| slice(start,end?) | 截取字元串：起始位置、結束位置，同substring，區別是支援負數（倒數），（slice /slaɪs/ 切片） |
str.slice(0,-1);//截取0到倒數第二位置的字元 |
| split(separator,limit?) | 按照分隔符分割字元串為數組 | （split /splɪt/ 分裂） |
| trim() | 移除首尾的空白字元，返回新字元，不會改變原有字元。 | |
| trimStart() | 同上，值移除開頭的空白字元，還有移除末尾的trimEnd() |
|
| padStart(len,str) | 從頭補齊字元長度到len，str為去替補的字元，沒有則空格 |
"12".padStart(5,'0') |
| padEnd(len,str) | 補齊字元長度，從尾部開始 | |
| replace(old, new) | 字元替換，str.replace("台灣","台灣省")，支援正則和函數 |
|
| repeat(n) | 創建一個重複n次的新字元串 | "12".repeat(2) //1212 |
| toLowerCase() | 字元轉小寫，大寫是toUpperCase() |
|
| includes(str) | 判斷是否包含指定的字元串 | |
| startsWith(str) | 判斷是否以指定字元開頭，endsWith()判斷結尾 | |
| search(str) | 字元搜索或正則匹配搜索 | |
| match(regexp) | 正則匹配搜索字元 |
🔸字元串的不變性：字元串一經創建不會改變。 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 特殊/轉義字元：在字元串中使用的特殊符號
| 字元 | 描述 |
|---|---|
| \0 | Null 位元組 |
| \b | 退格符 |
| \f | 換頁符 |
| \n | 換行符 |
| \r | 回車符 |
| \t | Tab (製表符) |
| \v | 垂直製表符 |
| \’ | 單引號 |
| \” | 雙引號 |
| \\ | 反斜杠字元（\） |
3.3、類型( 隱式 )轉換
隱式類型轉轉換，是自動進行的，也叫自動類型轉換。
| 值 | 字元串 | 數字 | 布爾值 |
|---|---|---|---|
| undefined | “undefined” | NaN | false |
| null | “null” | 0 | false |
| true | “true” | 1 | true |
| false | “false” | 0 | false |
| “”(空字元) | “” | 0 | false |
| “1.5” | “1.5” | 1.5 | true |
| “one” | “one” | NaN | true |
| 0 | “0” | 0 | false |
| -1 | “-1” | -1 | true（非0數字都true） |
| 1 | “1” | 1 | true |
| NaN | “NaN” | NaN | false |
| []（空數組） | 0 | true | |
| [5]一個數字 | 裡面的數字5 | true | |
| [“a”][1,2]其他數組 | NaN | true | |
| {…}對象 | NaN | true |
📢隱式轉換總結：
- 轉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 //trueObject.prototype.toString.call({}) //[object Object] |
| ==比較 | 值類型是值比較 | 引用類型比較引用地址，所以要用恆等===比較 |
04、運算/操作符
4.1、➕算數運算符
| 運算符 | 描述 | 示例 |
|---|---|---|
| + | 加 | |
| – | 減 | |
* |
乘 | |
| / | 除 | |
| % | 取餘數 | 6%3; //=0 |
** |
指數，冪運算，等同於Math.pow(a,b) | 3**2; //=Math.pow(3,2)=9 |
| ++ | 自加1，符號在前面的先運算，再賦值，在後面的反之 | x=++y; //y=1+y; x=y;x=y++; //x=y;y=1+y; |
| — | 自減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、⏸️賦值運算符
| 運算符 | 描述 | 示例 |
|---|---|---|
| = | 賦值運算符，一個神聖的儀式 | |
| += | 加法賦值 | x+=y //x=x+y |
| -= | 減法賦值 | x-=y //x=x-y |
| *= | 乘法賦值 | x*=y //x=x*y |
| /= | 除法賦值 | x/=y //x=x/y |
| %= | 取余賦值 | a%=3 //a=a%3 |
4.3、🔀比較運算符
| 運算符 | 描述 | 示例/備註 |
|---|---|---|
| >，<，>=，<= | 大於，小於，大於等於，小於等於 | |
| == | 相等比較，比較變數的值，而不管其類型 | "1"==1; //true |
| === | 恆等比較，比較類型和值 | 無類型轉換 |
| != | !=不等於比較 |
|
| !== | !==不恆等比較 |
無類型轉換 |
比較運算符會隱式轉換為數值！
- 都是字元，轉為碼值進行比較，
- 兩個不同類型比較，隱式轉為數值，然後進行比較。
- 引用類型永遠不相等，雖然其內部的數據一模一樣，因為比較的是引用地址。
- 推薦恆等，由於
==、!=比較會隱式轉換，會遇到較多奇葩問題，在開發中，我們一般使用嚴格比較恆等===!==。 - 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、❗邏輯運算符
| 運算符 | 描述 | 示例/備註 |
|---|---|---|
| ! | !邏輯非運算符 |
!false //true |
| && | &&、|| 也叫短路運算符：從左往右判斷，符合要求就不繼續執行了邏輯與 &&=同時滿足：返回第一個為false的值，否則最後一個值 |
1 && 2 && 3 //返回31 && 2 && false && 3 //返回false |
| || | 邏輯或=滿足一個即可：返回第一個為true的值，否則最後一個值 |
1 || 2 || false //返回1 |
邏輯運算符會隱式轉換為
boolean值。
短路運算符&&、||常用來判斷都為真、至少有一個為真：
let user = { name: "sam", score: 98, age: 12 };
if (user.age <= 12 && user.score > 95)
console.log(`${user.name} 是一個少年天才！`);
4.5、⁉️其他操作符
| 運算符 | 描述 | 示例 |
|---|---|---|
| ?: | 三元表達式：判斷條件 ？條件為真 ：條件為假 |
age = 4 > 2 ? 4 : 2; //4 |
| ??= | 邏輯空賦值運算符： (x ??= y) 僅在 x 是(null 或 undefined) 時對其賦值y | x??="default"; |
| ?. || | 可選鏈運算符，不為空（null 或 undefined）時才執行。可以沒有 ||，返回undefined |
page=res?.data?.size ||1;obj?.[prop]; obj.func?.() |
| void | 運行表達式，返回一個 undefined | void alert("void") |
| &，|，~，^，<<，>> | 二進位位的運算，32位數字的位運算 | |
| delete | 刪除一個對象的屬性、數組鍵值，刪除後會變為undefined | delete objt.pro |
| typeof | 獲取數據類型，typeof (operand)，括弧省略。 |
typeof null; //object |
| in | 判斷屬性是否在對象中 | "length" in [] //true |
| instanceof | 判斷對象是否指定的類型，用於引用類型、自定義類型 | [] instanceof Array //true |
| new | new Object()創建對象實例 |
|
| superIE🚫 | 調用一個對象父類的函數，在子類中調用 | supper.print(); |
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
*/
©️版權申明：版權所有@安木夕，本文內容僅供學習，歡迎指正、交流，轉載請註明出處！原文編輯地址-語雀
