前言

網(wǎng)上有很多關(guān)于ES6的文章教程桶蝎，但是總覺得比較教科書話驻仅，繁瑣難懂，因此特意在此對(duì)ES6常用的新特性登渣，做了一些簡(jiǎn)化概述噪服，以幫助新人理解。

一胜茧、箭頭函數(shù)

let fn = () => {
  console.log('箭頭函數(shù)');
}
// 回調(diào)函數(shù)中的運(yùn)用
let arr = [1, 2];
let increaseArr = arr.map((item, index) => {
  return item + 1;
});

1粘优、參數(shù)只有一個(gè)，那么()可以不要呻顽；如果函數(shù)主體只有return雹顺，那么{}可以不要；下面是個(gè)例子：

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

2廊遍、如果箭頭函數(shù)是對(duì)象中的屬性值嬉愧，那么this作用域會(huì)跳出對(duì)象

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

二、函數(shù)參數(shù)

1喉前、參數(shù)擴(kuò)展

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

2英染、默認(rèn)參數(shù)

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

三、解構(gòu)賦值

1被饿、左右兩邊的數(shù)據(jù)結(jié)構(gòu)必須一致

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

2四康、右邊必須是一種有效的JavaScript數(shù)據(jù)類型

// 這樣會(huì)報(bào)錯(cuò)，因?yàn)橛疫厈1, 2}狭握，不是JavaScript中6種數(shù)據(jù)類型中的任何一種
let {a, b} = {1, 2};

3闪金、申明和賦值不能分開

// 這樣會(huì)報(bào)錯(cuò)
let [a, b];
[a, b] = [1, 2];

四、字符串模板

過去ES5字符串拼接寫法

let data = {
  title: '標(biāo)題',
  content: '內(nèi)容文字'
};
let divHtml = '<div>'
    +'<span class="title">' + data.title + '</span>'
    +'<span class="content">' + data.content + '</span>'
  +'</div>';

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

let data = {
  title: '標(biāo)題',
  content: '內(nèi)容文字'
};
let divHtml = `<div>
        <span class="title">${data.title}</span>
        <span class="content">${data.content}</span>
    </div>`;

五、對(duì)象簡(jiǎn)寫

鍵和值恃疯，如果值是個(gè)變量漏设，并且變量名和鍵同名，可以這樣寫：

let name = 'Dave',
    age = 26;
let person = {
  name,
  age
}

如果值是函數(shù)今妄，可以這么簡(jiǎn)寫

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

六郑口、面向?qū)ο?/h3>

1鸳碧、類（構(gòu)造函數(shù)）
回往ES5過去的寫法

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

ES6模仿JAVA的寫法

class User{
  // 這是類的寫法，不是ES6函數(shù)簡(jiǎn)寫
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }
  
  sayName() {
    console.log(this.name);
  }
}

2犬性、繼承
回往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類寫法內(nèi)部自帶的瞻离，相當(dāng)于User.call(this, name, age);
    super(name, age);
    this.vipCode = vipCode;
  }

  showVipCode() {
    console.log(this.vipCode);
  }
}

七、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}`);
});

上面看起來乒裆，就是兩個(gè)普通的回調(diào)函數(shù)套利，簡(jiǎn)直就是多此一舉。是的鹤耍！但是有一些些區(qū)別肉迫；Promise承諾，會(huì)記住數(shù)據(jù)稿黄，任何時(shí)候去調(diào)用昂拂，都可以拿到想要的數(shù)據(jù)：

let res = p();
// 下面任何時(shí)候調(diào)用，都可以拿到返回的數(shù)據(jù)抛猖。
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);
  });
});
// 批量請(qǐng)求格侯；獲取到所有請(qǐng)求數(shù)據(jù)，組成數(shù)組返回
Promise.all([p1, p2]).then(arr => {
  // arr: [data1, data2]
  console.log(arr);
});
// 競(jìng)賽請(qǐng)求财著；獲取到請(qǐng)求最快的數(shù)據(jù)
Promise.race([p1, p2]).then(data => {
  console.log(data);
});

八联四、set數(shù)據(jù)結(jié)構(gòu)

// 實(shí)例化set，參數(shù)是個(gè)可選參數(shù)撑教，類型為數(shù)組 | set實(shí)例化對(duì)象
let set = new Set(); 
let set = new Set([1, 2]);
// 添加成員
set.add(3).add('abc').add({name: 'Dave'});
// 刪除成員
set.delete('abc');
// 查找是否存在某個(gè)成員
set.has('abc');
// 清空
set.clear();
// 長(zhǎng)度
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) => {})

下面是一種數(shù)組去重常用技巧

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

set如何使用數(shù)組方法（Set原型對(duì)象本身沒有的方法）朝墩，例如map、filter

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

九伟姐、map數(shù)據(jù)結(jié)構(gòu)

map類似對(duì)象收苏，但對(duì)象屬性只能是字符串，而map可以是其他6中數(shù)據(jù)類型

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) => {})

十愤兵、模塊化import用法

被引入的modules.js鹿霸；下面介紹三種導(dǎo)出方法：

// 可以直接申明賦值導(dǎo)出
export let a = 3;
// 可以先申明賦值，然后再導(dǎo)出秆乳；分開來寫
let b = 4;
let person = {name: 'Dave'}
export {
  b,
  person
}
// 還可以匿名導(dǎo)出懦鼠，但一個(gè)模塊只能有一個(gè)默認(rèn)（匿名）導(dǎo)出
export default {
  b,
  person
}

需要引入的imports.js

// 默認(rèn)（匿名）的導(dǎo)入需要給它取一個(gè)變量名，名字任意但一定要放在最前面
import mod, {b, person} from 'modules.js';
// 給在modules.js指定變量名導(dǎo)出的變量屹堰，取別名
import mod, {b as a, person as dave} from 'modules.js';
// 統(tǒng)一導(dǎo)入到一個(gè)變量（對(duì)象）
import * as modules from 'modules.js';
import mod, * as modules from 'modules.js';
// 導(dǎo)入后再導(dǎo)出肛冶；不會(huì)導(dǎo)出已導(dǎo)入模塊中的默認(rèn)導(dǎo)出
export * from 'modules.js';
// 導(dǎo)出已導(dǎo)入模塊中的默認(rèn)導(dǎo)出
import mod from 'modules.js';
export default mod;

十一、generator中的異步函數(shù)async

// generator函數(shù)寫法
function *ye() {
  console.log(1);
  yield;
  console.log(2);
  yield;
  console.log(3);
  return;
}
// 調(diào)用
let yeObj = ye();
ye.next();
ye.next();

這樣看起來扯键，沒什么用睦袖。重點(diǎn)說下：異步函數(shù)async

// async需要await配合，await需要Promise配合荣刑；三者結(jié)合起來使用
async function getDatas() {
  await new Promise(resolve => {
    $.get('/xxx1', function (data1) {
      // 這里的resolve是必須的馅笙，不執(zhí)行resolve伦乔，await將不起作用
      resolve(data1);
    });
  }).then(data1 => {});
  await new Promise(resolve => {
    $.get('/xxx2', function (data2) {
      // 這里的resolve是必須的，不執(zhí)行resolve延蟹，await將不起作用
      resolve(data2);
    });
  }).then(data2 => {});
}
getDatas();