第一眼——ES6

愈來愈多的框架推薦使用ES6進行高效開發，node也早已支持ES6，那不如就偷偷瞄一眼兒這性感的「編程語言」？
獻給初學者

Go~

ES6的一些特性

檢測本地是否支持ES6環境
簡便方法：直接在瀏覽器調試工具下嘗試輸入Promise（ES6的新API，用於異步事件的處理），若是能打印出其構造函數，則支持（若是真有瀏覽器光是支持了Promise而不支持ES6，那我服！）

在開發環境裏面使用ES6
webpack+babel 做爲轉譯工具進行ES6到ES5的編譯
wp的配置詳見
《webpack的安裝及配置》

• 安裝插件：
  babel-loader

npm install babel-loader

babel-core

npm install babel-core

babel-es2015-transform

npm install babel-babel-transform

• 在webpack.config.js的module屬性中的loaders字段加入

{
     test: /\.js$/,
     loader: 'babel'
}

• 在項目根目錄下建立配置文件.babelrc

{
  'presets': ['es2015']
}

---

一些新東西

1. class
   類！

咱們經過一個demo來初見一下js的class

class Student {
        getName() {
              console.log( ' This is es6 style ' );
        }  
        //注意：這裏不用逗號
        getClass() {
              console.log( 'gp02' );
        }
}

1. let
   塊級做用域變量聲明

之前經過var聲明的變量由於變量提高的緣故，若非在函數做用域內聲明，則爲全局變量，而let則是解決了這個問題
一個實用場景：

//<=ES5
for ( var i = 0; i < 10; i ++ ) {
}
console.log( i );//9  變量提高到了全局
//ES6
for ( let ii = 0; ii < 10; i ++ ) {
}
console.log( ii );//undefined  變量只在for循環塊級做用域中生效

Q：如何造成塊級做用域？
大括號包圍則造成一個塊級做用域，如函數、循環、判斷、選擇等結構

{
     let a = 0;
}
console.log( a );//undefined
let k = 0;
console.log( k );//0;

1. const
   靜態變量

const NAME = 'Samuel';
NAME = 'Lucifer';
console.log( NAME ); //報錯，靜態變量不能被從新複製，它至關於一個常量

1. 箭頭函數

   • 用=>來表示匿名函數function() {}

   • 若是沒有=>後沒有{},則表示返回=>後的內容

const A=(a, b)=>a+b;

等價於

const A = function(a, b) {
        return a+b;
}

• 方便回調函數的定義

fetch(url).then((data)=>{
        console.log( data );
        //從寫法上來講也體現了回調函數的意義，「拿到data了，接着作點什麼」
});

1. 模塊化

• ES5的模塊化

關鍵字：require module exports
遵循CommonJS規範
詳見：前端模塊化的那些事兒

• ES6的模塊化

關鍵字：import（導入） export（導出）
module.js

var number = 20;
//經過export導出
export default number

import.js

//經過import引入module模塊
import num from './module.js'  //這裏是module.js的相對路徑
//num對應module的出口number
console.log( num );//20

---

第一眼差很少看到這兒吧。別色眯眯的不想走啦！
行行行，再看一眼：

瞧得咋地？A bright new future is coming！（半夜看的同窗，對不起！）4不4很酥胡~。:)解決了之前那些無處安放的對象和做用域問題。要是您忘不了，以後還有ES6的API。。。