經常會用到的es6的知識點

經常會用到的es6的知識點

提到es6我們就來說說javascript，es6也是ES2015

1. 1995：JavaScript誕生，它的初始名叫LiveScript。

2. 1997：ECMAScript標準確立。

3. 1999：ES3出現，與此同時IE5風靡一時。

4. 2000–2005： XMLHttpRequest又名AJAX， 在Outlook Web Access (2000)、Oddpost (2002)，Gmail (2004)和Google Maps (2005)大受重用。

5. 2009： ES5出現，（就是我們大多數人現在使用的）例如foreach，Object.keys，Object.create和JSON標準。

6. 2015：ES6/ECMAScript2015出現。 2015 年，負責制定 ECMAScript 規範草案的委員會 TC39 決定將定義新標準的制度改為一年一次
7. 2016：ES7/ECMAScript2016出現。

8. 2017：ES8/ECMAScript2017出現。

說到es6就會想到相容，我給大家推薦兩個鏈接大家可以去看看，還是很好的

https://kangax.github.io/compat-table/es6/

http://kangax.github.io/compat-table/es2016plus/

es6的使用方式

可以將es6的代碼轉成es5的代碼,Babel Google traceur這是兩個轉碼器，大家可以去試一下

Babel是一個廣泛使用的ES6轉碼器，可以將ES6代碼轉為ES5代碼，從而在現有環境執行。大家可以選擇自己習慣的工具來使用使用Babel

js中var、let、const的區別

var！！！！

var定義的變數可以修改，如果不初始化會輸出undefined，不會報錯

var分為兩種：局部作用域和函數作用域

let！！！！

let是塊級作用域，函數內部使用let定義後，對函數外部無影響。

let是塊級作用域，跟var不同的是，let沒有前置功能，不能重覆聲明

const！！！！

const定義的變數不可以修改，而且必須初始化。

const是常量，不可改變，一般大寫，也是塊級作用域。。。

es6模板字元串、增強的對象字面、解構賦值

es6模板字元串

模板字元串是允許嵌入表達式的字元串字面量。你可以使用多行字元串和字元串插值功能。它們在ES2015規範的先前版本中被稱為“模板字元串。

1. ``撇號

2. 綁定變數

3. 字元串支持多行

4. ...擴展運算符

增強的對象字面

對象字面量的輸出方式有兩種：傳統的‘。’，以及數組方式，只不過用數組方式輸出時，方括弧裡面要用引號括起來

對象字面量的定義方式，可以輕鬆搞定函數大量參數需要一一對應輸出的情況。他的對策就是給函數傳入一個對象，而這個對象是用字面量的方式定義的，屬性和值對應的方式可以一目瞭然他們的關係，因為函數只是一段代碼，必須調用才能執行

1. 字面量對象屬性能夠簡寫

2. 字面量對象方法可以簡寫省去function關鍵字

3. 對象屬性 可以寫 自動計算的屬性

4. 繼承——port——

解構賦值

解構賦值可將數組的元素或對象的屬性賦予給另一個變數，該變數的定義語法與數組字面量或對象字面量很相似。此語法非常簡潔，相比於傳統的屬性訪問方式，更加直觀清晰。

事實上，用變數來描述並不恰當，因為你可以對任意深度的嵌套數組進行解構：

var [foo, [[bar], baz]] = [1, [[2], 3]];
console.log(foo);
// 1
console.log(bar);
// 2
console.log(baz);
// 3

可以在對應位留空來跳過被解構數組中的某些元素：

var [,,third] = ["foo", "bar", "baz"];
console.log(third);
// "baz"

es6的擴展運算符，箭頭函數，函數參數

擴展運算符的幾個作用

1. 展開數組
2. 數組的拷貝
3. 數組的合併
4. 展開函數的調用

箭頭函數

//箭頭函數 =>
let jian = () => {
    console.log("Hello")
}
jian();
//沒有參數
()=>{
    console.log("你好")
};
//有參數
(name)=>{
    console.log(name);
};
//可以省略()
let d = name=>{
    console.log(name);
}
d('jiang');
//兩個參數
(name,age)=>{
    console.log(name,age);
};
//省略後的
let c (a,b)=>a+b;
(a,b)=>{console.log(a+b);
console.log(c);

函數參數

函數參數分為三種

1. 預設參數
2. 擴展參數
3. 剩餘參數

Symbol

Symbol是ES6新增的一種值類型數據，表示一種絕不重覆的值

let m = 1;
let l = 1;
console.log(m==l);//列印出true

let mm = Symbol();
let ll = Symbol();
console.log(mm==ll);//列印出flase

註意，這裡 Symbol 前面不能使用 new 操作符。

如果要獲取對象 symbol 屬性，需要使用 Object.getOwnPropertySymbols(o)。

Set和WeakSet

ES6 新增 2種 數據結構(New data structures)類型, Set和Map

Set和WeakSet 數據結構是ES6新增。

它與數組非常相似，但是Set數據結構的成員都是唯一的。

特別說明:Set中只能添加一個NaN

// Sets
var s = new Set();
s.add("hello").add("goodbye").add("hello");
s.size === 2;
s.has("hello") === true;

// Weak Sets
var ws = new WeakSet();
ws.add({ data: 42 });

類似於 WeakMap，WeakSet 對象可以讓你在一個集合中保存對象的弱引用，在 WeakSet 中的對象只允許出現一次：

var ws = new WeakSet();
var obj = {};
var foo = {};

ws.add(window);
ws.add(obj);

ws.has(window); // true
ws.has(foo);    // false, foo 沒有添加成功

ws.delete(window); // 從結合中刪除 window 對象
ws.has(window);    // false, window 對象已經被刪除

Map和WeakMap

Map和WeakMap是ES6新增的數據結構 事實上每個對象都可以看作是一個 Map。 它們本質與對象一樣，都是鍵值對的集合，但是他們與Object對象主要的不同是，鍵可以是各種類型的數值，而Object對象的鍵只能是字元串類型或者Symbol類型值 。Map和WeakMap是更為完善的Hash結構。

// Maps
var m = new Map();
m.set("hello", 42);
m.set(s, 34);
m.get(s) == 34;

// Weak Maps
var wm = new WeakMap();
wm.set(s, { extra: 42 });
wm.size === undefined

WeakMap數據結構 WeakMap結構與Map結構基本類似。 區別是它只接受對象作為鍵名，不接受其他類型的值作為鍵名。鍵名是對象的弱引用，當對象被回收後，WeakMap自動移除對應的鍵值對，WeakMap結構有助於防止記憶體泄漏。

var wm = new WeakMap(); 
var obj = new Object(); 
wm.set(obj,'對象1'); 
obj=null; 
wm.get(obj);    //undefined 
wm.has(obj);    //false

由於WeakMap對象不可遍歷，所以沒有size屬性。