ES6

先閱讀這個
http://gejiawen.github.io/2015/07/28/Javascript/ECMAScript6%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0%E7%B3%BB%E5%88%97/ECMAScript6%E6%96%B0%E7%89%B9%E6%80%A7%E7%AE%80%E4%BB%8B/

ES6的特性在chrome中默認是關閉的
Visit chrome://flags/#enable-javascript-harmony, enable this flag, restart Chrome

注意
請在 Chrome Canary 中使用新特性
至少我這里Chrome 44 在選擇打開后仍然無效

=> 箭頭函數

var arr = [1, 2, 3];// 傳統寫法
arr.forEach(function (v) {console.log(v);
});// 使用箭頭操作符
arr.forEach( v => console.log(v));

更多例子

// ES5
var total = values.reduce(function (a, b) {return a + b;
}, 0);// ES6
var total = values.reduce((a, b) => a + b, 0);

如果回調函數語句不止一行呢

// ES5
$("#confetti-btn").click(function (event) {playTrumpet();fireConfettiCannon();
});// ES6
$("#confetti-btn").click(event => {playTrumpet();fireConfettiCannon();
});

for of

• forEach有什么缺點呢
  不能使用 break 語句來跳出循環，也不能使用 return 語句來從閉包函數中返回。總之 沒有辦法中止 forEach 循環 如果要中止，可使用 Array.every 或 Array.some

• 如果使用for in呢

for (var index in myArray) { console.log(myArray[index]);
}

更不推薦 因為會遍歷到其他屬性上去

• for of 它支持 break、continue 和 return 語句。

for (var value of myArray) {console.log(value);
}

for-of 不僅僅是為數組設計，還可以用于類數組的對象，比如 DOM 對象的集合 NodeList

代碼來自
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for...of
目前Chrome Canary 46 并不支持

let articleParagraphs = document.querySelectorAll("article > p");for (let paragraph of articleParagraphs) {paragraph.classList.add("read");
}

Class

代碼來自
http://gejiawen.github.io/2015/07/28/Javascript/ECMAScript6%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0%E7%B3%BB%E5%88%97/ECMAScript6%E6%96%B0%E7%89%B9%E6%80%A7%E7%AE%80%E4%BB%8B/

// 類的定義
class Animal {// ES6中的構造器，相當于構造函數constructor(name) {this.name = name;}// 實例方法sayName() {console.log('My Name is ' + this.name);}
}// 類的繼承
class Programmer extends Animal {constructor(name) {// 直接調用父類構造器進行初始化super(name);}// 子類自己的實例方法program() {console.log('I\'am coding...');}// 靜態方法static LEVEL() {console.log('LEVEL BAD!');}
}// 一些測試
var doggy=new Animal('doggy'),
larry=new Programmer('larry');
doggy.sayName(); // ‘My name is doggy’
larry.sayName(); // ‘My name is larry’
larry.program(); // ‘I'm coding...’
Programmer.LEVEL(); // ‘LEVEL BAD!’

解構賦值

摘自>http://gejiawen.github.io/2015/07/28/Javascript/ECMAScript6%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0%E7%B3%BB%E5%88%97/ECMAScript6%E6%96%B0%E7%89%B9%E6%80%A7%E7%AE%80%E4%BB%8B/
利用這個特性，我們可以讓一個函數返回一個數組，然后利用解構賦值得到數組中的每一個元素。

function getVal() {return [1, 2];
}var [x, y] = getValue();
var [name, age] = ['larry', 26];
// 交換兩個變量的值
var [a, b] = [1, 2];
[a, b] = [b, a];
console.log('a: ' + a + ', b: ' + b);

新增集合 Map, Set, WeakMap, WeakSet

Set是單純的集合 很像數組

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

Map 很明顯啦 key-value

var m = new Map();
m.set("hello", 42);
m.set(s, 34);  //這個s 是上面的set
m.get(s) == 34;

WeakSet

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

WeakMap 簡單的鍵/值映射.但鍵只能是對象值,不可以是原始值.

var wm1 = new WeakMap();
var o1 = {};
wm1.set(o1, 37);
wm1.get(o1); //37

和Map Set 區別
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/WeakSet
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/WeakMap
references to objects in the collection are held weakly. If there is no other reference to an object stored in the WeakSet, they can be garbage collected. That also means that there is no list of current objects stored in the collection
The key in a WeakMap is held weakly. What this means is that, if there are no other strong references to the key, then the entire entry will be removed from the WeakMap by the garbage collector.

Array.from

這里的links 是真的數組喲 具備 forEach() 函數

var links = Array.from(document.querySelectorAll("aside > a"));
for (var l of links) {console.log(l.href);
}

轉載于:https://www.cnblogs.com/cart55free99/p/4734982.html

總結

以上是生活随笔為你收集整理的ES6 新特性的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。