工做中經常使用es6+特性

時間  2019-12-06
標籤 中經 常使 es6 特性 欄目 JavaScript 简体版
原文   原文鏈接

結合工做中使用狀況，簡單對es6進行一些複習總結，包括經常使用的語法，api等，以及短期內要上手須要重點學習的知識點（不一樣工做環境可能有一些差異），主要參考連接是阮一峯的博客以及外文博客（阮老師大部分文章是直接翻譯的這個博客） http://2ality.com/p/about.htmlhtml

1.簡介

先說一下ECMAScript，ECMA是一個標準化組織，他們制定了JavaScript的語言標準，因此以後一直稱爲ECMAScript，普遍的講，Javascript是其一種標準實現，包括ECMAScript，dom，bom等es6

ECMA組織每一年都會有新標準發佈，標準名爲ES+年份，因此咱們會聽到ES2015，ES2016，ES2017等，ES6其實就是ES2015，表示在15年發佈的最新版本，相應的ES2016，ES2017分別稱爲ES7和ES8，依次日後對應。編程

如今大部分博客，文章，分享中提到的ES6其實也能夠理解爲ES6+，只不過由於2015年以前，ECMAScript有不少年沒有發版（也有歷史緣由：ES4的夭折），積累了大量的新語法，api，因此在2015年一次性加在了ES6版本中發佈，以後每一年都只有不多的一些新增，好比：api

語法提案

關於語法提案的流程，簡單瞭解一下：一個新的語法從提案到成爲標準須要通過五個階段，每一個階段都須要標準委員會TC39定時開會進行批准數組

流程見連接：http://exploringjs.com/es2016... 瀏覽器

須要注意的一點，全部的標準都是基於實現的，幾大廠商瀏覽器對提案的實現必須先於標準纔會進入定稿階段，包括Babel數據結構

咱們經常使用的async和await，就是由於16年開會的時候沒有達到可定案的標準，而沒有進入ES2016標準，最後添加在2017標準中app

可參考該連接，有每一年發佈標準中新增的特性：http://2ality.com/2017/02/ecm...dom

2.簡單知識點介紹

下面主要就是結合平時工做，簡單介紹最經常使用的語法，類方法以及實例方法等，下面主要是一些列舉，大部分知識點想深刻學習的話，仍是獲得阮老師博客或者外文博客上學習ecmascript

不過我標註了實際工程中的使用頻率，能夠參考，針對性的學習，快速上手

提示：實際開發中結合eslint能夠幫助本身寫出更規範的代碼

使用頻率極高（爲方便一塊兒介紹，會將一些不經常使用的語法也列出來，標題括號中也爲大量使用）：

2.1 let與const

這是最基礎的兩個命令，都是聲明變量，要強制全部的聲明都使用他們兩個

與var的區別：

  1. 做用域

    • var做用域在全局
    • let與const做用域爲代碼塊
  2. 變量提高 （https://www.jianshu.com/p/68a...）
  3. 暫時性死區，表示在一個塊級做用域內，只要使用let聲明一個變量，聲明前將不能使用該變量
  4. 不容許重複聲明
  5. 與頂層對象window或者global的關係，var聲明的全局變量與頂層變量掛鉤，而let const聲明的全局變量不掛鉤

const與let區別：

  1. const定義一個只讀的常量，一旦聲明不可改變，但須要注意的是，不可改變的是變量指向的那個內存地址，若是使用const聲明一個對象，對象內部是能夠改變的，若是要強制一個對象不可改變，那麼可使用Object.freeze來凍結（該方法只凍結該對象，不會凍結其屬性，因此可考慮遞歸）

2.2 默認值設置

咱們能夠直接在經過 param = 1 的形式設置默認值
包括爲函數參數設置，爲解構設置（見下面介紹）
避免了之前的這種寫法：

function test(data) {
    data = data || {};
    ...
}

// 能夠直接寫爲
function test(data = {}) {
    ...
}
須要注意的是：默認值生效的條件是，嚴格等於 undefined，若是值爲null，不會使用默認值

2.3 解構賦值與rest操做符

解構

解構賦值其實就是爲了更方便的從數組或者對象中經過屬性名取數據，熟練使用以後，配合默認值，rest操做符能夠很大程度提升效率，簡化代碼

下面是一些簡單的使用對比

var a = 1, b = 2, c = 3;
// 或者
var param = { a: 1, b: 2, c: 3 };
var a = param.a || 1; // 默認值
var b = param.b;
var c = param.c;
// 或者
function add(param) {
    param = param || {};
    var v1 = param.v1 || 0;
    var v2 = param.v2 || 0;
    return v1 + v2;
}

能夠看出來，若是參數比較多的話，代碼很臃腫
若是用解構賦值，咱們能夠寫成這樣，很簡潔

let [a, b, c] = [1, 2, 3]
// 或者
let {a = 1, b, c} = {a: 1, b: 2, c: 3}
// 或者
function add({v1 = 0, v2 = 0} = {}){
    return v1 + v2;
}
// 類比上面代碼，其中 {v1 = 0, v2 = 0} 這個對象接收param參數，若是param未傳入，設置默認值爲{}，進而，v1，v2從param或者默認值{}中取值，取不到的話也設置默認值
解構的核心是，=號左邊經過屬性名直接獲取=號右邊對象相應的屬性

而且全部類型的數據均可以被解構，即出如今=號右邊，只不過字符串，數字，布爾值出如今等號右邊時會先轉化爲對象
使用解構能夠大大改善代碼的可讀性，減小的冗餘的代碼，更靈活簡潔的獲取屬性，設置默認值，尤爲是配合rest操做符時。

rest操做符，即…

使用在函數參數中（取代arguments）或者解構賦值時，方便咱們批量的獲取設置數據，大量用在數組和對象中，見下面 數組部分

該語法在ES2018中成爲規範，可是工做中早已大量使用，參考博客 http://2ality.com/2016/10/res...

注意：...只能出現一次而且必須出如今結尾

下面是錯誤的用法：

const {...rest, foo} = obj; // SyntaxError
const {foo, ...rest1, ...rest2} = obj; // SyntaxError

2.4 函數相關的擴展（箭頭函數，rest參數，默認值）

ES6對函數進行了不少擴展，其中最經常使用的是箭頭函數以及rest參數和默認值，rest參數與默認值都與解構關係密切

2.4.1 默認值

  • 通常在函數中設置默認值的參數應該是尾參數
  • 若是指定了默認值，函數的length值爲默認值參數前面未使用默認值的參數個數

注意：函數參數值會造成一個新的做用域，區別於函數內做用域

2.4.2 箭頭函數

這個使用頻率極高，大大簡潔了代碼，尤爲做爲回調傳入的時候
與es5函數區別：

  • 自動綁定函數定義時做用域this，替換bind寫法（在須要手動綁定this時，使用箭頭函數）
  • 不能做爲構造函數
  • 沒有arguments，使用rest代替

下面可選擇性瞭解：

2.4.3 函數 name屬性，會返回函數名

  • 可能用到的，使用bind綁定以後，name屬性前會加bound前綴

2.3.4 函數式編程中尾調用和尾遞歸，大大優化內存，待深刻

2.5 字符串擴展（模板）

經常使用的主要是如下幾點
最經常使用的是支持模板寫法，使用反引號``和${} 取代字符串拼接

// 好比：
const a = ‘222’, b = ‘333’;
const c = a + ‘444’ + b;

const c = `${a}444${b}`

剩下的選擇性瞭解：

  • 增強對unicode支持，使用頻率很小
  • 支持for of 遍歷，使用頻率小，可以使用split或者rest代替
  • 增長搜索方法，includes，startsWith，endsWith，以前只有一個indexOf
  • repeat，padStart，padEnd 循環或者補全字符串，偶爾使用

2.6 數組擴展（rest操做符，實例方法）

主要是增長如下經常使用點

  • …操做符，類rest

    • 替代apply寫法，以下，還有不少好比max，min求值，push一個數組等等
    • 替代concat
    • clone
    • 結合解構賦值等
    • string -> array，替換split寫法，而且可識別4字節的unicode
    • 將iterator接口的對象轉化爲數組，好比dom獲取到的列表，任何部署了Iterator接口的類數組對象均可以，map，set對象等

  • 實例方法，好比coryWithin，find，findIndex，fill，entries，keys，values，includes等

    • find，findIndex，includes相比indexOf，能夠識別NaN，而且更語義化
let a = [1, 2, 3], b = [2, 3, 4];
let merge = […a, …b] // [1, 2, 3, 2, 3, 4]

// 替換apply
function func (a, b, c) {…}
//  若是須要傳入一個數組，es5就要這樣寫
func.apply(null, [1, 2, 3])
// es6
func(…[1, 2, 3])

// 反轉字符串的實現
[…str].reverse().join(‘')

// 類數組對象
{
    ‘0’: ’12’,
    ‘1’: ‘123’,
  length: ‘2'
}

下面的選擇性學習：

  • Array.form 將類數組對象或者實現了iterator接口對象轉化爲數組，常見的有dom集合，arguments，map，set等，使用頻率通常

    • 區別於…操做符的是，不只能轉化iterator，還能轉化類數組對象，如上代碼
    • 可傳入第二個參數，相似於map方法
  • Array.of 將一組值轉化爲數組，替代 Array() 或者 new Array()，使用頻率通常

2.7 對象擴展（遍歷與簡化寫法）

簡化對象寫法，新增一些Object類方法，使用頻率極高

主要更新

  • 簡化對象寫法，工做中應該全面改寫

    • 好比{x, y} 等同於{x: x, y: y}
    • 函數相似 {func() {}} 等同於 {func: function() {}}
  • 新增keys，values，entris方法，獲取對象的屬性名數組，值數組或者鍵值對，使用較多，可配合for of使用（必須是可遍歷對象）
  • Object.is 相似於 ===，可是可識別 isNaN === isNaN // true 與+0 === -0 // false，與咱們主觀意識一致
  • Object.assign 合併對象的可枚舉屬性，後者會覆蓋前者，屬於淺拷貝

  • 屬性的遍歷：

    • for in 遍歷自身以及繼承的可枚舉屬性
    • Object.keys 自身的可枚舉屬性鍵名
    • getOwnPropertyNames 自身全部屬性，包括不可枚舉
    • getOwnPropertySymbols 獲取自身全部symbol屬性鍵名，前三者都不包括symbol
    • Reflect.ownKeys 全部的自身屬性

下面的選擇性學習：

  • 屬性名能夠用表達式
  • 提供一些對原型鏈的操做，使用極少，有興趣可研究
  • 新增super字段，區別於this，this指向該對象，super指向原型對象

3.高級知識點

對上面使用頻率高的知識點進行了解學習之後即可以進行基本開發了，熟練使用後天然會體會到es6的美
可是實際工做中，不可能都是這些基礎語法，api，須要用到更多的高級知識點

目前咱們在大量使用的有：
這兒作簡單介紹，工做之餘能夠本身去深刻，其中Class好理解，Module和Decorate相對也好上手
主要是Promise與Async，簡單瞭解以後也能夠快速寫代碼，可是當應用複雜時，仍是須要你深刻了解其工做原理

推薦首學Promise，Decorator可在用到時再學

3.1 Promise

這是重中之重，ES6提出的異步的一種解決方案，要深刻學習

3.2 async與await

也是異步的解決方案，代替Generator，更友好，語義化的使用

3.3 Class

ES6提供的語法糖，內部使用prototype實現，以面向對象的方式實現JS

3.4 Decorate

裝飾器，能夠對類或者類方法進行裝飾，增長一些額外的行爲

3.5 Module

模塊化的實現，幫助咱們拆分組合代碼，模塊化開發
此處還有兩個概念，CommonJS和AMD模塊

4.使用頻率低的一些特性：

除了前面介紹的，剩下就是一些工做中用到比較少的特性，包括一些你經常使用可是並不知道的底層技術，好比Iterator，當你使用 … 或者for of時都會用到該知識點，建議學習

4.1 Set與Map

新增的數據結構，與Java中相似，目前來看，習慣未養成，使用比較少，可是建議學習

4.2 正則的擴展

工做中會經常使用的正則語法即可以了，推薦一個連接，幫助你更好的學習使用正則：https://regexper.com/#%2Fabc%...
有時候能夠用先行斷言和後行斷言實現一些複雜的判斷

  • 字符串可以使用正則的方法：match，replace，search，split，在es6環境下內部都是使用正則的方法來進行匹配，能夠將replace第二個參數傳入函數來觀察函數參數，好比
    image
  • 新增u修飾符，可識別大於uffff的unicode字符
  • 新增y修飾符，相似於g，可是下次匹配必須從剩餘字符串的頭部開始，對應屬性爲sticky
  • 新增flags屬性，返回修飾符
  • 新增dotAll模式，見連接http://2ality.com/2017/07/reg...，.能夠匹配任意單個字符，以前不匹配終止符，n r 等
  • 支持後行斷言，介紹見筆記本->正則
  • 新增具名組匹配，同上
  • matchAll一次性返回全部的匹配，返回結果是一個遍歷器

4.3 symbol

es6新增的原始數據類型，表示獨一無二的值，通常使用爲直接Symbol(str)，Symbol.for(str)，Symbol.keyFor(str)

如今有string boolean，number，undefined，null，symbol六種，JS語言內部大量使用，工做中偶爾會用，好比定義私有屬性的時候

const FETCH = Symbol('fetch');
import fetch from './lib/fetch';

module.exports = {
  get fetch() {
    if (!this[FETCH]) {
      this[FETCH] = fetch;
    }
    return this[FETCH;
  },
}

4.4 Proxy與Reflect，都是JS語言層次上的概念

Proxy即在目標對象外設置一層代理，外界真正訪問到該對象時必須先訪問代理
Reflect相似Proxy，是ES6爲了操做對象而新增的Api，將一些Object上的對象放在了Reflect對象上，並修改了一些行爲

4.5 數值方面的擴展

這部分主要是新增方法，使用頻率整體不高

  • 新增 0b 0o表示二進制和八進制，es5八進制表示爲0開頭（嚴格模式下不可用）

  • Number新增類方法，

    • isFinite與isNaN，與掛載在全局的兩個方法區別是參數只能是數值，方法內部不會調用Number()轉化
    • parseInt與parseFloat，與全局保持一致
    • isInteger，參數只能爲數值而且 25與25.0同樣，而且不在js精度範圍內時會誤判
    • 常量EPSILON，js可以識別的最小偏差
  • Math對象新增大量方法，不多用
  • ** 指數運算，與Math.pow相似，對於特大運算，可能有偏差
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程