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

来源:https://www.cnblogs.com/dasusu/archive/2018/12/07/10084225.html
-Advertisement-
Play Games

聲明 本篇內容全部摘自阮一峰的： "ECMAScript 6 入門" 阮一峰的這本書，我個人覺得寫得挺好的，不管是描述方面，還是例子，都講得挺通俗易懂，每個新特性基本都還會跟 ES5 舊標準做比較，說明為什麼會有這個新特性，這更於理解。 所以，後續不會再寫個關於 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），公眾號中有我的聯繫方式，歡迎有事沒事來嘮嗑一下，如果你覺得本篇內容有幫助到你，可以轉載但記得要關註，要標明原文哦，謝謝支持~
dasuAndroidTv2.png


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

-Advertisement-
Play Games
更多相關文章
  • vue相關理論知識
    es6常用語法簡介 es是js的規範標準 let 特點： 1.有全局和函數作用域,以及塊級作用域(用{}表示塊級作用域範圍) 2.不會存在變數提升 3.變數不能重覆聲明 const 特點: 1.有塊級作用域 2.不會存在變數提升 3.不能重覆聲明變數， 4.只聲明常量,必須賦值,且定義之後不能更改 ...
  • Promise, Generator, async/await的漸進理解
    作為前端開發者的伙伴們，肯定對Promise，Generator，async/await非常熟悉不過了。Promise絕對是爛記於心，而async/await卻讓使大伙們感覺到爽（原來非同步可以這麼簡單）。可回頭來梳理他們的關聯時，你驚訝的發現，他們是如此的密切相關。 一、三者關係與發展史 我對他們三 ...
  • [小知識點] react 性能
    場景： jsx 綁定方法 方法有3種 1： clickEye(a, b){ // do something..... } clickEye(a, b){ // do something..... } 2： 3： 總結： 我個人基本拋棄了第二種方法，經常使用的是第三種方法，如果遇到需要傳特殊參數，並且 ...
  • F12 console的用法，以及如何debug程式？
    這裡是修真院前端小課堂，每篇分享文從 【背景介紹】【知識剖析】【常見問題】【解決方案】【編碼實戰】【擴展思考】【更多討論】【參考文獻】 八個方面深度解析前端知識/技能，本篇分享的是： 【F12 console的用法，以及如何debug程式？】 1.背景介紹 Chrome中Console是用於顯示JS ...
  • 前端如何進行用戶許可權管理
    1：問題： 假如在做一個管理系統，面向老師學生的，學生提交申請，老師負責審核（或者還需要添加其他角色，功能許可權都不同）。 現在的問題是，每種角色登錄看到的界面應該都是不一樣的，那這個頁面的區分如何實現呢？ 2：要不要給老師和學生各自設計一套頁面？這樣工作量是不是太大了，並且如果還要加入其它角色的話， ...
  • float清除浮動
    清除浮動： 在非IE瀏覽器下，當容器的高度為auto，且容器的內容中有浮動（float為left或right）的元素，在這種情況下，容器的高度不能自動伸長以適應內容的高度，使得內容溢出到容器外面而影響（甚至破壞）佈局的現象。即父級對象盒子無法被撐開，這個現象叫浮動溢出，為了防止這個現象的出現而進行的 ...
  • js迴圈匹配組合成新對象或js迴圈組合新數據
    var Arry=[ {name: "vehicleTravelLicenseCopyBack", id: "a1"}, {name: "vehicleTravelLicenseCopyFront", id: "a2"}, {name: "idCardBack", id: "a3"}, {name: ...
  • 你不知道的Node.js性能優化，讀了之後水平直線上升
    本文由雲+社區發表 “當我第一次知道要這篇文章的時候，其實我是拒絕的，因為我覺得，你不能叫我寫馬上就寫，我要有乾貨才行，寫一些老生常談的然後加上好多特技，那個 Node.js 性能啊好像 Duang~ 的一下就上去了，那讀者一定會罵我，Node.js 根本沒有這樣搞性能優化的，都是假的。” 斯塔克· ...
一周排行
    -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.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類