學習 ES6，一篇文章就夠了

来源:http://www.cnblogs.com/bxm0927/archive/2017/06/24/7074175.html
-Advertisement-
Play Games

ES6 簡介 ECMAScript 6 簡稱 ES6，是 JavaScript 語言的下一代標準，已經在2015年6月正式發佈了。它的目標是使得 JavaScript 語言可以用來編寫複雜的大型應用程式，成為企業級開發語言。 ECMAScript 和 JavaScript 的關係：前者是後者的語法規 ...


ES6 簡介

ECMAScript 6 簡稱 ES6，是 JavaScript 語言的下一代標準，已經在2015年6月正式發佈了。它的目標是使得 JavaScript 語言可以用來編寫複雜的大型應用程式，成為企業級開發語言。

ECMAScript 和 JavaScript 的關係：前者是後者的語法規格，後者是前者的一種實現

Babel：將ES6代碼轉為ES5代碼 http://babeljs.io/


image

新特性

let、const

let 定義的變數不會被變數提升，const 定義的常量不能被修改，let 和 const 都是塊級作用域

ES6前，js 是沒有塊級作用域 {} 的概念的。（有函數作用域、全局作用域、eval作用域）

ES6後，let 和 const 的出現，js 也有了塊級作用域的概念，前端的知識是日新月異的~

變數提升：在ES6以前，var關鍵字聲明變數。無論聲明在何處，都會被視為聲明在函數的最頂部；不在函數內即在全局作用域的最頂部。這樣就會引起一些誤解。例如：

console.log(a);  // undefined
var a = 'hello';

# 上面的代碼相當於
var a;
console.log(a);
a = 'hello';

# 而 let 就不會被變數提升
console.log(a); // a is not defined
let a = 'hello';

const 定義的常量不能被修改

var name = "bai";
name = "ming";
console.log(name); // ming


const name = "bai";
name = "ming"; // Assignment to constant variable.
console.log(name);

import、export

import導入模塊、export導出模塊

// 全部導入
import people from './example'

// 將整個模塊當作單一對象進行導入，該模塊的所有導出都會作為對象的屬性存在
import * as example from "./example.js"
console.log(example.name)
console.log(example.getName())

// 導入部分，引入非 default 時，使用花括弧
import {name, age} from './example'


// 導出預設, 有且只有一個預設
export default App

// 部分導出
export class App extend Component {};

class、extends、super

ES5中最令人頭疼的的幾個部分：原型、構造函數，繼承，有了ES6我們不再煩惱！

ES6引入了Class（類）這個概念。

class Animal {
    constructor() {
        this.type = 'animal';
    }
    says(say) {
        console.log(this.type + ' says ' + say);
    }
}

let animal = new Animal();
animal.says('hello'); //animal says hello

class Cat extends Animal {
    constructor() {
        super();
        this.type = 'cat';
    }
}

let cat = new Cat();
cat.says('hello'); //cat says hello

上面代碼首先用class定義了一個“類”，可以看到裡面有一個constructor方法，這就是構造方法，而this關鍵字則代表實例對象。簡單地說，constructor內定義的方法和屬性是實例對象自己的，而constructor外定義的方法和屬性則是所有實力對象可以共用的。

Class之間可以通過extends關鍵字實現繼承，這比ES5的通過修改原型鏈實現繼承，要清晰和方便很多。上面定義了一個Cat類，該類通過extends關鍵字，繼承了Animal類的所有屬性和方法。

super關鍵字，它指代父類的實例（即父類的this對象）。子類必須在constructor方法中調用super方法，否則新建實例時會報錯。這是因為子類沒有自己的this對象，而是繼承父類的this對象，然後對其進行加工。如果不調用super方法，子類就得不到this對象。

ES6的繼承機制，實質是先創造父類的實例對象this（所以必須先調用super方法），然後再用子類的構造函數修改this。

// ES5
var Shape = function(id, x, y) {
    this.id = id,
        this.move(x, y);
};
Shape.prototype.move = function(x, y) {
    this.x = x;
    this.y = y;
};

var Rectangle = function id(ix, x, y, width, height) {
    Shape.call(this, id, x, y);
    this.width = width;
    this.height = height;
};
Rectangle.prototype = Object.create(Shape.prototype);
Rectangle.prototype.constructor = Rectangle;

var Circle = function(id, x, y, radius) {
    Shape.call(this, id, x, y);
    this.radius = radius;
};
Circle.prototype = Object.create(Shape.prototype);
Circle.prototype.constructor = Circle;

// ES6
class Shape {
    constructor(id, x, y) {
        this.id = id this.move(x, y);
    }
    move(x, y) {
        this.x = x this.y = y;
    }
}

class Rectangle extends Shape {
    constructor(id, x, y, width, height) {
        super(id, x, y) this.width = width this.height = height;
    }
}

class Circle extends Shape {
    constructor(id, x, y, radius) {
        super(id, x, y) this.radius = radius;
    }
}

arrow functions （箭頭函數）

函數的快捷寫法。不需要 function 關鍵字來創建函數，省略 return 關鍵字，繼承當前上下文的 this 關鍵字

// ES5
var arr1 = [1, 2, 3];
var newArr1 = arr1.map(function(x) {
  return x + 1;
});

// ES6
let arr2 = [1, 2, 3];
let newArr2 = arr2.map((x) => {
  x + 1
});

箭頭函數小細節：當你的函數有且僅有一個參數的時候，是可以省略掉括弧的；當你函數中有且僅有一個表達式的時候可以省略{}

let arr2 = [1, 2, 3];
let newArr2 = arr2.map(x => x + 1);

JavaScript語言的this對象一直是一個令人頭痛的問題，運行上面的代碼會報錯，這是因為setTimeout中的this指向的是全局對象。

class Animal {
    constructor() {
        this.type = 'animal';
    }
    says(say) {
        setTimeout(function() {
            console.log(this.type + ' says ' + say);
        }, 1000);
    }
}

var animal = new Animal();
animal.says('hi'); //undefined says hi

解決辦法：

// 傳統方法1: 將this傳給self,再用self來指代this
says(say) {
    var self = this;
    setTimeout(function() {
        console.log(self.type + ' says ' + say);
    }, 1000);
}

// 傳統方法2: 用bind(this),即
says(say) {
    setTimeout(function() {
        console.log(this.type + ' says ' + say);
    }.bind(this), 1000);
}

// ES6: 箭頭函數
// 當我們使用箭頭函數時，函數體內的this對象，就是定義時所在的對象
says(say) {
    setTimeout(() => {
        console.log(this.type + ' says ' + say);
    }, 1000);
}

template string （模板字元串）

解決了 ES5 在字元串功能上的痛點。

第一個用途：字元串拼接。將表達式嵌入字元串中進行拼接，用 ` 和${}`來界定。

// es5
var name1 = "bai";
console.log('hello' + name1);

// es6
const name2 = "ming";
console.log(`hello${name2}`);

第二個用途：在ES5時我們通過反斜杠來做多行字元串拼接。ES6反引號 `` 直接搞定。

// es5
var msg = "Hi \
man!";

// es6
const template = `<div>
    <span>hello world</span>
</div>`;

另外：includes repeat

// includes：判斷是否包含然後直接返回布爾值
let str = 'hahah';
console.log(str.includes('y')); // false

// repeat: 獲取字元串重覆n次
let s = 'he';
console.log(s.repeat(3)); // 'hehehe'

destructuring （解構）

簡化數組和對象中信息的提取。

ES6前，我們一個一個獲取對象信息；

ES6後，解構能讓我們從對象或者數組裡取出數據存為變數

// ES5
var people1 = {
  name: 'bai',
  age: 20,
  color: ['red', 'blue']
};

var myName = people1.name;
var myAge = people1.age;
var myColor = people1.color[0];
console.log(myName + '----' + myAge + '----' + myColor);

// ES6
let people2 = {
  name: 'ming',
  age: 20,
  color: ['red', 'blue']
}

let { name, age } = people2;
let [first, second] = people2.color;
console.log(`${name}----${age}----${first}`);

default 函數預設參數

// ES5 給函數定義參數預設值
function foo(num) {
  num = num || 200;
  return num;
}

// ES6
function foo(num = 200) {
  return num;
}

rest arguments （rest參數）

解決了 es5 複雜的 arguments 問題

function foo(x, y, ...rest) {
    return ((x + y) * rest.length);
}
foo(1, 2, 'hello', true, 7); // 9

Spread Operator （展開運算符）

第一個用途：組裝數組

let color = ['red', 'yellow'];
let colorful = [...color, 'green', 'blue'];
console.log(colorful); // ["red", "yellow", "green", "blue"]

第二個用途：獲取數組除了某幾項的其他項

let num = [1, 3, 5, 7, 9];
let [first, second, ...rest] = num;
console.log(rest); // [5, 7, 9]

對象

對象初始化簡寫

// ES5
function people(name, age) {
  return {
    name: name,
    age: age
  };
}

// ES6
function people(name, age) {
  return {
    name,
    age
  };
}

對象字面量簡寫（省略冒號與 function 關鍵字）

// ES5
var people1 = {
  name: 'bai',
  getName: function () {
    console.log(this.name);
  }
};

// ES6
let people2 = {
  name: 'bai',
  getName () {
    console.log(this.name);
  }
};

另外：Object.assign()

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

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

// 給對象添加屬性
this.seller = Object.assign({}, this.seller, response.data)

Promise

用同步的方式去寫非同步代碼

// 發起非同步請求
fetch('/api/todos')
  .then(res => res.json())
  .then(data => ({
    data
  }))
  .catch(err => ({
    err
  }));

Generators

生成器（ generator）是能返回一個迭代器的函數。

生成器函數也是一種函數，最直觀的表現就是比普通的function多了個星號*，在其函數體內可以使用yield關鍵字,有意思的是函數會在每個yield後暫停。

這裡生活中有一個比較形象的例子。咱們到銀行辦理業務時候都得向大廳的機器取一張排隊號。你拿到你的排隊號，機器並不會自動為你再出下一張票。也就是說取票機“暫停”住了，直到下一個人再次喚起才會繼續吐票。

迭代器：當你調用一個generator時，它將返回一個迭代器對象。這個迭代器對象擁有一個叫做next的方法來幫助你重啟generator函數並得到下一個值。next方法不僅返回值，它返回的對象具有兩個屬性：done和value。value是你獲得的值，done用來表明你的generator是否已經停止提供值。繼續用剛剛取票的例子，每張排隊號就是這裡的value，列印票的紙是否用完就這是這裡的done。

// 生成器
function *createIterator() {
  yield 1;
  yield 2;
  yield 3;
}

// 生成器能像正規函數那樣被調用，但會返回一個迭代器
let iterator = createIterator();

console.log(iterator.next().value); // 1
console.log(iterator.next().value); // 2
console.log(iterator.next().value); // 3

迭代器對非同步編程作用很大，非同步調用對於我們來說是很困難的事，我們的函數並不會等待非同步調用完再執行，你可能會想到用回調函數，（當然還有其他方案比如Promise比如Async/await）。

生成器可以讓我們的代碼進行等待。就不用嵌套的回調函數。使用generator可以確保當非同步調用在我們的generator函數運行一下行代碼之前完成時暫停函數的執行。

那麼問題來了，咱們也不能手動一直調用next()方法，你需要一個能夠調用生成器並啟動迭代器的方法。就像這樣子的：

function run(taskDef) {
  // taskDef 即一個生成器函數
  // 創建迭代器，讓它在別處可用
  let task = taskDef();

  // 啟動任務
  let result = task.next();

  // 遞歸使用函數來保持對 next() 的調用
  function step() {
    // 如果還有更多要做的
    if (!result.done) {
      result = task.next();
      step();
    }
  }

  // 開始處理過程
  step();
}

總結

以上就是 ES6 最常用的一些語法，可以說這20%的語法，在ES6的日常使用中占了80%

最後更新時間：2017-06-24 18:52:48
原始文章鏈接：http://bxm0927.github.io/2017/06/24/es6_study/


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

-Advertisement-
Play Games
更多相關文章
  • springmvc關於前臺日期作為實體類對象參數類型轉換錯誤
    頁面報錯： 後臺錯誤： Field error in object 'user' on field 'birthday': rejected value [2013-06-24]; codes [typeMismatch.user.birthday,typeMismatch.birthday,typ ...
  • Java基礎——ArrayList與LinkedList（一）
    一、定義 ArrayList和LinkedList是兩個集合類，用於儲存一系列的對象引用（references）。 引用的格式分別為： 1 ArrayList<String> list = new ArrayList<String>(); 1 LinkedList<Integer> list = n ...
  • 【分享】我們用了不到200行代碼實現的文件日誌系統，極佳的IO性能和高併發支持，附壓力測試數據
    很多項目都配置了日誌記錄的功能，但是，卻只有很少的項目組會經常去看日誌。原因就是日誌文件生成規則設置不合理，將嚴重的錯誤日誌跟普通的錯誤日誌混在一起，分析起來很麻煩。 其實，我們想要的一個日誌系統核心就這2個要求： 這樣的日誌系統最大的好處就是可以幫助我們一目瞭然的發現嚴重錯誤。結合管理員後臺直接訪 ...
  • HTML5 之圖片上傳預處理
    在開發 H5 應用的時候碰到一個問題，應用只需要一張小的縮略圖，而用戶用手機上傳的確是一張大圖，手機攝像機拍的圖片好幾 M，這可要浪費很多流量。 像我這麼為用戶著想的程式員，絕對不會讓這種事情發生的，於是就有了本文。 獲取圖片 通過 File API 獲取圖片。 預覽圖片 使用 createObje ...
  • JavaScript 簡單嗎
    英文：Aurélien Hervé 譯文：眾成翻譯/msmailcode 這裡有一些 Javascript初學者應該知道的技巧和陷阱。如果你已經是專家了，順便溫習一下。 Javascript也只不過是一種編程語言。怎麼可能出錯嘛? 1. 你有沒有嘗試給一組數字排序？ Javascript 的sort ...
  • 一名 40 歲“老”程式員的反思
    英文：Ben Northrop 譯文：開源中國 【導讀】：Ben Northrop 在 2016 年滿了 40 歲，本文是他對職業生涯的思考。他認為從長遠來看，應該多投資一些不容易過期、衰竭期較長的知識領域中。 我是一名程式員，幾個月前剛過完 40 歲生日。某個星期六的早晨，我參加了一個 React ...
  • angular之$watch、$watchGroup、$watchCollection
    1，原型：$watch: function(watchExp, listener, objectEquality, prettyPrintExpression){}； 2，參數：watchExp(必須)：{(function()|string)}，可以字元串表達式，也可以帶當前scope為參數的函數 ...
  • 連續賦值和記憶體指針的問題解析（a.x=a={n:2}）
    前幾天偶然看到了一個這樣的題： 這個題代碼不多，不過考察的知識點卻非常不錯。我們知道記憶體空間分為棧記憶體和堆記憶體。棧記憶體用來存放供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.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類