前端入門21-JavaScript的ES6新特性

聲明

本篇內容所有摘自阮一峯的：ECMAScript 6 入門

阮一峯的這本書，我我的以爲寫得挺好的，無論是描述方面，仍是例子，都講得挺通俗易懂，每一個新特性基本都還會跟 ES5 舊標準作比較，說明爲何會有這個新特性，這更於理解。

因此，後續不會再寫個關於 ES6 系列的文章了，就在這篇裏大概的列舉一下，大致清楚都有哪些新特性就行了，之後須要用時再去翻一翻阮一峯的書。

正文-ES6新特性

ES6 新標準規範相比於 ES5 舊標準規範中，無非就三個方面的改動：新增、更新、廢棄。

因爲更新和廢棄須要考慮到兼容性問題，因此這兩方面的內容應該並很少，那麼大部分基本都是新增的特性。對於新增的特性來講，大致上也還能夠再分兩類：徹底新增的特性和基於舊標準擴展的特性。

下面就大概來過一下，ES6 中新增的特性。

Symbol

這是新增的一種原始數據類型，ES5 中原始類型有 5 種，在 ES6 中新引入了一種後，如今就是有 6 種原始數據類型了：Number、String、Boolean、null、undefined、Symbol

這個單詞中文直譯是：符號、標誌等，但好像並無在書中有這種叫法，書中都是直接使用 Symbol 來描述，可能中文翻譯不可以很好的表示出這種原始數據類型的含義吧。

背景

之因此新增了這種原始數據類型，是爲了解決：

ES5 的對象屬性名都是字符串，這容易形成屬性名的衝突。好比，你使用了一個他人提供的對象，但又想爲這個對象添加新的方法（mixin 模式），新方法的名字就有可能與現有方法產生衝突。若是有一種機制，保證每一個屬性的名字都是獨一無二的就行了，這樣就從根本上防止屬性名的衝突。這就是 ES6 引入Symbol的緣由。

基礎用法

var s1 = Symbol('s1'); //參數只是用來描述當前 s1 變量，跟其餘 Symbol 數據類型的變量相區分，在調用 toString 或 typeOf 時會輸出當前數據類型跟描述信息

//第一種
var o = {};
o[s1] = "dasu";

//第二種
var o = {
    [s1]: "dasu"
};

//第三種
var o = {}
Object.defineProperty(o, s1, {value: "dasu"});

給一個對象定義一個屬性名用 Symbol 數據類型來表述的方法有上述三種，若是使用 o.s1 = "dasu" 這種方式，是給 o 對象定義了一個屬性名爲 s1 且數據類型爲字符串的屬性，字符串就存在相等與否的場景。而使用上述三種方式，是給對象定義了一個屬性名爲 s1 但數據類型爲 Symbol 的屬性，若是後期又定義了另外一個屬性名爲 s1 的 Symbol 原始值的屬性，並不會覆蓋以前定義的屬性。

其餘內容，包括關於 Symbol 屬性的遍歷、Symbol 自帶的方法、Symbol 應用場景等見：Symbol

塊做用域 let 和 const

背景

ES5 中變量的做用域只分全局做用域和函數內做用域，且全局變量本質上是全局對象的屬性，書中是這麼評價的：

頂層對象的屬性與全局變量掛鉤，被認爲是 JavaScript 語言最大的設計敗筆之一。這樣的設計帶來了幾個很大的問題，首先是無法在編譯時就報出變量未聲明的錯誤，只有運行時才能知道（由於全局變量多是頂層對象的屬性創造的，而屬性的創造是動態的）；其次，程序員很容易不知不覺地就建立了全局變量（好比打字出錯）；最後，頂層對象的屬性是處處能夠讀寫的，這很是不利於模塊化編程。另外一方面，window對象有實體含義，指的是瀏覽器的窗口對象，頂層對象是一個有實體含義的對象，也是不合適的。

爲了解決這些問題，ES6 中新增了塊級做用域的變量，經過關鍵字：let 和 const 聲明的變量，做用域是塊級做用域，同時，這些變量不屬於頂層對象的屬性。

const 定義的變量是常量，除此外，這個變量跟用 let 定義的變量沒有其餘方面的區別了。而經過 let 和 const 定義的變量行爲、做用域相似於 Java 語言中定義的變量行爲。

換句話說，let 和 const 定義的變量已經不包含 var 定義的變量的各類特性行爲了，好比：沒有變量的聲明提早特性、存在暫時性死區（在定義以前不能使用，只能在定義變量位置以後使用）、不容許重複聲明、做用域只有塊級做用域等。

更多的參考：let 和 const 命令

Module 模塊機制

背景

ES5 中並無模塊機制，常見的方式是：前端裏經過 <script> 加載各類不一樣的 js 文件代碼，在 js 文件代碼內部中提供一些全局變量或全局函數供其餘 <script> 使用。

說白了，就是不一樣 js 文件經過全局對象做爲通訊的橋樑來相互訪問。而爲了解決不一樣 js 文件共享全局對象形成的變量衝突問題，一般做爲模塊的 js 裏的代碼都會放在一個當即執行的函數內。

而 ES6 中，引入了模塊的機制。

基本使用

當在 HTML 文檔中，經過指定 <script> 標籤的 type 屬性爲 module 時，如：

<script type="module" src="./foo.js"></script>

瀏覽器會按照模塊的處理方式來加載這份 js 文件，與模塊腳本的處理方式與正常 js 腳本文件處理方式最不一樣的地方在於，模塊內的代碼都是在模塊做用域中執行，也就是在模塊 js 文件中的全局變量這些並不會被添加到全局對象的屬性中，其餘 js 文件沒法訪問。

那麼，其餘 js 文件如何使用這份模塊 js 文件呢？

有三點要求：

1. 模塊 js 文件內，須要經過 export 聲明該模塊對外開放的接口
2. 當前 js 文件內，須要經過 import 來引入模塊對外開放的接口，想使用哪些接口，就須要引入哪些
3. 當前 js 也必須是模塊腳本文件，即 type=module 才行

import 命令和 export 命令是模塊機制的關鍵，但只兩個命令只能在 type=module 的 js 文件內生效，若是某個 js 文件聲明瞭 type=text/javascript，而後代碼裏又使用到 import 或 export，那麼運行期間會報錯。

• 對外提供功能的模塊

//module.js
//...
//以上省略模塊內部功能代碼

//通常對外的接口可放在文件底部，方便盡收眼底
//第一種：
export var name = "dasu";
export function getName() {return "dasuAndroidTv"};

//第二種：
var name = "dasu"
var getName = function() {return "dasuAndroidTv"};
export {name, getName}

• 使用其餘模塊功能的當前腳本

//第一種：from後跟js的相對路徑或絕對路徑
import {name, getName} from 'module.js'

//第二種：
import * as Module from 'module.js'
//使用
Module.name;
Module.getName();
//...

最後，記住，模塊腳本文件中，自動以嚴格模式運行，限制也不少，更多用法、細節說明參考：

module 的語法

module 的加載實現

變量解構

ES6 容許按照必定模式，從數組和對象中提取值，對變量進行賦值，這被稱爲解構（Destructuring）。

之前，爲變量賦值，只能直接指定值。

var a = 1;
var b = 2;
var c = 3;

ES6 容許寫成下面這樣。

var [a, b, c] = [1, 2, 3];

上面代碼表示，能夠從數組中提取值，按照對應位置，對變量賦值。

本質上，這種寫法屬於「模式匹配」，只要等號兩邊的模式相同，左邊的變量就會被賦予對應的值。

這種特性能夠帶來不少便捷：

• 函數能夠返回多個值

// 返回一個數組
function example() {
  return [1, 2, 3];
}
let [a, b, c] = example();

// 返回一個對象
function example() {
  return {
    foo: 1,
    bar: 2
  };
}
let { foo, bar } = example();

• 對象取值時很方便

//解析服務端返回的數據對象，提取其中的各字段值
var o = {
    code: 1,
    msg: "success",
    content: {...}
};

var {code, msg, content} = o;

解構時，還能夠設置默認值，更多用法，參考：變量的解構賦值

字符串的擴展

ES6 中對字符串的處理擴展了不少新特性，讓字符串的處理更增強大，下面看一個很強大的特性：

模板字符串

傳統的 JavaScript 語言，輸出模板一般是這樣寫的（下面使用了 jQuery 的方法）。

$('#result').append(
  'There are <b>' + basket.count + '</b> ' +
  'items in your basket, ' +
  '<em>' + basket.onSale +
  '</em> are on sale!'
);

上面這種寫法至關繁瑣不方便，ES6 引入了模板字符串解決這個問題。

$('#result').append(`
  There are <b>${basket.count}</b> items
   in your basket, <em>${basket.onSale}</em>
  are on sale!
`);

模板字符串（template string）是加強版的字符串，用反引號（`）標識。它能夠看成普通字符串使用，也能夠用來定義多行字符串，或者在字符串中嵌入變量。

更多字符串擴展的特性介紹參見：字符串的擴展

函數的擴展

ES6 中，對於函數的處理也增長了不少新特性，讓函數變得更強大。

參數默認值

ES6 以前，不能直接爲函數的參數指定默認值，只能採用變通的方法。

function log(x, y) {
    x = x || 'dasu';
    y = y || 'Android';
    console.log(x, y);
}

ES6 容許爲函數的參數設置默認值，即直接寫在參數定義的後面。

function log(x="dasu", y="Android") {
    console.log(x, y);
}

固然，參數默認值還有更多細節，好比默認參數的做用域是單獨的、有默認參數值的函數 length 屬性含義會變化等等。

剩餘參數 reset

ES6 引入 rest 參數（形式爲...變量名），用於獲取函數的多餘參數，這樣就不須要使用arguments對象了。rest 參數搭配的變量是一個數組，該變量將多餘的參數放入數組中。

function add(...values) {
  let sum = 0;

  for (var val of values) {
    sum += val;
  }

  return sum;
}

add(2, 5, 3) // 10

箭頭函數

ES6 容許使用「箭頭」（=>）定義函數。

var f = v => v;

// 等同於
var f = function (v) {
  return v;
};

箭頭前面是參數，後面的函數體，若是超過 1 個參數，那麼用圓括號將多個參數圈起，若是沒有參數，就用一個空圓括號 () 表示，若是函數體超過 1 行語句，那麼用 {} 大括號包住。

var f = () => 5;
// 等同於
var f = function () { return 5 };

var sum = (num1, num2) => num1 + num2;
// 等同於
var sum = function(num1, num2) {
  return num1 + num2;
};

當函數做爲另外一個函數的參數時，箭頭函數的寫法會讓代碼變得很便捷，如：

• 箭頭函數的一個用處是簡化回調函數。

// 正常函數寫法
[1,2,3].map(function (x) {
  return x * x;
});

// 箭頭函數寫法
[1,2,3].map(x => x * x);

• 嵌套的箭頭函數

箭頭函數內部，還能夠再使用箭頭函數。下面是一個 ES5 語法的多重嵌套函數。

function insert(value) {
  return {into: function (array) {
    return {after: function (afterValue) {
      array.splice(array.indexOf(afterValue) + 1, 0, value);
      return array;
    }};
  }};
}

insert(2).into([1, 3]).after(1); //[1, 2, 3]

上面這個函數，可使用箭頭函數改寫。

let insert = (value) => ({into: (array) => ({after: (afterValue) => {
  array.splice(array.indexOf(afterValue) + 1, 0, value);
  return array;
}})});

insert(2).into([1, 3]).after(1); //[1, 2, 3]

但使用箭頭函數有一些注意點：

• 函數體內的 this 的指向，就是定義時所在的對象，而不是使用時所在的對象。
• 不能夠看成構造函數，也就是說，不可使用 new 命令，不然會拋出一個錯誤。
• 不可使用 arguments 對象，該對象在函數體內不存在。若是要用，能夠用 rest 參數代替。
• 不可使用 yield 命令，所以箭頭函數不能用做 Generator 函數。

其餘還有不少擴展，包括在 ES5 中，函數有個 name 屬性並在標準規範中，但在 ES6 中加入了標準規範中，還有其餘新增的一些特性，具體參考：函數的擴展

class 類

JavaScript 語言中，生成實例對象的傳統方法是經過構造函數。下面是一個例子。

function Point(x, y) {
  this.x = x;
  this.y = y;
}

Point.prototype.toString = function () {
  return '(' + this.x + ', ' + this.y + ')';
};

var p = new Point(1, 2);

上面這種寫法跟傳統的面嚮對象語言（好比 C++ 和 Java）差別很大，很容易讓新學習這門語言的程序員感到困惑。

ES6 提供了更接近傳統語言的寫法，引入了 Class（類）這個概念，做爲對象的模板。經過class關鍵字，能夠定義類。

基本上，ES6 的class能夠看做只是一個語法糖，它的絕大部分功能，ES5 均可以作到，新的class寫法只是讓對象原型的寫法更加清晰、更像面向對象編程的語法而已。上面的代碼用 ES6 的class改寫，就是下面這樣。

//定義類
class Point {
  constructor(x, y) {
    this.x = x;
    this.y = y;
  }

  toString() {
    return '(' + this.x + ', ' + this.y + ')';
  }
}

var p = new Point();

上面代碼定義了一個「類」，能夠看到裏面有一個constructor方法，這就是構造方法，而this關鍵字則表明實例對象。也就是說，ES5 的構造函數Point，對應 ES6 的Point類的構造方法。

Point類除了構造方法，還定義了一個toString方法。注意，定義「類」的方法的時候，前面不須要加上function這個關鍵字，直接把函數定義放進去了就能夠了。另外，方法之間不須要逗號分隔，加了會報錯。

ES6 的類，徹底能夠看做構造函數的另外一種寫法。

class Point {
  // ...
}

typeof Point // "function"
Point === Point.prototype.constructor // true

上面代碼代表，類的數據類型就是函數，類自己就指向構造函數。

使用的時候，也是直接對類使用new命令，跟構造函數的用法徹底一致。

class Bar {
  doStuff() {
    console.log('stuff');
  }
}

var b = new Bar();
b.doStuff() // "stuff"

構造函數的prototype屬性，在 ES6 的「類」上面繼續存在。事實上，類的全部方法都定義在類的prototype屬性上面。

class Point {
  constructor() {
    // ...
  }

  toString() {
    // ...
  }

  toValue() {
    // ...
  }
}

// 等同於

Point.prototype = {
  constructor() {},
  toString() {},
  toValue() {},
};

在類的實例上面調用方法，其實就是調用原型上的方法。

class B {}
let b = new B();

b.constructor === B.prototype.constructor // true

更多細節內容參考：

class 的基本語法

class 的繼承

其餘

阮一峯好歹專門爲 ES6 新增的特性寫了一整本書，想用一個章節來介紹太不可能了，不少我也沒有去細看。

本篇的主旨就在於大致上列出一些新特性，知道原來 ES6 新增了這些東西，後續有時間再去細看這本書，或者當用到的時候再去查。

最後，就列舉下，其餘上面沒有講到的特性吧：

• ArrayBuffer：大概同於操做二進制數據
• set 和 map：新增是數據結構，相似於數組，能夠類比 Java 中的 Set 和 Map
• Proxy：修改某些默認行爲，等同於在語言層面作出修改，因此屬於"元編程"，即對編程語言進行編程。
• Reflect：一樣是用於操做對象，修改默認行爲。Proxy 更可能是在本來行爲上增長新的行爲，而 Reflect 則是直接修改本來行爲。
• Iterator 和 for..of 循環：爲不一樣的數據結構提供各自的遍歷訪問操做
• Promise：異步編程的解決方案，比傳統的解決方案（回調和事件）更合理強大
• Generator 函數：異步編程的解決方案
• async：Generator 函數的語法糖
• 正則的擴展、數組的擴展、數值的擴展、對象的擴展等

function A(x) {
   A.prototype.x = x;
   A.prototype.y = 1;
}

function B() {}
B.prototype = new A();

var b = new B();
b.y; //1


=

---

你們好，我是 dasu，歡迎關注個人公衆號（dasuAndroidTv），公衆號中有個人聯繫方式，歡迎有事沒事來嘮嗑一下，若是你以爲本篇內容有幫助到你，能夠轉載但記得要關注，要標明原文哦，謝謝支持~