JavaScript · Magic_sword2

[TOC] # 簡介說明 原文鏈接： - [JavaScript](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference) ``` 版本：JavaScript 作用：具有函數優先的輕量級，解釋型或即時編譯型的編程語言 ``` # 基本語法 # ? : ***** 三元判斷符 # ? . ***** 對象有屬性則調用沒有則忽略，瀏覽器環境有效 # ?? ***** 空值合并運算符，當左側返回null或者undefined，執行右側返回值 # ...args ***** 展開運算符，可以將迭代對象展開 ### 示例內容 1. 使用案例 ``` var a, b, rest; [a, b] = [10, 20]; console.log(a); // expected output: 10 console.log(b); // expected output: 20 [a, b, ...rest] = [10, 20, 30, 40, 50]; console.log(rest); // expected output: [30,40,50] [..."abc"] // expected output: ["a","b","c"] ``` # ( , ) ***** 逗號表達式，從左往右逐個計算表達式，它的值為最后一個表達式（也即表達式n）的值 # ()=>{}/()=>() ***** 箭頭函數，沒有this，沒有arguments對象，小括號直接返回里面內容 # {}={}/[]=[] ***** 解構賦值 ### 示例內容 1. 使用案例 ``` 數組案例： let a=12,b=13 [a,b]=[b,a] a 對象案例：同理 ``` # \<\< ***** 左移動運算符，往左移動n位相當于乘2的n次方 ### 示例內容 1. 使用案例 ``` 15 << 2 返回值：60 ``` # \>\> ***** 右移動運算符，往右移動n位相當于除2的n次方 ### 示例內容 1. 使用案例 ``` 128 >> 2 返回值：64 ``` # \>\>\> ***** 無符號向右移位 # && ***** 邏輯與 # || ***** 邏輯或 # async ***** 創建一個異步函數 # await ***** 等待一個promise對象 ### 示例內容 1. 使用案例 ``` function say() { return new Promise(function (resolve, reject) { setTimeout(function () { resolve(158); },3000); }); } async function demo() { const v = await say(); console.log(v); const z = await say(); console.log(z); } demo(); ``` # break ***** 跳出當前代碼塊 ### 示例內容 1. 使用案例 ``` break ``` # class ***** es6中新定義的類的創建方式 ### 示例內容 1. static ``` static 關鍵字只能修飾靜態方法 static get 函數名獲取屬性 static set 函數名設置屬性 ``` # const ***** 定義常量 ### 示例內容 1. 使用案例 ``` const i = 1; ``` 2. 語法特點 ``` - 常量不能重新賦值 - 不能重復聲明 - 塊級作用域 - const 不會被預解析 ``` # continue ***** 重新開始下一次新循環 ### 示例內容 1. 使用案例 ``` continue ``` # delete ***** 釋放變量內存 ### 示例內容 1. 使用案例 ``` 值類型放在棧，引用類型放在堆 let a = [1, 2, 3, 4, 5]; delete a[2]; console.log(a); ``` # export ***** 模塊導出 ### 示例內容 1. 使用案例 ``` const a = 1; let b = 2; function show() { console.log(10); } show(); // 10 console.log(a); // 1 console.log(b); // 2 export default a; export { a, b as c, show } ``` 2. 導入案例 ``` import {a, b} from './js/foo.js'; console.log(a); import('./js/bar.js').then(bar => { console.log(bar); }); ``` # for ***** 循環 ### 示例內容 1. 使用案例 ``` 1. 新式寫法 for (let i in [1, 2, 3]) { console.log(i); } for (let x of a) { console.log(x); } 2. 傳統寫法 for (let i = 0; i < [1, 2, 3].length; i++) { console.log(i); } ``` # for in ***** 遍歷出來是屬性 # for of ***** 遍歷出來是值 ### 示例內容 1. 舉例說明 ``` // 創建可迭代對象 let obj = { data: [ 'hello', 'world' ], [Symbol.iterator]() { const self = this; let index = 0; return { next() { if (index < self.data.length) { return { value: self.data[index++], done: false }; } else { return { value: undefined, done: true }; } } }; } }; ``` # func\`TemplateStringsArray\` ***** 直接傳遞模板字符串給函數 ### 示例內容 1. 使用案例 ``` function f(a: TemplateStringsArray) { console.log(a); } f`color:red;background:red`; ``` # if ***** 分支抉擇 ### 示例內容 1. 使用案例 ``` let c = 1; if (c === 1) { } else if (c === 2) { } else { } ``` # import ***** 模塊導入 ### 示例內容 1. 使用案例 ``` 注意引用標簽類型 <script src="main.js" async type="module"></script> <script src="movie.js" type="module" ></script> import {a, c, show} from './trial.js'; show(); // 10 console.log(a); // 1 console.log(c); // 2 <script type="module" src="a.js"></script> ``` # import() ***** 模塊導入 ### 返回類型 ``` Promise ``` ### 示例內容 1. 使用案例 ``` 注意引用標簽類型 <script src="main.js" async type="module"></script> <script src="movie.js" type="module" ></script> import("a.js").then(res=>{console.log(res)}); ``` # in ***** 如果指定的屬性在指定的對象或其原型鏈中，則in 運算符返回true。 ### 示例內容 1. 舉例說明 ``` // 數組 var trees = new Array("redwood", "bay", "cedar", "oak", "maple"); 0 in trees // 返回true 3 in trees // 返回true 6 in trees // 返回false "bay" in trees // 返回false (必須使用索引號,而不是數組元素的值) "length" in trees // 返回true (length是一個數組屬性) Symbol.iterator in trees // 返回true (數組可迭代，只在ES2015+上有效) // 內置對象 "PI" in Math // 返回true // 自定義對象 var mycar = {make: "Honda", model: "Accord", year: 1998}; "make" in mycar // 返回true "model" in mycar // 返回true ``` # instanceof ***** 類型判定，并且考慮到繼承關系 ### 示例內容 1. 使用案例 ``` console.log([] instanceof Object); 輸出：true ``` # let ***** 定義塊級作用域變量 ### 示例內容 1. 使用案例 ``` let i = 1; ``` 2. 語法特點 ``` let 允許聲明一個在作用域限制在塊級中的變量、語句或者表達式 - 塊級作用域 - let 不能重復聲明 - let 不會被預解析 ``` # return ***** 跳出當前方法 ### 示例內容 1. 使用案例 ``` return ``` # switch ***** 分支抉擇 ### 示例內容 1. 使用案例 ``` let c = 1; switch (c) { case 1: console.log("a"); break; case 2: console.log("a"); break; default: console.log("a"); } ``` # label: ***** 帶標簽的語句，類似goto允許你在語句之間穿梭 ### 示例內容 1. 使用案例 ``` outer:while (true) { inner:while (true) { break outer; } } // 跳出循環到這里 console.log("hello") ``` # throw ***** 拋出一個異常 # try ***** 異常捕獲 ### 示例內容 1. 使用案例 ``` try { } catch (e) { } finally { } ``` # typeof ***** 類型判定，輸出字符，注意null是Object ### 示例內容 1. 使用案例 ``` console.log(typeof []); 輸出：object ``` # var ***** 定義方法級作用域變量 ### 示例內容 1. 使用案例 ``` var i=1; ``` 2. 語法特點 ``` var 允許聲明一個在作用域限制在函數中的變量、語句或者表達式 - 函數作用域 - var 聲明的變量只能是全局或者整個函數塊的 - var 能重復聲明 - var 會被預解析 ``` # void ***** 定義函數返回undefined ### 示例內容 1. 使用案例 ``` var foo = 1; void function(){ foo = 1; }() // will assign foo a value of 1 +function(){ foo = 1; }() // same as above 當IIFE括號上一層代碼不寫分號會造成小括號作為上一層代碼函數調用，添加void可以避免這個問題 ``` # while ***** 循環 ### 示例內容 1. 使用案例 ``` 1. 先做一次再循環 do { } while (1 === 1); 2. 循環知道滿足條件 while (1 === 1) { } ``` # with ***** 將變量屬性映射為當前作用域環境 ### 示例內容 1. 使用案例 ``` var env = {b: 1}; with (env) { console.log(b); } ``` 2. 變量隔離 ``` var b; void function () { var env = {}; b = 2; console.log("function " + b) // 2 with (env) { var b = 9; // 如果不定義var 進行變量提升，函數獲取閉包環境中全局b console.log("with " + b) // 9 } }() console.log("global " + b); // undefined ``` # yield ***** 函數斷點，生成器對象 ### 示例內容 1. 舉例說明 ``` let compute = function* (a, b) { let sum = a + b; yield console.log(sum); let c = a - b; yield console.log(c); let d = a * b; yield console.log(d); let e = a / b; console.log(e); }; // 執行一下這個函數得到 Generator 實例 let generator = compute(4, 2); // 要使得函數中封裝的代碼邏輯得到執行，還得需要調用一次next方法。 generator.next(); ``` # super ***** 父類的引用 # new ***** 實例化對象 ### 示例內容 1. 使用案例 ``` new URL(); ``` # new.target ***** 構造函數中使用的關鍵字，用于判斷當前實例是否為指定類型，多用于做抽象類 # globalThis ***** 包含全局的 this 值，類似于全局對象 # 特性內容 # 語句圖解 ***** 語句圖解 ### 示例內容 1. 思維導圖 ![JS語句圖](https://img.kancloud.cn/98/ce/98ce53be306344c018cddd6c083392d5_555x872.jpeg) # 關系圖解 ***** 對象間原型，構造函數，原型鏈之間的關系 ### 示例內容 1. 使用案例 ![JS原型圖解](https://img.kancloud.cn/d4/8e/d48edc69f2309cf55d4bf5dd1ea2e692_1768x992.png) # EventLoop ***** 事件循環 ### 示例內容 1. 舉例說明 ![event-loop](https://img.kancloud.cn/23/36/2336375b94d479d13fc72b9e9d80bb8f_2388x2396.png) ![JS事件循環](https://img.kancloud.cn/b5/d6/b5d6cb4581eab5eb85472a4eb3b2b077_1954x1784.jpg) # 創建對象 ***** 創建對象--ES6之前的傳統方式 ### 示例內容 1. 使用案例 ![JS原型繼承](https://img.kancloud.cn/6a/3e/6a3eee45db2b406a88b7cfa7f564ad5e_890x3673.png) 2. jQuery創建模式 ``` let jquery = (function () { let obj = function () { return new obj.prototype.init(); }; obj.prototype = { constructor: obj, init: function () { }, }; obj.set = function () { }; obj.prototype.init.prototype = obj.prototype; return obj; })(); ``` # 繼承對象 ***** 繼承對象--ES6之前的傳統方式 ### 示例內容 1. 使用案例 ![](https://img.kancloud.cn/4c/23/4c2357d77a06fc145d3cfe9cf0e9ba42_1062x3513.png) # 重載方法 ***** 通過閉包來實現JS方法重載，發揮多態的特性 ### 示例內容 1. 使用案例 ``` function bind_method(obj, name, fn) { let old = obj[name]; obj[name] = function (...args) { if (args.length === fn.length) { fn.apply(obj, args); } else { old.apply(obj, args); } } } let arr = [...Array(5).keys()]; bind_method(arr, "show", function () { console.log(0) }); bind_method(arr, "show", function (a) { console.log(1) }); bind_method(arr, "show", function (a, b) { console.log(2) }); arr.show(); //0 arr.show(1); //1 arr.show(1, 2); //2 ``` # 拆箱與封箱 ***** 自動拆箱與封箱 # 執行上下文 ***** ES2018中規定的執行上下文 ### 示例內容 1. 舉例說明 ``` lexical environment: 詞法環境，當獲取變量或者this值時使用 variable environment: 變量環境，當聲明變量時使用 code evaluation state: 用于恢復代碼執行位置 Function: 執行的任務是函數時使用，表示正在被執行的函數 ScriptOrModule: 執行的任務是腳本或者模塊時使用，表示正在被執行的代碼 Realm: 使用的基礎庫和內置對象實例 Generator: 僅生成器上下文有這個屬性，表示當前生成器 ``` # IIFE ***** 立即調用函數表達式 ### 示例內容 1. 舉例說明 ``` (function () { var name = "Barry"; })(); // 無法從外部訪問變量 name name // 拋出錯誤："Uncaught ReferenceError: name is not defined" ``` # 自動插入分號 ***** 自動插入分號 ### 示例內容 1. No Line TerminatorHere ![noLineTerminatorHere](https://img.kancloud.cn/c3/ff/c3ffbc89e049ad1901d4108c8ad88aad_1008x598.jpg)