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. 字面量物件方法可以簡寫省去function關鍵字

2. 物件屬性可以寫自動計算的屬性

3. 繼承——port——
解構賦值

---

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

#

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

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

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

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

擴充運算子的幾個作用

---

#展開陣列

陣列的拷貝
陣列的合併
展開函數的呼叫
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);

---

函數參數

函數參數分為三種

---

預設參數

擴充參數
剩餘參數
3. #Symbol
   Symbol是ES6新增的一種值類型數據，表示一種絕不重複的值

let m = 1;let l = 1;console.log(m==l);//打印出truelet mm = Symbol();let ll = Symbol();console.log(mm==ll);//打印出flase

---

注意，這裡Symbol 前面不能使用new 操作符。 .getOwnPropertySymbols(o)。資料結構是ES6新增。

它與陣列非常相似，但是Set資料結構的成員都是唯一的。

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

// Setsvar s = new Set();s.add("hello").add("goodbye").add("hello");s.size === 2;s.has("hello") === true;// Weak Setsvar 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); // truews.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结构。

// Mapsvar m = new Map();m.set("hello", 42);m.set(s, 34);m.get(s) == 34;// Weak Mapsvar 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属性。

关键点：ES2015=ES6
最常用的ES6特性
ES5只有全局作用域和函数作用域，没有块级作用域，这带来很多不合理的场景。let则实际上为JavaScript新增了块级作用域。用它所声明的变量，只在let命令所在的代码块内有效。
块级作用域与函数声明问题：
函数能不能在块级作用域之中声明，是一个相当令人混淆的问题。
ES6引入了块级作用域，明确允许在块级作用域之中声明函数。

注意：ES6规定，块级作用域之中，函数声明语句的行为类似于let，在块级作用域之外不可引用。

当我们使用箭头函数时，函数体内的this对象，就是定义时所在的对象，而不是使用时所在的对象。
并不是因为箭头函数内部有绑定this的机制，实际原因是箭头函数根本没有自己的this，它的this是继承外面的，因此内部的this就是外层代码块的this
5.ES6的继承机制，实质是先创造父类的实例对象this（所以必须先调用super方法），然后再用子类的构造函数修改this。
6.template string
我们要插入大段的html内容到文档中时，传统的写法非常麻烦，所以之前我们通常会引用一些模板工具库

以上是es6常用知識點總結的詳細內容。更多資訊請關注PHP中文網其他相關文章！