ES2015入門系列1-初識ES2015

hellowoody 發布于2019-08-20 17:37 / 1412人閱讀

EcmaScript 其實是一種語言規范，常見的 JavaScript, ActionScript 等都是其具體實現，平時使用中一般可以將其和Javascript對等稱呼，本系列教程主要講述 EcmaScript2015(ES6) 為JavaScript帶來的新的特性，并初步掌握如何利用其進行開發。

本系列面向有一定基礎知識的ES5使用者，不適合初學者。

先來看兩段代碼：

Human.js

export default class Human {

}

main.js

import Human from "./Human";

class Man extends Human {

  constructor(name = "unnamed") {
    super();
    this.gender = "male";
    this.name = name;
  }

  static create(name = "unamed") {
      return new Man(name);
  }

  getGender() {
      return this.gender;
  }

  getName() {
      return this.name;
  }

}

const man = new Man("Jack");

let manObject = {
    man
}

console.log(man.getName());
console.dir(manObject);

上面的代碼為我們展示了和ES5不一樣的語法：

import 和 export

模塊化開發，在此之前也有很多的方案，AMD, CMD等，但從使用上來說，ES2015的模塊化開發還是很簡單和強大的。

class

語意化的的面向對象語法，不過不要驚訝，這其實只是語法糖，在其背后，依然是編譯器按照ES5的方式去執行的，不過對于后端開發者來說，接受起來就不會那么難受了。class中定義方法無需function關鍵字, 這些會在后面的章節進一步講解。

參數有默認值了

不用再使用:

a = a || "default";

這種方式處理默認值啦，其實這也是語法糖，但是帶來的便利不言而喻。

const 和 let 關鍵字

var 終于不再一家獨大了，來了2個小伙伴一起玩耍。

屬性簡潔寫法

如果對象的屬性名稱和變量名稱一致，那么可以使用下面的簡潔寫法：

let manObject = {
    man
}

//等同于
let manObject = {
    man: man
}

怎么樣，相比ES5，是不是更現代化了呢？

當然ES6帶來的新語法豈止這幾點，但這足以讓我們對JavaScript更感興趣了。

云服務器 GPU云服務器 es6-系列 ES6入門我的2015 2015

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/83732.html

2017-06-29 前端日報

摘要：前端日報精選如何在非項目中使用知乎專欄編碼規范最常被遺忘的性能優化瀏覽器緩存個人文章譯統一樣式語言掘金新的開發者提及最多的個視頻眾成翻譯中文第期在中使用譯統一樣式語言掘金前端現狀答題救不了前端新人相學長懟前端歲以 2017-06-29 前端日報精選如何在非 React 項目中使用 Redux - 知乎專欄Javascript編碼規范 - Clearlove - SegmentFau...

gaosboy 2019-08-20 17:37 評論0 收藏0
ES2015入門系列9-Babel和Rollup

摘要：雖然夠好用，奈何沒有瀏覽器對其可以完全支持，本文書寫時間，開發版號稱已經支持的特性。開始安裝本系列假定讀者都有使用經驗，如果還沒有，趕緊去這里了解并安裝吧。到此，我們的已經準備就緒。通過前面章節的講解，大家對ES2015的一些新語法有了初步的理解，之前我們的測試代碼都可以直接放入 Chrome Console 中直接運行，為了更好的學習后面的面向對象和模塊開發，我先用一章介紹一下 B...

eccozhou 2019-08-20 17:40 評論0 收藏0
ES2015入門系列11-模塊 Modules

摘要：先來介紹下語法官方示例代碼模塊中對象暴露只需要即可，可以是任何類型的對象。手動導入模塊下某個對象，需要和模塊中定義的名字對應，順序無關。看一下官方介紹： Language-level support for modules for component definition. JS在ES2015開始原生支持模塊化開發，我們之前也曾借助于諸如： AMD CommonJS 等的模塊加載...

HitenDev 2019-08-20 17:40 評論0 收藏0
ES2015入門系列5-解構賦值

摘要：用過的同學肯定見過類似下面的代碼這就是為帶來的另一個新的語法解構賦值。解構賦值是用來讓我們從數組或者對象中提取數據賦值給不同的變量。解構賦值操作不會拋錯，如果沒有找到，將會用賦值過去。用過ReactNative的同學肯定見過類似下面的代碼: import { Text, View } from react-native; 這就是ES2015為JavaScript帶來的另一個新的語法：...

chuyao 2019-08-20 17:40 評論0 收藏0
ES2015入門系列3-箭頭函數

摘要：箭頭函數是用新的語法書寫的匿名函數如等同于下面使用的寫法可能一開始無法接受，但慢慢的會發現箭頭函數帶來的快感不言而喻。作為一個后端人士希望也能支持該語法。箭頭函數(Arrows), 是用新的 => 語法書寫的匿名函數, 如: [1, 2, 3].map(n => n + 1); 等同于下面使用ES5的寫法: [1, 2, 3].map(function(n) { return n...

syoya 2019-08-20 17:37 評論0 收藏0