es6學習筆記初步總結

来源:https://www.cnblogs.com/skylineStar/archive/2018/05/16/9045415.html
-Advertisement-
Play Games

es6學習筆記初步總結 1. let、const 和 block 作用域 在ES6以前，var關鍵字聲明變數。無論聲明在何處，都會被視為聲明在函數的最頂部(不在函數內即在全局作用域的最頂部)。這就是函數變數提升例如: let 關鍵詞聲明的變數不具備變數提升（hoisting）特性 let 和 con ...


es6學習筆記初步總結 

1. let、const 和 block 作用域

在ES6以前，var關鍵字聲明變數。無論聲明在何處，都會被視為聲明在函數的最頂部(不在函數內即在全局作用域的最頂部)。這就是函數變數提升例如:

 

  • let 關鍵詞聲明的變數不具備變數提升（hoisting）特性
  • let 和 const 聲明只在最靠近的一個塊中（花括弧內）有效
  • 當使用常量 const 聲明時，請使用大寫變數，如：CAPITAL_CASING
  • const 在聲明時必須被賦值 否則報語法錯誤SyntaxError
var a = 2;

{

 let a = 3;// 只在這個{}中有效

 console.log(a); // 3

}

console.log(a); // 2

{

 const ARR = [5,6];// const變數名大寫

ARR.push(7);

console.log(ARR); // [5,6,7]

ARR = 10; // TypeError

// const CFF;//const 在聲明時必須被賦值// console.log(CFF);

// 報錯：Uncaught SyntaxError: Missing initializer in const declaration

}

 

1）塊級作用域示例

var funcs = []

    for (var i = 0; i < 10; i++) {

        funcs.push(function() { console.log(i) })

    }

    funcs.forEach(function(func) {

        func()

})

 

一看就知道輸出 10 十次

但是如果我們想依次輸出0到9呢？兩種解決方法。如圖。

 

 

 

2. 箭頭函數（Arrow Functions）

ES6 中，箭頭函數就是函數的一種簡寫形式，使用括弧包裹參數，跟隨一個 =>，緊接著是函數體：

 

箭頭函數最直觀的三個特點。

  •   不需要function關鍵字來創建函數
  •   省略return關鍵字
  •   繼承當前上下文的 this 關鍵字

 

 

說個小細節。

當你的函數有且僅有一個參數的時候，是可以省略掉括弧的。當你函數返回有且僅有一個表達式的時候可以省略{}；例如:

 

 

 

 

當然，箭頭函數不僅僅是讓代碼變得簡潔，函數中 this 總是綁定總是指向對象自身。具體可以看看下麵幾個例子：

 

 

而使用箭頭函數可以省卻這個麻煩：

 

 

3. 函數參數預設值

ES6 中允許你對函數參數設置預設值：

ES5示例

ES6為參數提供了預設值。在定義函數時便初始化了這個參數，以便在參數沒有被傳遞進去時使用。

 

 

4. Spread / Rest 操作符

Spread / Rest 操作符指的是 ...，具體是 Spread 還是 Rest 需要看上下文語境。

當被用於迭代器中時，它是一個 Spread 操作符：

function foo(x,y,z) {

  console.log(x,y,z);}

 let arr = [1,2,3];

foo(...arr); // 1 2 3

 

當被用於函數傳參時，是一個 Rest 操作符：

function foo(...args) {

  console.log(args);}

foo( 1, 2, 3, 4, 5); // [1, 2, 3, 4, 5]

 

接下來就展示一下它的用途。

  •  組裝對象或者數組

 

 

  •  獲取數組或者對象除了前幾項或者除了某幾項的其他項

 

 

對於 Object 而言，還可以用於組合成新的 Object 。(ES2017 stage-2 proposal) 當然如果有重覆的屬性名，右邊覆蓋左邊

 

 

5. 對象詞法擴展

ES6 允許聲明在對象字面量時使用簡寫語法，來初始化屬性變數和函數的定義方法，並且允許在對象屬性中進行計算操作：

 

 

ES6 對象提供了Object.assign()這個方法來實現淺複製。Object.assign()可以把任意多個源對象自身可枚舉的屬性拷貝給目標對象，然後返回目標對象。第一參數即為目標對象。在實際項目中，我們為了不改變源對象。一般會把目標對象傳為{}

 

 

示例：

let objA = {make: 'Barret',model:'Lee',value: 40000,}    

let objB = {makeKia: true,depreciate: 'hello',model:'Zhang'}

const obj = Object.assign({}, objA, objB)

console.log(obj)

 

 

6. 二進位和八進位字面量

ES6 支持二進位和八進位的字面量，通過在數字前面添加 0o 或者0O 即可將其轉換為八進位值， 二進位使用 `0b` 或者 `0B`：

 

 

 

7. 對象和數組解構

 

 

解構可以避免在對象賦值時產生中間變數：

 

 

8. 對象超類

ES6 允許在對象中使用 super 方法：

 

 

9. 模板語法和分隔符

ES6 中有一種十分簡潔的方法組裝一堆字元串和變數。

  •  第一個用途，基本的字元串格式化。將表達式嵌入字元串中進行拼接。用${}來界定。

 

 

  •  第二個用途，在ES5時通過反斜杠(\n)來做多行字元串或者字元串一行行拼接。ES6反引號(``)直接搞定。

 

 

 

 

 

10. for...of VS for...in

for...of 用於遍歷一個迭代器，如數組：

 

 

for...in 用來遍歷對象中的屬性：

 

 

11. Map 和 WeakMap

ES6 中兩種新的數據結構集：Map 和 WeakMap。事實上每個對象都可以看作是一個 Map。

一個對象由多個 key-val 對構成，在 Map 中，任何類型都可以作為對象的 key，如：

 

 

WeakMap

WeakMap 就是一個 Map，只不過它的所有 key 都是弱引用，意思就是 WeakMap 中的東西垃圾回收時不考慮，使用它不用擔心記憶體泄漏問題。

另一個需要註意的點是，WeakMap 的所有 key 必須是對象。它只有四個方法 delete(key),has(key),get(key) 和set(key, val)：

 

 

12. Set 和 WeakSet

Set 對象是一組不重覆的值，重覆的值將被忽略，值類型可以是原始類型和引用類型：

 

add方法添加值，has方法查看值是否存在，size查看Set對象長度

可以通過 forEach 和 for...of 來遍歷 Set 對象：

Set 同樣有 delete() 和 clear() 方法。

 

 

 

WeakSet

類似於 WeakMap，WeakSet 對象可以讓你在一個集合中保存對象的弱引用，在 WeakSet 中的對象只允許出現一次：（保存的元素只能為對象）

 

 

13. 類

ES6 中有 class 語法。值得註意是，這裡的 class 不是新的對象繼承模型，它只是原型鏈的語法糖表現形式。

函數中使用 static 關鍵詞定義構造函數的的方法和屬性：

 

 

類中的繼承和超集：

 

 

 

extends 允許一個子類繼承父類，需要註意的是，子類的constructor 函數中需要執行 super() 函數。（必須執行super()否則報錯：Must call super constructor in derived class before accessing 'this' or returning from derived constructor）

super作為函數調用時，代表父類的構造函數，不過this指向的子類實例對象。所以如果你在子類Porsche的constructor中執行super()，就相當於執行A.prototype.constructor.call(this)。

當然，你也可以在子類方法中調用父類的方法，如super.showId()。

在 這裡 閱讀更多關於類的介紹。

有幾點值得註意的是：

  •  類的聲明不會提升（hoisting)，如果你要使用某個 Class，那你必須在使用之前定義它，否則會拋出一個 ReferenceError 的錯誤（必須先聲明在使用，否則報錯）
  •  在類中定義函數不需要使用 function 關鍵詞

https://segmentfault.com/q/1010000012836835/

14. Symbol

Symbol 是一種新的數據類型，它的值是唯一的，不可變的。ES6 中提出 symbol 的目的是為了生成一個唯一的標識符，不過你訪問不到這個標識符：

 

 

註意，這裡 Symbol 前面不能使用 new 操作符。

如果它被用作一個對象的屬性，那麼這個屬性會是不可枚舉的：（不能迴圈）

 

 

因為所有的對象在初始化的時候不會包含任何的 Symbol，除非你在對象上賦值了 Symbol 否則Object.getOwnPropertySymbols()只會返回一個空的數組。

如果要獲取對象 symbol 屬性，需要使用Object.getOwnPropertySymbols(o)。

 

 

https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/getOwnPropertySymbols

15. 迭代器（Iterators）

迭代器允許每次訪問數據集合的一個元素，當指針指向數據集合最後一個元素是，迭代器便會退出。它提供了 next() 函數來遍歷一個序列，這個方法返回一個包含 done 和 value 屬性的對象。

ES6 中可以通過 Symbol.iterator 給對象設置預設的遍歷器，無論什麼時候對象需要被遍歷，執行它的 @@iterator 方法便可以返回一個用於獲取值的迭代器。

數組預設就是一個迭代器：

var arr = [11,12,13];var itr = arr[Symbol.iterator]();

 

itr.next(); // { value: 11, done: false }

itr.next(); // { value: 12, done: false }

itr.next(); // { value: 13, done: false }

 

itr.next(); // { value: undefined, done: true }

 

你可以通過 [Symbol.iterator]() 自定義一個對象的迭代器。

 

 

 

自定義迭代器的方法見以下鏈接：

http://blog.csdn.net/kittyjie/article/details/50466471

16. Generators（生成器）

Generator 函數是 ES6 的新特性，它允許一個函數返回的可遍歷對象生成多個值。

在使用中你會看到 * 語法和一個新的關鍵詞 yield :

 

 

每次執行 yield 時，返回的值變為迭代器的下一個值。

17. Promises

ES6 對 Promise 有了原生的支持，一個 Promise 是一個等待被非同步執行的對象，當它執行完成後，其狀態會變成 resolved 或者rejected。

示例地址：https://github.com/sinosoft4git/Knowledgelib/blob/master/AboutVue/demo/src/components/test/msgBox.vue

var p = new Promise(function(resolve, reject) {  

  if (/* condition */) {

    // fulfilled successfully

    resolve(/* value */);  

  } else {

    // error, rejected

    reject(/* reason */);  

  }});

 

每一個 Promise 都有一個 .then 方法，這個方法接受兩個參數，第一個是處理 resolved 狀態的回調，一個是處理 rejected 狀態的回調：

p.then((val) => console.log("Promise Resolved", val),(err) => console.log("Promise Rejected", err));

 

17. import 和 export

import導入模塊、export導出模塊（導入的時候有沒有大括弧的區別是什麼。下麵是工作應用中的總結：）

 

 

  •  當用export default people導出時，就用 import people 導入（不帶大括弧）
  •  一個文件里，有且只能有一個export default。但可以有多個export。
  •  當用export name 時，就用import { name }導入（記得帶上大括弧）
  •  當一個文件里，既有一個export default people, 又有多個export name 或者 export age時，導入就用 import people, { name, age }
  •  當一個文件里出現n多個 export 導出很多模塊，導入時除了一個一個導入，也可以用import * as example

 

參考資料

https://www.jianshu.com/p/287e0bb867ae

http://www.runoob.com/w3cnote/es6-concise-tutorial.html

https://www.cnblogs.com/kongxy/p/4618173.html


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • redux 中間件 --- applyMiddleware 源碼解析 + 中間件的實戰
    前傳 中間件的由來 redux的操作的過程，用戶操作的時候，我們通過dispatch分發一個action，純函數reducer檢測到該操作，並根據action的type屬性，進行相應的運算，返回state，然後更新view。 但是一個很重要的問題，reducer對於action會立即進行運算，並返回 ...
  • 一個基於原生JavaScript開發的、輕量的驗證碼生成插件
    一個基於原生JavaScript開發的、輕量的驗證碼生成插件 ...
  • 為什麼我們要做三份 Webpack 配置文件
    時至今日，Webpack 已經成為前端工程必備的基礎工具之一，不僅被廣泛用於前端工程發佈前的打包，還在開發中擔當本地前端資源伺服器（assets server）、模塊熱更新（hot module replacement）、API Proxy 等角色，結合 ESLint 等代碼檢查工具，還可以實現在對 ...
  • 原生aspx頁面如何引用公共js和css
    項目過程中遇到一個問題，每個頁面需要引用很多的js和css文件，其中很多都是控制項，而且大部分都是一樣的，造成很多重覆引用。 針對這種情況，參考了mvc的BundleConfig，思路是建立一個公用的用戶控制項，直接在每個頁面調用這個用戶控制項，通過不同的參數獲取不同的引用文件，這種方式的好處就是大大減少 ...
  • iview中tree的事件運用
    iview中的事件和方法如下： 案例說明： html代碼 <Tree :data="data4" @on-check-change="choiceAll" ref="tree4" show-checkbox multiple></Tree> data(){ data4: [ { title: 'pa ...
  • JS隱藏點好號碼中間4位
    上面可以正常使用，正則更加方便，但是如果中間連續重覆數字有點小問題（如下麵的正則方式）。 ...
  • 淺談原生JavaScript的動畫和特效
    一、JavaScript中的動畫原理 動畫效果的實現總的來說可分為兩種,一種是利用純css實現,該方法在css3成熟後廣泛應用；另外一種是通過JavaScript（或者一些封裝的庫如jQuery的animate方法）間接的操作css樣式,每隔幾秒執行一次。這裡主要講的是原生js裡面的動畫: 1、常用 ...
  • js基礎進階--編的實用技巧(一)
    我的個人博客： "http://www.xiaolongwu.cn" 在平時的開發中，編碼技巧很重要，會讓你少寫很多代碼，起到事倍功半的效果。 下麵總結幾種簡單的技巧，大家共同學習一下 1、 利用+、 、/1, 1將字元串轉換為整數型 這個方法試用於將字元串類型的數字轉換為整數型，如果帶字母就會返回 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類