ES6簡介

###前言 網上有不少關於ES6的文章教程，可是總以爲比較教科書話，繁瑣難懂，所以特地在此對ES6經常使用的新特性，作了一些簡化概述，以幫助新人理解。

1、箭頭函數

let fn = () => {
  console.log('箭頭函數');
}
// 回調函數中的運用
let arr = [1, 2];
let increaseArr = arr.map((item, index) => {
  return item + 1;
});
複製代碼

一、參數只有一個，那麼()能夠不要；若是函數主體只有return，那麼{}能夠不要；下面是個例子：

let arr = [1, 2];
let increaseArr = arr.map(item => item + 1);
複製代碼

二、若是箭頭函數是對象中的屬性值，那麼this做用域會跳出對象

window.color = 'blue';
let obj = {
  color: 'red',
  sayColor: () => {
    console.log(this.color);
  }
 };
obj.sayColor(); // blue
複製代碼

2、函數參數

一、參數擴展

let showArg = (a, b, ...args) => {
  console.log(...args);
}
showArg(1, 2, 3, 4, 5); // 3 4 5
複製代碼

二、默認參數

let sum = (a=2, b=5) => {
  return a + b;
}
sum(); // 7
sum(5); // 10
sum(5, 10); // 15
複製代碼

3、解構賦值

一、左右兩邊的數據結構必須一致

let [a, b, c] = [1, 2, 3];
let {a, b, c} = {a: 1, b: 2, c:3};
let [{a, b}, c] = [ {a: 1, b: 2}, 3];
// 以上任何一種賦值方式：console.log(a, b, c); // 1 2 3
複製代碼

二、右邊必須是一種有效的JavaScript數據類型

// 這樣會報錯，由於右邊{1, 2}，不是JavaScript中6種數據類型中的任何一種
let {a, b} = {1, 2};
複製代碼

三、申明和賦值不能分開

// 這樣會報錯
let [a, b];
[a, b] = [1, 2];
複製代碼

4、字符串模板

過去ES5字符串拼接寫法

let data = {
  title: '標題',
  content: '內容文字'
};
let divHtml = '<div>'
    +'<span class="title">' + data.title + '</span>'
    +'<span class="content">' + data.content + '</span>'
  +'</div>';
複製代碼

ES6新字符串模板，新增特性：支持換行、${變量}

let data = {
  title: '標題',
  content: '內容文字'
};
let divHtml = `<div>
        <span class="title">${data.title}</span>
        <span class="content">${data.content}</span>
    </div>`;
複製代碼

5、對象簡寫

鍵和值，若是值是個變量，而且變量名和鍵同名，能夠這樣寫：

let name = 'Dave',
    age = 26;
let person = {
  name,
  age
}
複製代碼

若是值是函數，能夠這麼簡寫

let name = 'Dave',
    age = 26;
let person = {
  name,
  age,
  sayName() {
    console.log(this.name)
  }
}
複製代碼

6、面向對象

一、類（構造函數） 回往ES5過去的寫法

function User(name, age) {
  this.name = name;
  this.age = age;
  this.sayName = function () {
    console.log(this.name);
  }
}
複製代碼

ES6模仿JAVA的寫法

class User{
  // 這是類的寫法，不是ES6函數簡寫
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }
  
  sayName() {
    console.log(this.name);
  }
}
複製代碼

二、繼承 回往ES5過去的寫法

function VipUser(vipCode) {
  this.vipCode = vipCode;
  this.showVipCode = function() {
    console.log(this.vipCode);
  }
}
VipUser.prototype = new User(name, age);
VipUser.prototype.constructor = VipUser;
複製代碼

ES6模仿JAVA的寫法

class VipUser extends User{
  constructor(name, age, vipCode) {
    // super方法是ES6類寫法內部自帶的，至關於User.call(this, name, age);
    super(name, age);
    this.vipCode = vipCode;
  }

  showVipCode() {
    console.log(this.vipCode);
  }
}
複製代碼

7、Promise

let p = () => {
  return new Promise((resolve, reject) => {
    $.ajax({
      url: '/login?username=xxx&pass=xxx',
      success(data) {
        resolve(data);
      },
      error(data) {
        reject(data);
      }
    });
  });
}
p().then(data => {
  console.log(`success返回的data:${data}`);
}).catch(data => {
  console.log(`error返回的data:${data}`);
});
複製代碼

上面看起來，就是兩個普通的回調函數，簡直就是畫蛇添足。是的！可是有一些些區別；Promise承諾，會記住數據，任什麼時候候去調用，均可以拿到想要的數據：

let res = p();
// 下面任什麼時候候調用，均可以拿到返回的數據。
res.then(data => {
  console.log(`success返回的data:${data}`);
}).catch(data => {
  console.log(`error返回的data:${data}`);
});
複製代碼

下面兩種卻是有用的方法：

let p1 = new Promise(resolve => {
  $.get('/xxx1', (data1) => {
     resolve(data1);
  });
});
let p2 = new Promise(resolve => {
  $.get('/xxx2', (data2) => {
     resolve(data2);
  });
});
// 批量請求；獲取到全部請求數據，組成數組返回
Promise.all([p1, p2]).then(arr => {
  // arr: [data1, data2]
  console.log(arr);
});
// 競賽請求；獲取到請求最快的數據
Promise.race([p1, p2]).then(data => {
  console.log(data);
});
複製代碼

8、set數據結構

// 實例化set，參數是個可選參數，類型爲數組 | set實例化對象
let set = new Set(); 
let set = new Set([1, 2]);
// 添加成員
set.add(3).add('abc').add({name: 'Dave'});
// 刪除成員
set.delete('abc');
// 查找是否存在某個成員
set.has('abc');
// 清空
set.clear();
// 長度
set.size
// 遍歷
set.keys();
set.value();
set.entries();
for (let i of set.keys()){}
for (let i of set.value()){}
for (let [key, value] of set.entries()){}
for (let i of set){}
set.forEach((item, index) => {})
複製代碼

下面是一種數組去重經常使用技巧

let arr = [1,3,5,4,5,2,3];
let newArr = [...new Set(arr)];
複製代碼

set如何使用數組方法（Set原型對象自己沒有的方法），例如map、filter

let set = new Set([1, 2]);
set = new Set([...set].map(item => item * 2));
set = new Set([..set].filter(item => item < 2));
複製代碼

9、map數據結構

map相似對象，但對象屬性只能是字符串，而map能夠是其餘6中數據類型

let map = new Map();
map.set('key', 'value');
map.get('key');
map.delete('key');
map.has('key');
map.clear();
// 遍歷
map.keys();
map.value();
map.entries();
for (let i of map.keys()){}
for (let i of map.value()){}
for (let [key, value] of map.entries()){}
for (let i of map){}
map.forEach((item, index) => {})
複製代碼

10、模塊化import用法

被引入的modules.js；下面介紹三種導出方法：

// 能夠直接申明賦值導出
exports let a = 3;
// 能夠先申明賦值，而後再導出；分開來寫
let b = 4;
let person = {name: 'Dave'}
exports {
  b,
  person
}
// 還能夠匿名導出，但一個模塊只能有一個匿名導出
exports default{
  b,
  person
}
複製代碼

須要引入的imports.js

// 匿名的導入須要給它取一個變量名，名字任意但必定要放在最前面
import mod, {b, person} from 'modules.js';
// 給在modules.js指定變量名導出的變量，取別名
import mod, {b as a, person as dave} from 'modules.js';
// 統一導入到一個變量（對象）
import * as modules from 'modules.js';
複製代碼

11、generator中的異步函數async

// generator函數寫法
function *ye() {
  console.log(1);
  yield;
  console.log(2);
  yield;
  console.log(3);
  return;
}
// 調用
let yeObj = ye();
ye.next();
ye.next();
複製代碼

這樣看起來，沒什麼用。重點說下：異步函數async

// async須要await配合，await須要Promise配合；三者結合起來使用
async function getDatas() {
  await new Promise(resolve => {
    $.get('/xxx1', function (data1) {
      // 這裏的resolve是必須的，不執行resolve，await將不起做用
      resolve(data1);
    });
  }).then(data1 => {});
  await new Promise(resolve => {
    $.get('/xxx2', function (data2) {
      // 這裏的resolve是必須的，不執行resolve，await將不起做用
      resolve(data2);
    });
  }).then(data2 => {});
}
getDatas();
複製代碼