es6總結下

ES6總結上

七、for of 值遍歷與Symbol原始資料型別

for of 值遍歷
我們都知道for in 回圈用于遍歷陣列，類陣列或物件，ES6中新引入的for of回圈功能相似，不同的是每次回圈它提供的不是序號而是值，

var someArray = [ "a", "b", "c" ];
 
for (v of someArray) {
    console.log(v);//輸出 a,b,c
}

Symbol原始資料型別
引入了一種新的原始資料型別 Symbol ，表示獨一無二的值，最大的用法是用來定義物件的唯一屬性名，

let sy = Symbol("name1");
console.log(sy);   // Symbol(name1)
typeof(sy);        // "symbol"

八、Map 與 Set

Set 類似與陣列的一種資料結構
Set 物件存盤的值總是唯一的，所以需要判斷兩個值是否恒等，有幾個特殊值需要特殊對待：

• +0 與 -0 在存盤判斷唯一性的時候是恒等的，所以不重復；
  undefined 與 undefined 是恒等的，所以不重復；
  NaN 與 NaN 是不恒等的，但是在 Set 中只能存一個，不重復，
  兩個物件總是不相等的

set方法：
add() 添加
delete() 洗掉
clear() 清除所有
has() 查找有無
size() 回傳實體的成員總數
keys（） 遍歷屬性名
values() 遍歷屬性值
entries() 遍歷屬性名和屬性值的鍵值對

實體：

//Set本身是一個建構式，用來生成 Set 資料結構，
const s =newSet();
[2,3,5,4,5,2,2].forEach(x => s.add(x));
for(let i of s){
  console.log(i);
}// 2 3 5 4

// 去除陣列的重復成員
[...newSet(array)]

//去除字串里面的重復字符
[...newSet('ababbc')].join('')
// "abc"

//Array.from方法可以將 Set 結構轉為陣列，
const items =newSet([1,2,3,4,5]);
const array =Array.from(items);

向 Set 加入值的時候，不會發生型別轉換，所以5和"5"是兩個不同的值，Set 內部判斷兩個值是否不同，使用的演算法叫做“Same-value-zero equality”，它類似于精確相等運算子（===），主要的區別是向 Set 加入值時認為NaN等于自身，而精確相等運算子認為NaN不等于自身，

Map 資料結構，
它類似于物件，也是鍵值對的集合，但是“鍵”的范圍不限于字串，各種型別的值（包括物件）都可以當作鍵，也就是說，Object 結構提供了“字串—值”的對應，Map 結構提供了“值—值”的對應

Map方法：
set(“屬性名”,“屬性值”) 存值
get(“屬性名”)取值
has(“屬性名”)
delete(“屬性名”)
clear()
size()
keys（）遍歷屬性名
values()遍歷屬性值
entries()遍歷屬性名和屬性值的

//實體
const m = new Map();
const o = {p: 'Hello World'};
m.set(o, 'content')
m.get(o) // "content"

//觀察下面案例：
const map = new Map();
map.set(['a'], 555);
map.get(['a']) // undefined
//上面代碼的set和get方法，表面是針對同一個鍵，但實際上這是兩個不同的陣列實體，記憶體地址是不一樣的，因此get方法無法讀取該鍵，回傳undefined，

//下面代碼中，變數k1和k2的值是一樣的，但是它們在 Map 結構中被視為兩個鍵，
const map = new Map();
const k1 = ['a'];
const k2 = ['a'];
map
.set(k1, 111)
.set(k2, 222);
map.get(k1) // 111
map.get(k2) // 222
//由上可知，Map 的鍵實際上是跟記憶體地址系結的，只要記憶體地址不一樣，就視為兩個鍵，這就解決了同名屬性碰撞（clash）的問題，我們擴展別人的庫的時候，如果使用物件作為鍵名，就不用擔心自己的屬性與原作者的屬性同名，

九、Promise

Promise 的含義：
Promise 是異步編程的一種解決方案，比傳統的解決方案——回呼函式和事件——更合理和更強大
Promise物件是一個建構式，用來生成Promise實體，下面代碼創造了一個Promise實體，

function timeout(ms){
return	new Promise((resolve, reject)=>{
    setTimeout(resolve, ms,'done');
});
//Promise實體生成以后，可以用then方法分別指定resolved狀態和rejected狀態的回呼函式，
}
timeout(100).then((value)=>{
  console.log(value);
});

Promise建構式接受一個函式作為引數，該函式的兩個引數分別是resolve和reject，它們是兩個函式，由 JavaScript 引擎提供，不用自己部署，

resolve函式的作用是:
將Promise物件的狀態從“未完成”變為“成功”（即從 pending 變為 resolved），在異步操作成功時呼叫，并將異步操作的結果，作為引數傳遞出去；reject函式的作用是，將Promise物件的狀態從“未完成”變為“失敗”（即從 pending 變為 rejected），在異步操作失敗時呼叫，并將異步操作報出的錯誤，作為引數傳遞出去，

then方法
回傳的是一個新的Promise實體（注意，不是原來那個Promise實體），因此可以采用鏈式寫法，即then方法后面再呼叫另一個then方法，

getJSON("/posts.json").then(function(json) {
  return json.post;
}).then(function(post) {
  // ...
});

catch()方法
是用于指定發生錯誤時的回呼函式，如果異步操作拋出錯誤，狀態就會變為rejected，就會呼叫catch()方法指定的回呼函式，處理這個錯誤，另外，then()方法指定的回呼函式，如果運行中拋出錯誤，也會被catch()方法捕獲，

getJSON('/posts.json').then(function(posts) {
  // ...
}).catch(function(error) {
  // 處理 getJSON 和 前一個回呼函式運行時發生的錯誤
  console.log('發生錯誤！', error);
});

finally()方法
用于指定不管 Promise 物件最后狀態如何，都會執行的操作，

promise
.then(result => {···})
.catch(error => {···})
.finally(() => {···});

十、async await函式

async 是“異步”的簡寫，而 await 可以認為是 async wait 的簡寫，所以應該很好理 解 async 用于申明一個 function 是異步的，而 await 用于等待一個異步方法執行完成，

function timeout(ms) {
  return new Promise((resolve) => {
    setTimeout(resolve, ms);
  });
}
async function asyncPrint(value, ms) {
  await timeout(ms);
  console.log(value);
}
asyncPrint('hello world', 50);
//上面代碼指定 50 毫秒以后，輸出hello world

async函式會回傳一個promise物件，如果在函式中return一個值，那么該值會通過 Promise.resolve()傳遞出去
可以成為then方法回呼函式的引數，
async函式如果內部拋出錯誤，會導致回傳的 Promise 物件變為reject狀態，拋出的錯誤物件會被catch方法回呼函式接收到，

async function f() {
  return 'hello world';
}
f().then(v => console.log(v))
// "hello world"

await 命令
正常情況下，await命令后面是一個 Promise 物件，回傳該物件的結果，如果不是 Promise 物件，就直接回傳對應的值，

async function f() {
  // 等同于
  // return 123;
  return await 123;
}
f().then(v => console.log(v))
// 123

如果它等到的是一個 Promise 物件，await 就忙起來了，它會阻塞后面的代碼，等著 Promise 物件 resolve，然后得到 resolve 的值，作為 await 運算式的運算結果，

//借助await命令就可以讓程式停頓指定的時間
function sleep(interval) {
  return new Promise(resolve => {
    setTimeout(resolve, interval);
  })
}
// 用法
async function one2FiveInAsync() {
  for(let i = 1; i <= 5; i++) {
    console.log(i);
    await sleep(1000);
  }
}
one2FiveInAsync();

錯誤處理
await命令后面的 Promise 物件如果變為reject狀態，則reject的引數會被catch方法的回呼函式接收到，

async function f() {
  await Promise.reject('出錯了');
}
f()
.then(v => console.log(v))
.catch(e => console.log(e))
// 出錯了

任何一個await陳述句后面的 Promise 物件變為reject狀態，那么整個async函式都會中斷執行，有時，我們希望即使前一個異步操作失敗，也不要中斷后面的異步操作，這時可以將第一個await放在try…catch結構里面，這樣不管這個異步操作是否成功，第二個await都會執行，
如果await后面的異步操作出錯，那么等同于async函式回傳的 Promise 物件被reject，防止出錯的方法，也是將其放在try…catch代碼塊之中，

十一、module語法

ES6 的模塊自動采用嚴格模式，不管你有沒有在模塊頭部加上"use strict";尤其需要注意this的限制，ES6 模塊之中，頂層的this指向undefined，即不應該在頂層代碼使用this，

import和export命令：
export var a=1 可以匯出任何的變數宣告陳述句或者函式宣告陳述句 ，一定是完整的變數宣告陳述句
import {a} from “./a.js”

改名字：
匯出 export {原名 as 新名}
引入 import {匯出的名字 as 新名}

// 寫法一
export var m = 1;

// 寫法二
var m = 1;
export {m};

// 寫法三
var n = 1;
export {n as m};

//export陳述句輸出的介面，與其對應的值是動態系結關系，即通過該介面，可以取到模塊內部實時的值，上面代碼輸出變數foo，值為bar，500 毫秒之后變成baz，
export var foo = 'bar';
setTimeout(() => foo = 'baz', 500);

// 報錯
if (x === 2) {
  import MyModual from './myModual';
}
//import和export命令只能在模塊的頂層，不能在代碼塊之中（比如，在if代碼塊之中，或在函式之中）
//所以引入import()函式，支持動態加載模塊，

import()函式可以用在任何地方，不僅僅是模塊，非模塊的腳本也可以使用，它是運行時執行，也就是說，什么時候運行到這一句，就會加載指定的模塊，另外，import()函式與所加載的模塊沒有靜態連接關系，這點也是與import陳述句不相同，
注意點：import()加載模塊成功以后，這個模塊會作為一個物件，當作then方法的引數
import()也可以用在 async 函式之中：

async function main() {
  const myModule = await import('./myModule.js');
  const {export1, export2} = await import('./myModule.js');
  const [module1, module2, module3] =
    await Promise.all([
      import('./module1.js'),
      import('./module2.js'),
      import('./module3.js'),
    ]);
}
main();

export default 命令（默認匯出）
在一個檔案或模塊中，export、import 可以有多個，export default 僅有一個，

在瀏覽器中使用ES6模塊
瀏覽器加載 ES6 模塊，也使用

<script type="module" src="./foo.js"></script>
//瀏覽器對于帶有type="module"的<script>，都是異步加載，不會造成堵塞瀏覽器，即等到整個頁面渲染完，再執行模塊腳本，等同于打開了<script>標簽的defer屬性，
<!-- 等同于 -->
<script type="module" src="./foo.js" defer></script>