ES6新特性概覽

来源:http://www.cnblogs.com/laixiangran/archive/2016/03/09/5260035.html
-Advertisement-
Play Games

箭頭操作符 如果你會C 或者Java，你肯定知道lambda表達式，ES6中新增的箭頭操作符= 便有異曲同工之妙。它簡化了函數的書寫。操作符左邊為輸入的參數，而右邊則是進行的操作以及返回的值Inputs= outputs。 我們知道在JS中回調是經常的事，而一般回調又以匿名函數的形式出現，每次都需要


箭頭操作符

如果你會C#或者Java，你肯定知道lambda表達式，ES6中新增的箭頭操作符=>便有異曲同工之妙。它簡化了函數的書寫。操作符左邊為輸入的參數，而右邊則是進行的操作以及返回的值Inputs=>outputs。
我們知道在JS中回調是經常的事，而一般回調又以匿名函數的形式出現，每次都需要寫一個function，甚是繁瑣。當引入箭頭操作符後可以方便地寫回調了。請看下麵的例子：

var array = [1,2,3];

// 傳統寫法寫法
array.forEach(function(v) {
    console.log(v);
});

// ES6寫法
array.forEach(v => console.log(v));

類的支持

ES6中添加了對類的支持，引入了class關 鍵字（其實class在JavaScript中一直是保留字，目的就是考慮到可能在以後的新版本中會用到，現在終於派上用場了）。JS本身就是面向對象 的，ES6中提供的類實際上只是JS原型模式的包裝。現在提供原生的class支持後，對象的創建，繼承更加直觀了，並且父類方法的調用，實例化，靜態方 法和構造函數等概念都更加形象化。

下麵代碼展示了類在ES6中的使用：

// 類的定義
class Animal {
    // ES6中新型構造器
    constructor(name) {
        this.name = name;
    }

    // 實例方法
    sayName() {
        console.log('My name is ' + this.name);
    }
}

// 類的繼承
class Programmer extends Animal {
    constructor(name) {
        // 直接調用父類構造器進行初始化
        super(name);
    }
    program() {
        console.log("I'm coding...");
    }
}

// 測試我們的類
var animal = new Animal('dummy'),
    wayou = new Programmer('wayou');
animal.sayName(); // 輸出 'My name is dummy'
wayou.sayName(); // 輸出 'My name is wayou'
wayou.program(); // 輸出 'I'm coding...'

增強的對象字面量

對象字面量被增強了，寫法更加簡潔與靈活，同時在定義對象的時候能夠做的事情更多了。具體表現在：

  1. 可以在對象字面量裡面定義原型
  2. 定義方法可以不用function關鍵字
  3. 直接調用父類方法

這樣一來，對象字面量與前面提到的類概念更加吻合，在編寫面向對象的JavaScript時更加輕鬆方便了。

// 通過對象字面量創建對象
var human = { 
    breathe() {
        console.log('breathing...');
    }
};

var worker = { 
    __proto__: human, // 設置此對象的原型為human, 相當於繼承human
    company: 'freelancer',
    work() {
        console.log('working...');
    }
};

human.breathe(); // 輸出 'breathing...'

// 調用繼承來的breathe方法
worker.breathe(); // 輸出 'breathing...'

字元串模板

字元串模板相對簡單易懂些。ES6中允許使用反引號 ` 來創建字元串，此種方法創建的字元串裡面可以包含由美元符號加花括弧包裹的變數 ${vraible}。如果你使用過像C#等後端強類型語言的話，對此功能應該不會陌生。

// 產生一個隨機數
var num = Math.random();

// 將這個數字輸出到console 
console.log(`your num is ${num}`);

解構

自動解析數組或對象中的值。比如若一個函數要返回多個值，常規的做法是返回一個對象，將每個值做為這個對象的屬性返回。但在ES6中，利用解構這一特性，可以直接返回一個數組，然後數組中的值會自動被解析到對應接收該值的變數中。

function getVal() {
    return[1,2];
}
var [x,y] = getVal(), // 函數返回值的解構
console.log('x:' + x + ', y:' + y); // 輸出：x:1, y:2

[name,,age] = ['wayou','male','secrect']; // 數組解構
console.log('name:' + name + ', age:' + age); //輸出：name:wayou, age:secrect

參數預設值，不定參數，拓展參數

預設參數值

現在可以在定義函數的時候指定參數的預設值了，而不用像以前那樣通過邏輯或操作符來達到目的了。

function sayHello(name) {
    // 傳統的指定預設參數的方式
    var name = name || 'dude';
    console.log('Hello ' + name);
}  
sayHello(); // 輸出：Hello dude
sayHello('Wayou'); // 輸出：Hello Wayou

// 運用ES6的預設參數
function sayHello2(name = 'dude') {
    console.log(`Hello${name}`);
}
sayHello2(); // 輸出：Hello dude
sayHello2('Wayou'); // 輸出：Hello Wayou

不定參數

不定參數是在函數中使用命名參數同時接收不定數量的未命名參數。這隻是一種語法糖，在以前的JavaScript代碼中我們可以通過arguments變數來達到這一目的。不定參數的格式是三個句點後跟代表所有不定參數的變數名。

比如下麵這個例子中，…x代表了所有傳入add函數的參數。

// 將所有參數相加的函數
function add(...x) {
    return x.reduce((m,n) => m+n);
}

// 傳遞任意個數的參數
console.log(add(1,2,3)); // 輸出：6
console.log(add(1,2,3,4,5)); // 輸出：15

拓展參數

拓展參數則是另一種形式的語法糖，它允許傳遞數組或者類數組直接做為函數的參數而不用通過apply。

var people = ['Wayou','John','Sherlock'];

// sayHello函數本來接收三個單獨的參數人一，人二和人三
function sayHello(people1, people2, people3) {
    console.log(`Hello${people1}, ${people2}, ${people3}`);
}

// 但是我們將一個數組以拓展參數的形式傳遞，它能很好地映射到每個單獨的參數
sayHello(...people); // 輸出：Hello Wayou,John,Sherlock

// 而在以前，如果需要傳遞數組當參數，我們需要使用函數的apply方法
sayHello.apply(null, people); // 輸出：Hello Wayou,John,Sherlock

let與const 關鍵字

可以把let看成var，只是它定義的變數被限定在了特定範圍內才能使用，而離開這個範圍則無效。const則很直觀，用來定義常量，即無法被更改值的變數。

for (let i=0; i<2; i++) {
    console.log(i); // 輸出: 0,1
}
console.log(i); // 輸出：undefined,嚴格模式下會報錯

for of 值遍歷

我們都知道for in迴圈用於遍曆數組，類數組或對象，ES6中新引入的for of迴圈功能相似，不同的是每次迴圈它提供的不是序號而是值。

var someArray = ["a","b","c"];
for (v of someArray) {
    console.log(v); // 輸出 a,b,c
}

iterator, generator

  1. iterator: 它是這麼一個對象，擁有一個next方法，這個方法返回一個對象{done,value}，這個對象包含兩個屬性，一個布爾類型的done和包含任意值的value

  2. iterable: 這是這麼一個對象，擁有一個obj[@@iterator]方法，這個方法返回一個iterator

  3. generator: 它是一種特殊的iterator。反的next方法可以接收一個參數並且返回值取決與它的構造函數（generator function）。generator同時擁有一個throw方法

  4. generator函數: 即generator的構造函數。此函數內可以使用yield關鍵字。在yield出現的地方可以通過generator的next或throw方法向外界傳遞值。generator 函數是通過function*來聲明的

  5. yield關鍵字：它可以暫停函數的執行，隨後可以再進進入函數繼續執行

模塊

在ES6標準中，JavaScript原生支持module了。這種將JS代碼分割成不同功能的小塊進行模塊化的概念是在一些三方規範中流行起來的，比如CommonJS和AMD模式。

將不同功能的代碼分別寫在不同文件中，各模塊只需導出公共介面部分，然後通過模塊的導入的方式可以在其他地方使用。

// point.js
module "point" {
    export class Point {
        constructor(x,y) {
            public x=x;
            public y=y;
        }
    }
}

// myapp.js

// 聲明引用的模塊 
module point from "/point.js";

// 這裡可以看出，儘管聲明瞭引用的模塊，還是可以通過指定需要的部分進行導入
import Point from "point";
var origin = new Point(0,0);
console.log(origin);

Map，Set 和 WeakMap，WeakSet

這些是新加的集合類型，提供了更加方便的獲取屬性值的方法，不用像以前一樣用hasOwnProperty來檢查某個屬性是屬於原型鏈上的呢還是當前對象的。同時，在進行屬性值添加與獲取時有專門的get，set方法。

// Sets 
var s = new Set();
s.add("hello").add("goodbye");
s.size === 2;
s.has("hello") === true;

// Maps
var m = new Map();
m.set("hello", 42);
m.set(s, 34);
m.get(s) == 34;

有時候我們會把對象作為一個對象的鍵用來存放屬性值，普通集合類型比如簡單對象會阻止垃圾回收器對這些作為屬性鍵存在的對象的回收，有造成記憶體泄漏的危險。而WeakMap,WeakSet則更加安全些，這些作為屬性鍵的對象如果沒有別的變數在引用它們，則會被回收釋放掉，具體還看下麵的例子：

// Weak Maps
var wm = new WeakMap();
wm.set(s, {extra: 42});
wm.size === undefined // 對象釋放了

// Weak Sets
var ws = new WeakSet();
ws.add({data: 42}); // 因為添加到ws的這個臨時對象沒有其他變數引用它，所以ws不會保存它的值，也就是說這次添加其實沒有意思

Proxies

Proxy可以監聽對象身上發生了什麼事情，併在這些事情發生後執行一些相應的操作。一下子讓我們對一個對象有了很強的追蹤能力，同時在數據綁定方面也很有用處。

// 定義被偵聽的目標對象
var engineer = {name: 'Joe Sixpack', salary: 50};

// 定義處理程式
var interceptor = {set: function(receiver, property, value) {
    console.log(property, 'is changed to', value);
    receiver[property] = value;
    }
};

// 創建代理以進行偵聽
engineer = Proxy(engineer, interceptor);

//做一些改動來觸發代理
engineer.salary = 60; // 控制台輸出：salary is changed to 60

上面代碼我已加了註釋，這裡進一步解釋。對於處理程式，是在被偵聽的對象身上發生了相應事件之後，處理程式裡面的方法就會被調用，上面例子中我們設置了set的處理函數，表明，如果我們偵聽的對象的屬性被更改，也就是被set了，那這個處理程式就會被調用，同時通過參數能夠得知是哪個屬性被更改，更改為了什麼值。

Symbols

我們知道對象其實是鍵值對的集合，而鍵通常來說是字元串。而現在除了字元串外，我們還可以用symbol這種值來做為對象的鍵。Symbol是一種 基本類型，像數字，字元串還有布爾一樣，它不是一個對象。Symbol 通過調用symbol函數產生，它接收一個可選的名字參數，該函數返回的symbol是唯一的。之後就可以用這個返回值做為對象的鍵了。Symbol還可以用來創建私有屬性，外部無法直接訪問由symbol做為鍵的屬性值。

(function() {
    // 創建 symbol
    var key = Symbol("key");
    function MyClass(privateData) {
        this[key] = privateData;
    }
    MyClass.prototype = {
        doStuff: function() {
            ...this[key]...
        }
    };
})();
var c = new MyClass("hello");
c["key"] === undefined //無法訪問該屬性，因為是私有的

Math，Number，String，Object 的新API

對Math,Number,String還有Object等添加了許多新的API。

// Number
// 不同的兩個Number之間的最小的差
Number.EPSILON

// 判斷是否是整數
Number.isInteger(Infinity) // false

// 判斷是否為非數字
Number.isNaN("NaN") // false

// Math
Math.acosh(3) // 1.762747174039086
Math.hypot(3,4) // 5
Math.imul(Math.pow(2,32)-1, Math.pow(2,32)-2) // 2

// String
"abcde".contains("cd") // true
"abc".repeat(3) // "abcabcabc"

// Array
// 將一個類數組對象或可迭代對象轉換成真實的數組
Array.from(document.querySelectorAll('*'))

// 將它的任意類型的多個參數放在一個數組裡並返回
Array.of(1,2,3)

// 將一個數組中指定區間的所有元素的值, 都替換成或者說填充成為某個固定的值
[0,0,0].fill(7,1) // [0,7,7]

// 用來查找數組中某指定元素的索引, 如果找不到指定的元素, 則返回 -1
[1,2,3].findIndex(x => x == 2) // 1

// 返回一個 Array Iterator 對象，該對象包含數組中每一個索引的鍵值對
["a","b","c"].entries() // iterator [0, "a"], [1,"b"], [2,"c"]

// 返回一個數組索引的迭代器
["a","b","c"].keys() // iterator 0, 1, 2

// 返回一個新的 Array Iterator 對象，該對象包含數組每個索引的值
["a","b","c"].values() // iterator "a", "b", "c"

// Object
Object.assign(Point, {origin: new Point(0,0)})

Promises

Promises是處理非同步操作的一種模式，之前在很多三方庫中有實現，比如jQuery的deferred 對象。當你發起一個非同步請求，並綁定了.when(), .done()等事件處理程式時，其實就是在應用promise模式。

// 創建 promise
var promise = new Promise(function(resolve,reject) {
    // 進行一些非同步或耗時操作
    if(/*如果成功 */) {
        resolve("Stuff worked!");
    } else {
        reject(Error("It broke"));
    }
});

// 綁定處理程式
promise.then(function(result) {
    // promise成功的話會執行這裡
    console.log(result); // "Stuff worked!"
}, function(err) {
    // promise失敗會執行這裡
    console.log(err); // Error: "It broke"
});

資料

  1. 上面的ES6代碼都可以在這裡進行轉換：ES6轉ES5
  2. 阮一峰老師的ECMAScript 6入門
  3. 更詳細的介紹，到這裡MDN

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

-Advertisement-
Play Games
更多相關文章
  • css HACK
    1、什麼是CSS hack? CSS hack是通過在CSS樣式中加入一些特殊的符號，讓不同的瀏覽器識別不同的符號（什麼樣的瀏覽器識別什麼樣的符號是有標準的，CSS hack就是讓你記住這個標準），以達到應用不同的CSS樣式的目的，比如.kwstu{width:300px;_width:200px;
  • 後互聯網時代，Windows的未來
    有一天，我想帶全家一起去旅游。我拿起手機，按了幾個鍵，說“查一下麗江的旅游路線”。頓時一幅巨大的圖畫，出現在面前的面前原來看上去平淡無奇的白牆上。我用手指點麗江地圖的一個個景點，秀麗山水的照片和視頻也隨之顯示在旁邊，就好像我們已經身臨其境一般。參考著Twitter的點評，我選擇了一條路線，以及住宿的
  • jQuery隨筆記-遍歷
    一般來說我在需要寫一個遍歷的時候就先寫一個html測試頁面，用相同的結構來測試代碼。如下： <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>jQuery遍歷測試</t
  • JavaScript常用字元串方法
    獲取類： 1）動態方法： charAt : 獲取字元串指定位置上的字元。（參數：一個，指定要獲取的字元位置） 1，不接受負數，如果為負數，會返回一個空字元串。 2，如果不給參數，預設是獲取第0位置上的字元。 3，只接收一個參數。 charCodeAt : 獲取字元串中指定位置上字元的Unicode編
  • 前端開發必知必會：CSS Position 全解析
    當人們剛接觸佈局的時候都比較傾向於使用定位的方式。因為定位的概念看起來好像比較容易掌握。錶面上你確切地指定了一個塊元素所處的位置那麼它就會坐落於那裡。可是定位比你剛看到的時候要稍微複雜一點。對於定位來說，有一些東西會絆倒新手，所以在它成為你的慣用技巧前你需要掌握它們。 一旦你更深入地瞭解了它是怎麼運
  • Object-Oriented CSS
    1、指導思想： http://oocss.org/ 2、reset.css http://meyerweb.com/eric/tools/css/reset/ 3、normalize.css https://necolas.github.io/normalize.css/ 4、neat.css ht
  • CSS中的五大字體家族（cursive 手寫字體族更吸引我）
    這是CSS中的五大字體家族。serifserif 中文翻譯為“襯線字體族”。serif 具有末端加粗、擴張或尖細末端，或以實際的襯線結尾的一類字體。可以看出 serif 總是在文字末端做文章，這樣做的目的是增強可讀性，也就是說在字型大小比較小的時候，serif 一族的字體仍然是比較好辨認的。serif
  • ajax方法完整的事件流
一周排行
    -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.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類