摘要：采用二八定律，主要涉及常用且重要的部分。對象是當前模塊的導出對象，用于導出模塊公有方法和屬性。箭頭函數函數箭頭函數把去掉，在與之間加上當我們使用箭頭函數時，函數體內的對象，就是定義時所在的對象，而不是使用時所在的對象。

原文博客地址：https://finget.github.io/2018/05/10/javascript-es6/

現在基本上開發中都在使用ES6，瀏覽器環境支持不好，可以用babel插件來解決。

采用‘二八定律’，主要涉及ES6常用且重要的部分。

ES6模塊化如何使用，開發環境如何打包

Class和普通構造函數有何區別

Promise的基本使用和原理

總結一下ES6其他常用功能

// util1.js
export default {
  a : 100
}

const str = "hello";
export default str;
// export default const str = "hello"; X

// util2.js
export function fn1() {
  console.log("fn1");
}
export function fn2() {
  console.log("fn2");
}
export const fn3 = ()=> {
  console.log("fn3");
}

// index.js
import str from "./util1.js";
import {fn1 , fn2} from "./util2.js";
import * as fn from "./util2.js";
console.log(str);
fn1();
fn2();

fn.fn1();
fn.fn2();

export default 默認輸出這個，然后在import的時候就會拿到默認輸出的內容。例子中默認輸出的a=100。
export多個內容，在import時需要使用{}進行引用你需要的內容。

export和export default與exports和module.exports的區別

require: node 和 es6 都支持的引入
export / import : 只有es6 支持的導出引入
module.exports / exports: 只有 node 支持的導出

module.exports 初始值為一個空對象 {}

exports 是指向的 module.exports 的引用

require() 返回的是 module.exports 而不是 exports

Node里面的模塊系統遵循的是CommonJS規范。

CommonJS定義的模塊分為: 模塊標識(module)、模塊定義(exports) 、模塊引用(require)

在nodejs，exports 是 module.exports的引用，初始化時，它們都指向同一個{}對象。

對象在JS中屬于引用類型，意思就是exports和module.exports是指向同一個內存地址的。

看下面的例子：

exports.fn = function(){
  console.log("fn");
}
// 這兩種情況的效果是一樣的，上面說了exports與`module.exports初始化同一個對象，所以兩種定義方就是給這個同對象定義了一個fn的屬性，該屬性值為一個函數。
module.exports.fn = function(){
  console.log("fn");
}

exports = function(){
  console.log("fn");
}
// 這兩種情況就不一樣了。上面的exports想當于指向了另一個內存地址。而下面這種情況是可以正常導出的。
module.exports = function(){
  console.log("fn");
}

exports對象是當前模塊的導出對象，用于導出模塊公有方法和屬性。別的模塊通過require函數使用當前模塊時得到的就是當前模塊的exports對象。

module.exports 的使用

// sayHello.js

function sayHello() {
  console.log("hello");
}

module.exports = sayHello;

// app.js
var sayHello = require("./sayHello");

sayHello();

定義一個sayHello模塊，模塊里定義了一個sayHello方法，通過替換當前模塊exports對象的方式將sayHello方法導出。
在app.js中加載這個模塊，得到的是一個函數，調用該函數，控制臺打印hello。

// sayWorld.js
module.exports = function(){
  console.log("world");
}
// app.js
var sayWorld = require("./sayWorld"); // 匿名替換
sayWorld();

exports 導出多個變量

當要導出多個變量怎么辦呢？這個時候替換當前模塊對象的方法就不實用了，我們需要用到exports對象。

// userExports.js
exports.a = function () {
  console.log("a exports");
}
 
exports.b = function () {
  console.log("b exports");
}

// app.js
var useExports = require("./userExports");
useExports.a();
useExports.b();
// a exports
// b exports

當然，將useExports.js改成這樣也是可以的:

// userExports.js
module.exports.a = function () {
  console.log("a exports");
}
 
module.exports.b = function () {
  console.log("b exports");
}

在實際開發當中可以只使用module.exports避免造成不必要的問題。

babel

Babel中文網

nodejs環境 npm init

npm i babel-core babel-preset-es2015 babel-preset-latest --save-dev

創建.babelrc文件

npm i --global babel-cli

// .babelrc
{
  "presets": ["es2015","latest"],
  "plugins": []
}

webpack

四大維度解鎖webpack3筆記

rollup.js

Rollup.js官網

npm init

安裝 rollup.js需要的一些插件

npm i rollup rollup-plugin-node-resolve rollup-plugin-babel babel-core babel-plugin-external-helpers babel-preset-latest --save-dev

配置 .babelrc

配置 rollup.config.js

rollup 功能單一（打包js模塊化）， webpack功能強大
工具盡量功能單一，可繼承，可擴展

// .babelrc
{
  "presets":[
    ["latest", {
      "es2015":{
        "modules": false
      }
    }]
  ],
  "plugins":["external-helpers"]
}

// rollup.config.js
import babel from "rollup-plugin-babel";
import resolve from "rollup-plugin-node-resolve";

export default {
  entry: "src/index.js",
  format: "umd",
  plugins: [
    resolve(),
    babel({
      exclude: "node_modules/**"
    })
  ],
  dest: "build/bundle.js"
}

// package.json
...
"scripts":{
  "start": "rollup -c rollup.config.js"
}
...

npm run start

沒有模塊化

AMD成為標準，require.js

前端打包工具，使得nodejs模塊化（CommonJS）可以被使用

ES6出現，想統一現在所有模塊化標準

nodejs積極支持，瀏覽器尚未統一

你可以自造lib，但是不要自造標準！！！

// 構造函數
function MathHandle(x, y){
  this.x = x;
  this.y = y;
}
// 原型擴展
MathHandle.prototype.add = function(){
  return this.x + this.y;
}

// 創建實例
var m = new ManthHandle(1,2);
console.log(m.add()); // 3

class MathHandle { // 直接跟大括號
  constructor(x, y) {
    this.x = x;
    this.y = y;
  }
  
  add() {
    return this.x + this.y;
  }
}
const m = new ManthHandle(1,2);
console.log(m.add()); // 3

typeof MathHandle  = "function"
MathHandle其實是個function,‘構造函數’
MathHandle === MathHandle.prototype.constructor

// 動物
function Animal() {
  this.eat = function() {
    console.log("animal eat");
  }
}
// 狗
function Dog() {
  this.bark = function(){
    console.log("dog bark");
  }
}
// 綁定原型，實現繼承
Dog.prototype = new Animal();
// 實例化一只狗
var hashiqi = new Dog();

// hashiqi就有了eat方法
hashiqi.eat(); // animal eat

廖雪峰老師的原型繼承：點這里

class Animal {
  constructor(name){
    this.name = name;
  }
  eat() {
    console.log(`${this.name} eat`);
  }
}

class Dog extends Animal { // extends 繼承
  constructor(name){
    super(name); // 必須*  記得用super調用父類的構造方法!
    this.name = name;
  }
  say() {
    console.log(`${this.name} say`);
  }
}

const dog = new Dog("hashiqi");
dog.eat(); // hashiqi eat

解決回調地獄（Callback Hell）
詳細點的Promise：點這里

new Promise((resolve, reject) => {
  // 一段耗時很長的異步操作
    .....
  resolve(); // 數據處理完成
  reject(); // 數據處理出錯
}).then(function A() {
  // 成功，下一步
}, function B(){
  // 失敗，做相應處理
})

我最開始接觸到Promise的時候，一直傻了吧唧的在想resolve()和reject()在什么時候調用。
resolve()和reject()就是為后面then()中的兩個函數服務的。

new Promise((resolve, reject) => {
  setTimeout(()=>{
    resolve("good，我要傳給then里的一個函數");
  },2000);
  setTimeout(()=>{
    reject("錯了，把我給我then里的第二個函數");
  },2000);
}).then(value => {
  console.log(value); // good，我要傳給then里的一個函數
},value => {
  console.log(value); // 錯了，把我給我then里的第二個函數
});

/**
 * 基于jquery封裝一個promise ajax請求
 * @param  {[type]} param [選項]
 * @return {[type]}       [description]
 */
request(param){
  return new Promise((resolve,reject) => {
    $.ajax({
      type : param.type || "get",
      url : param.url || "",
      dataType : param.dataType || "json",
      data : param.data || null,
      success:(res)=>{ // 用箭頭函數避免this指向問題
        if (0 === res.status) {
           typeof resolve === "function"&&resolve(res.data, res.msg); // 成功就把請求到的數據用resolve返回，這樣就可以在then的第一個函數里拿到值了
        } else {
           typeof reject === "function"&&reject(res.msg || res.data); // 失敗就返回錯誤信息
        }

      },
      error:(err)=>{ // 這個失敗是請求失敗，上面那個失敗是請求成功發送了，但是沒有拿到數據失敗了
         typeof reject === "function"&&reject(err.statusText);
      }
    })
  })
}

let const與var都是用來定義變量的，不同的是let自帶作用域，const不能重復賦值。

let name = "FinGet"
while (true) {
    let name = "GetFin"
    console.log(name)  //GetFin
    break
}
console.log(name)  //FinGet

let定義的變量只在包含它的代碼塊內有用

const PI = 3.1415926;
PI = 3.14; // 錯誤

let name = "FinGet";
let age = 22;
// js
var str = "我是"+ name+",今年"+age+"歲"; // 很麻煩

let str1 = `我是${name},今年${age}歲`; // 簡單多了

模板字符串就是用`（Tab鍵上面那個）包含，變量就是用${}`表示

let obj = {
  name: "FinGet",
  age: 22,
  job: "前端",
  addr: "成都"
}
let {name,age} = obj;
console.log(name); // FinGet
console.log(age); // 22

還可以反過來：

let  name = "FinGet";
let  age = 22;
let  job = "前端";
let  addr = "成都";

let obj = {name,age,job,addr};
//obj = {name: "FinGet",age: 22,job: "前端",addr: "成都"}

另外一個var帶來的不合理場景就是用來計數的循環變量泄露為全局變量，看下面的例子：

// js
var a = [];
for (var i = 0; i < 10; i++) {
  a[i] = function () {
    console.log(i);
  };
}
a[6](); // 10

let 自帶塊級作用域

// ES6
var a = [];
for (let i = 0; i < 10; i++) {
  a[i] = function () {
    console.log(i);
  };
}
a[6](); // 6

原生js想實現這種效果，需要用到閉包：

var a = [];
for (var i = 0; i < 10; i++) {
  (function(j){ // 立即執行函數
    a[j] = function() {
      console.log(j);
    }
  }(i))
}
a[6](); // 6

立即執行函數形成了一個塊級作用域，將參數j保存了下來，并不會被‘污染’，原生js沒有塊級作用域，var在for中定義的變量是個全局變量，可以在外部訪問，也就可以被改變，所以每次for循環都是重置修改i的值，導致最后只能輸出10。

default很簡單，意思就是默認值。大家可以看下面的例子，調用animal()方法時忘了傳參數，傳統的做法就是加上這一句type = type || "cat" 來指定默認值。

function animal(type){
    type = type || "cat"  
    console.log(type)
}
animal()

如果用ES6我們而已直接這么寫：

function animal(type = "cat"){
    console.log(type)
}
animal(); // cat

最后一個rest語法也很簡單，直接看例子：

function animals(...types){
    console.log(types)
}
animals("cat", "dog", "fish") //["cat", "dog", "fish"]

而如果不用ES6的話，我們則得使用ES5的arguments。

// js函數
function (a,b){
  console.log(a+b);
}

// es6箭頭函數
(a,b) => {
  console.log(a+b);
}

把function去掉，在()與{}之間加上=>

當我們使用箭頭函數時，函數體內的this對象，就是定義時所在的對象，而不是使用時所在的對象。
并不是因為箭頭函數內部有綁定this的機制，實際原因是箭頭函數根本沒有自己的this，它的this是繼承外面的，因此內部的this就是外層代碼塊的this。

創建了一個前端學習交流群，感興趣的朋友，一起來嗨呀！