<progress id="3f9vx"></progress>
    <noframes id="3f9vx"><track id="3f9vx"><b id="3f9vx"><menuitem id="3f9vx"></menuitem></b></track>

    <span id="3f9vx"><mark id="3f9vx"><mark id="3f9vx"></mark></mark></span>

    <track id="3f9vx"></track>
      <font id="3f9vx"><dfn id="3f9vx"></dfn></font>

        <noframes id="3f9vx"><ins id="3f9vx"><cite id="3f9vx"></cite></ins>
        <form id="3f9vx"><font id="3f9vx"></font></form>

          千鋒教育-做有情懷、有良心、有品質的職業教育機構

          手機站
          千鋒教育

          千鋒學習站 | 隨時隨地免費學

          千鋒教育

          掃一掃進入千鋒手機站

          領取全套視頻
          千鋒教育

          關注千鋒學習站小程序
          隨時隨地免費學習課程

          【熱點話題】 零基礎學IT IT學習教程 IT學習筆記 IT技術干貨 IT培訓機構 IT應聘面試 IT職場就業 Java培訓機構哪些好
          當前位置:首頁  >  關于學院  >  技術干貨  > 一次性搞定JavaScript 從 ES6 到 ES12的基礎框架知識

          一次性搞定JavaScript 從 ES6 到 ES12的基礎框架知識

          來源:千鋒教育
          發布人:wjy
          時間: 2022-11-16 14:59:15 1668581955

            Javascript 是前端三劍客技術最重要的技能之一。每個學習前端的人,這個JavaScript技術是必須要學的。隨著技術不斷更新迭代,所以現在有一些新的知識來支持我們去學習 ES6 ~ ES12。

            一、ECMAScript簡介

            ECMA 規范由各方組成,包括瀏覽器供應商,他們會開會推動 JavaScript 提案。

            二、ES6 (ES2015)

            1.Class

            JavaScript 是一種使用原型鏈的語言。

            早期,類似OO的概念是通過原型鏈做出來的,相當復雜。Class 終于在 ES6 中推出。

          JavaScript 從 ES6 到 ES12的基礎框架知識1

            2.模塊

            每個模塊都有自己的命名空間以避免沖突,使用導入和導出來導入和導出。

            基本上將 .js 文件視為模塊。

            3.箭頭函數

            () => {…},是函數的縮寫。最重要的是,他可以確保這始終指向自己

            不再寫 var self = this、var that = this 等等!

          JavaScript 從 ES6 到 ES12的基礎框架知識2

            4.函數參數默認值

            如果函數不傳遞參數,則使用默認值,更簡潔的寫法。

          JavaScript 從 ES6 到 ES12的基礎框架知識3

            5.模板字面量

            過去,長字符串的組合是通過 + 號來連接的。

            它的可讀性很差,使用模板字符串,它更容易閱讀。

          JavaScript 從 ES6 到 ES12的基礎框架知識4

            6.解構賦值

            允許 JavaScript 輕松地從數組和對象中獲取內容。

          JavaScript 從 ES6 到 ES12的基礎框架知識5

            7.擴展運算符

            它是用三點(...)表示,Array是可以擴展的,如果是Object,會按照key-value進行擴展。

          JavaScript 從 ES6 到 ES12的基礎框架知識6

            8.對象屬性簡寫

            如果構成對象的字段名稱與前面段落中的變量相同,則可以省略該值,看起來更流線型。

          JavaScript 從 ES6 到 ES12的基礎框架知識7

            9.Promise

            Promise 是一種異步(非同步)寫法的解決方案,比原來的回調寫法更加優雅。

            早期是開源社區的套件,后來被納入語言標準。

            早期回調 hell……

            使用 Promise 后,回調 hell 扁平化

          JavaScript 從 ES6 到 ES12的基礎框架知識8

            并且ES8(ES2017)發布了更完美的async,await,直接讓異步寫得像同步一樣。

            缺點是當思路落到復雜的業務邏輯上時,有時會錯過await,在運行時發現錯誤。

            10.let, const 替換 var

            let:通用變量,可以被覆蓋

            const:一旦聲明,其內容不可修改。因為數組和對象都是指標,所以它們的內容可以增加或減少, 但不改變其指標.

            早期,JavaScript的var作用域是全局的。

            也就是說,變量是在使用后聲明的,執行的時候會自動提到頂層,后面會賦值。

            更容易受到污染。

          JavaScript 從 ES6 到 ES12的基礎框架知識9

            使用 let 或 const

          JavaScript 從 ES6 到 ES12的基礎框架知識10

            三、ES7 (ES2016)

            1.Array.prototype.includes()

            用于判斷數組是否包含指定值,如果是,則返回true;否則,返回假。

            和之前indexOf的用法一樣,可以認為是返回一個布爾值,語義上更加清晰。

          JavaScript 從 ES6 到 ES12的基礎框架知識11

            2.冪運算符

          JavaScript 從 ES6 到 ES12的基礎框架知識12

            四、ES8 (ES2017)

            1.async, await

            異步函數是使用 async 關鍵字聲明的函數,并且允許在其中使用 await 關鍵字。async 和 await 關鍵字使異步的、基于 Promise 的行為能夠以更簡潔的方式編寫,避免了顯式配置 Promise 鏈的需要。

          JavaScript 從 ES6 到 ES12的基礎框架知識13

            2.Object.values()

            返回對象自身屬性的所有值,不包括繼承的值。

          JavaScript 從 ES6 到 ES12的基礎框架知識14

            3.Object.entries()

            返回可枚舉鍵,即傳入對象本身的值。

          JavaScript 從 ES6 到 ES12的基礎框架知識15

            4.字符串 padStart() & padEnd()

            你可以在字符串的開頭或結尾添加其他內容,并將其填充到指定的長度。

            過去,這些功能通常是通過通用的輔助工具包(如 lodash)引入的,并將它們放在一起。

            本機語法現在直接提供:

          JavaScript 從 ES6 到 ES12的基礎框架知識16

            最常用的情況應該是金額,填寫指定長度,不足加0。

          JavaScript 從 ES6 到 ES12的基礎框架知識17

            5.尾隨逗號

            允許在函數參數列表末尾使用逗號

          JavaScript 從 ES6 到 ES12的基礎框架知識18

            6.Object.getOwnPropertyDescriptors()

            獲取你自己的描述符,一般的開發業務需求通常不會用到。

          JavaScript 從 ES6 到 ES12的基礎框架知識19

            7.共享數組緩沖區

            SharedArrayBuffer 是一個固定長度的原始二進制數據緩沖區,類似于 ArrayBuffer。

            可用于在共享內存上創建數據。與 ArrayBuffer 不同,SharedArrayBuffer 不能分離。

          JavaScript 從 ES6 到 ES12的基礎框架知識20

            8.Atomics object

            Atomics 對象,它提供了一組靜態方法來對 SharedArrayBuffer 執行原子操作。

            原子的所有屬性和函數都是靜態的,就像數學一樣,出不來新的。

            如果一個多線程同時在同一個位置讀寫數據,原子操作保證了正在操作的數據如預期的那樣:即在上一個子操作結束后執行下一個,操作不中斷。

            可以說是針對Node.Js中多線程Server的開發而加強的功能,在前端開發中使用的機會相當低。

            chrome 已經提供了支持

            五、ES9 (ES2018)

            1.循環等待

            在異步函數中,有時需要在同步 for 循環中使用異步(非同步)函數。

          JavaScript 從 ES6 到 ES12的基礎框架知識21

            上面的代碼不會像預期的那樣輸出期望的結果。

            for循環本身還是同步的,會在循環中的異步函數完成之前執行整個for循環,然后將里面的異步函數逐一執行。

            ES9 增加了異步迭代器,允許 await 與 for 循環一起使用,逐步執行異步操作。

          JavaScript 從 ES6 到 ES12的基礎框架知識22

            2.promise.finally()

            無論是成功(.then())還是失敗(.catch()),Promise 后面都會執行的部分。

          JavaScript 從 ES6 到 ES12的基礎框架知識23

            3.Rest, Spread

            在 ES2015 中,Rest 不定長度參數…,可以轉換成數組傳入。

          JavaScript 從 ES6 到 ES12的基礎框架知識24

            而傳播則與其他相反,將數組轉換為單獨的參數。

            例如,Math.max() 返回傳入數字中的最大值。

          JavaScript 從 ES6 到 ES12的基礎框架知識25

            它還提供了對Objects進行解構賦值的功能。

          JavaScript 從 ES6 到 ES12的基礎框架知識26

            4.正則表達式組

            RegExp 可以返回匹配的數據包

          JavaScript 從 ES6 到 ES12的基礎框架知識27

            5.正則表達式前瞻否定

          JavaScript 從 ES6 到 ES12的基礎框架知識28

            6.正則表達式 dotAll

            . 表示匹配除輸入以外的任何符號,添加這些標志后,允許匹配輸入。

          JavaScript 從 ES6 到 ES12的基礎框架知識29

            六、ES10 (ES2019)

            1.更友好的 JSON.stringify

            如果輸入是 Unicode 但超出范圍,則 JSON.stringify 最初會返回格式錯誤的 Unicode 字符串。

            現在是第 3 階段的提案,使其成為有效的 Unicode 并以 UTF-8 呈現

            2.Array.prototype.flat() & Array.prototype.flatMap()

            展平陣列

          JavaScript 從 ES6 到 ES12的基礎框架知識30

            flatMap(),相當于reduce with concat,可以展平一個維度

          JavaScript 從 ES6 到 ES12的基礎框架知識31

            3.String.prototype.trimStart() & String.prototype.trimEnd()

            trimStart() 方法從字符串的開頭刪除空格,trimLeft() 是此方法的別名。

          JavaScript 從 ES6 到 ES12的基礎框架知識32

            trimEnd() 方法從字符串末尾刪除空格,trimRight() 是此方法的別名。

          JavaScript 從 ES6 到 ES12的基礎框架知識33

            4.Object.fromEntries()

            Object.fromEntries() 方法將鍵值對列表轉換為對象。

          JavaScript 從 ES6 到 ES12的基礎框架知識34

            5.String.prototype.matchAll

            matchAll() 方法返回將字符串與正則表達式匹配的所有結果的迭代器,包括捕獲組。

          JavaScript 從 ES6 到 ES12的基礎框架知識35

            6.fixed catch 綁定

            在使用catch之前,不管有用與否,一定要傳入一個eparameter來表示接收到的錯誤。

            如果現在不用,可以省略。

          JavaScript 從 ES6 到 ES12的基礎框架知識36

            7.BigInt(新數字類型)

            BigInt 值,有時也稱為 BigInt,是一個 bigint 原語,通過將 n 附加到整數文字的末尾,或通過調用 BigInt() 函數(沒有 new 運算符)并給它一個整數值或字符串來創建 價值。

            ES5:String, Number, Boolean, Null, Undefined

            ES6 新增:Symbol,到ES6就一共有6 種類型

            ES10 新增:BigInt,就達到 7 種類型

          JavaScript 從 ES6 到 ES12的基礎框架知識37

            七、ES11 (ES2020)

            1.Promise.allSettled()

            Promise.allSettled() 方法返回一個在所有給定的 Promise 都已實現或拒絕后實現的 Promise,并帶有一組對象,每個對象都描述了每個 Promise 的結果。

            它通常用于當你有多個不依賴于彼此成功完成的異步任務,或者你總是想知道每個 Promise 的結果時。

            相比之下,Promise.all() 返回的 Promise 可能更合適,如果任務相互依賴/如果你想立即拒絕其中任何一個拒絕。

          JavaScript 從 ES6 到 ES12的基礎框架知識38

            2.可選鏈接?

            在開發中,很容易遇到先判斷數據是否存在,判斷是否寫入。

          JavaScript 從 ES6 到 ES12的基礎框架知識39

            如果返回的數據為null或者用戶對象下沒有.intounder,則會拋出Uncaught TypeError: Cannot read property...。

            導致程序無法繼續執行

            使用 ?,語法更簡單

          JavaScript 從 ES6 到 ES12的基礎框架知識40

            如果存在,獲取name的值,如果不存在,賦值undefined

            與 || 一起使用,只需一行!

          JavaScript 從 ES6 到 ES12的基礎框架知識41

            3.Nullish 合并運算符 ??

            在JavaScript中,遇到0、null、undefuded時會自動轉為false。

            但有時0其實是一個正常的值,只能容錯undefined和null

          JavaScript 從 ES6 到 ES12的基礎框架知識42

            但是使用??,你可以保持簡潔

          JavaScript 從 ES6 到 ES12的基礎框架知識43

            4.Dynamic-import

            從字面上看,應該很容易理解,就是在需要的時候加載相關的邏輯。

          JavaScript 從 ES6 到 ES12的基礎框架知識44

            5.GlobalThis

            全局 globalThis 屬性包含全局 this 值,類似于全局對象。

            過去的做法是:

          JavaScript 從 ES6 到 ES12的基礎框架知識45

            現在,我們可以這樣做:

          JavaScript 從 ES6 到 ES12的基礎框架知識46

            八、ES12 (ES2021)

            1.Promise.any()

            Promise.any() 接受一個可迭代的 Promise 對象。它返回一個單一的 Promise,只要 iterable 中的任何一個 Promise 完成,就會返回一個 Promise,并帶有已完成的 Promise 的值。

            如果可迭代的實現中沒有任何承諾(如果所有給定的承諾都被拒絕),則返回的承諾會被 AggregateError 拒絕,AggregateError 是 Error 的一個新子類,它將單個錯誤組合在一起。

          JavaScript 從 ES6 到 ES12的基礎框架知識47

            2.邏輯賦值運算符

            在開發過程中,我們可以使用 ES2020 中提出的邏輯運算符 ||、&& 和 ??(Nullish coalescing operator)來解決一些問題。

            而 ES2021 會提出 ||= , &&= , ??= ,概念類似于 += :

          JavaScript 從 ES6 到 ES12的基礎框架知識48

            3.WeakRef

            WeakRef 對象包含對對象的弱引用,該對象稱為其目標或引用對象。對對象的弱引用是不會阻止對象被垃圾收集器回收的引用。

            相反,普通(或強)引用將對象保存在內存中,當一個對象不再有任何強引用時,JavaScript 引擎的垃圾收集器可能會銷毀該對象并回收其內存。

            如果發生這種情況,你將無法再從弱引用中獲取對象。

            此示例啟動一個顯示在 DOM 元素中的計數器,當該元素不再存在時停止:

          JavaScript 從 ES6 到 ES12的基礎框架知識49

            到這里,今天要跟你分享的內容就全部結束了,這些都是我的一些練習和學習筆記總結,希望對你有用。

          聲明:本站稿件版權均屬千鋒教育所有,未經許可不得擅自轉載。

          10年以上業內強師集結,手把手帶你蛻變精英

          請您保持通訊暢通,專屬學習老師24小時內將與您1V1溝通

          免費領取

          今日已有369人領取成功

          劉同學 138****2860 剛剛成功領取
          王同學 131****2015 剛剛成功領取
          張同學 133****4652 剛剛成功領取
          李同學 135****8607 剛剛成功領取
          楊同學 132****5667 剛剛成功領取
          岳同學 134****6652 剛剛成功領取
          梁同學 157****2950 剛剛成功領取
          劉同學 189****1015 剛剛成功領取
          張同學 155****4678 剛剛成功領取
          鄒同學 139****2907 剛剛成功領取
          董同學 138****2867 剛剛成功領取
          周同學 136****3602 剛剛成功領取

          猜你喜歡LIKE

          最新文章NEW

          相關推薦HOT

          更多>>

          快速通道 更多>>

          開班信息
          北京校區
          • 北京校區
          • 大連校區
          • 廣州校區
          • 成都校區
          • 杭州校區
          • 長沙校區
          • 合肥校區
          • 南京校區
          • 上海校區
          • 深圳校區
          • 武漢校區
          • 鄭州校區
          • 西安校區
          • 青島校區
          • 重慶校區
          • 太原校區
          • 沈陽校區

          乱子伦XXXX欧美

          <progress id="3f9vx"></progress>
            <noframes id="3f9vx"><track id="3f9vx"><b id="3f9vx"><menuitem id="3f9vx"></menuitem></b></track>

            <span id="3f9vx"><mark id="3f9vx"><mark id="3f9vx"></mark></mark></span>

            <track id="3f9vx"></track>
              <font id="3f9vx"><dfn id="3f9vx"></dfn></font>

                <noframes id="3f9vx"><ins id="3f9vx"><cite id="3f9vx"></cite></ins>
                <form id="3f9vx"><font id="3f9vx"></font></form>