箭頭操作符

如果你會C#或者Java，你肯定知道lambda表達(dá)式潘鲫，ES6中新增的箭頭操作符=>便有異曲同工之妙翁逞。它簡化了函數(shù)的書寫。操作符左邊為輸入的參數(shù)溉仑，而右邊則是進(jìn)行的操作以及返回的值Inputs=>outputs挖函。

我們知道在JS中回調(diào)是經(jīng)常的事，而一般回調(diào)又以匿名函數(shù)的形式出現(xiàn)浊竟，每次都需要寫一個function怨喘，甚是繁瑣津畸。當(dāng)引入箭頭操作符后可以方便地寫回調(diào)了。請看下面的例子必怜。

var array = [1, 2, 3];
//傳統(tǒng)寫法
array.forEach(function(v, i, a) {
    console.log(v);
});
//ES6
array.forEach(v = > console.log(v));

大家可以打開文章開頭提到的traceur在線代碼轉(zhuǎn)譯頁面輸入代碼來查看效果。

類的支持

ES6中添加了對類的支持梳庆，引入了class關(guān)鍵字（其實(shí)class在JavaScript中一直是保留字，目的就是考慮到可能在以后的新版本中會用到膏执，現(xiàn)在終于派上用場了）。JS本身就是面向?qū)ο蟮挠蟾。珽S6中提供的類實(shí)際上只是JS原型模式的包裝。現(xiàn)在提供原生的class支持后纸巷，對象的創(chuàng)建眶痰，繼承更加直觀了瘤旨，并且父類方法的調(diào)用竖伯，實(shí)例化，靜態(tài)方法和構(gòu)造函數(shù)等概念都更加形象化七婴。
下面代碼展示了類在ES6中的使用。再次啰嗦一句打厘，你可以將代碼貼到traceur自己查看運(yùn)行結(jié)果。

//類的定義
class Animal {
    //ES6中新型構(gòu)造器
    constructor(name) {
        this.name = name;
    }
    //實(shí)例方法
    sayName() {
        console.log('My name is '+this.name);
    }
}
//類的繼承
class Programmer extends Animal {
    constructor(name) {
        //直接調(diào)用父類構(gòu)造器進(jìn)行初始化
        super(name);
    }
    program() {
        console.log("I'm coding...");
    }
}
//測試我們的類
var animal=new Animal('dummy'),
wayou=new Programmer('wayou');
animal.sayName();//輸出 ‘My name is dummy’
wayou.sayName();//輸出 ‘My name is wayou’
wayou.program();//輸出 ‘I'm coding...’

增強(qiáng)的對象字面量

對象字面量被增強(qiáng)了嵌施，寫法更加簡潔與靈活莽鸭，同時在定義對象的時候能夠做的事情更多了吗伤。具體表現(xiàn)在：

可以在對象字面量里面定義原型
定義方法可以不用function關(guān)鍵字
直接調(diào)用父類方法
這樣一來硫眨，對象字面量與前面提到的類概念更加吻合，在編寫面向?qū)ο蟮腏avaScript時更加輕松方便了。

//通過對象字面量創(chuàng)建對象
var human = {
    breathe() {
        console.log('breathing...');
    }
};
var worker = {
    __proto__: human, //設(shè)置此對象的原型為human,相當(dāng)于繼承human
    company: 'freelancer',
    work() {
        console.log('working...');
    }
};
human.breathe();//輸出 ‘breathing...’
//調(diào)用繼承來的breathe方法
worker.breathe();//輸出 ‘breathing...’

字符串模板

字符串模板相對簡單易懂些夕冲。ES6中允許使用反引號 ` 來創(chuàng)建字符串裂逐，此種方法創(chuàng)建的字符串里面可以包含由美元符號加花括號包裹的變量${vraible}歹鱼。如果你使用過像C#等后端強(qiáng)類型語言的話卜高，對此功能應(yīng)該不會陌生。

//產(chǎn)生一個隨機(jī)數(shù)
var num=Math.random();
//將這個數(shù)字輸出到console
console.log(`your num is ${num}`);

解構(gòu)

自動解析數(shù)組或?qū)ο笾械闹挡籼巍１热缛粢粋€函數(shù)要返回多個值，常規(guī)的做法是返回一個對象薪缆，將每個值做為這個對象的屬性返回。但在ES6中疼电，利用解構(gòu)這一特性，可以直接返回一個數(shù)組蔽豺，然后數(shù)組中的值會自動被解析到對應(yīng)接收該值的變量中拧粪。

var [x,y]=getVal(),//函數(shù)返回值的解構(gòu)
    [name,,age]=['wayou','male','secrect'];//數(shù)組解構(gòu)

function getVal() {
    return [ 1, 2 ];
}

console.log('x:'+x+', y:'+y);//輸出：x:1, y:2 
console.log('name:'+name+', age:'+age);//輸出： name:wayou, age:secrect 

參數(shù)默認(rèn)值修陡，不定參數(shù)可霎，拓展參數(shù)

默認(rèn)參數(shù)值

現(xiàn)在可以在定義函數(shù)的時候指定參數(shù)的默認(rèn)值了，而不用像以前那樣通過邏輯或操作符來達(dá)到目的了啥纸。

function sayHello(name){
    //傳統(tǒng)的指定默認(rèn)參數(shù)的方式
    var name=name||'dude';
    console.log('Hello '+name);
}
//運(yùn)用ES6的默認(rèn)參數(shù)
function sayHello2(name='dude'){
    console.log(`Hello ${name}`);
}
sayHello();//輸出：Hello dude
sayHello('Wayou');//輸出：Hello Wayou
sayHello2();//輸出：Hello dude
sayHello2('Wayou');//輸出：Hello Wayou

不定參數(shù)

不定參數(shù)是在函數(shù)中使用命名參數(shù)同時接收不定數(shù)量的未命名參數(shù)婴氮。這只是一種語法糖，在以前的JavaScript代碼中我們可以通過arguments變量來達(dá)到這一目的主经。不定參數(shù)的格式是三個句點(diǎn)后跟代表所有不定參數(shù)的變量名。比如下面這個例子中罩驻，…x代表了所有傳入add函數(shù)的參數(shù)。

//將所有參數(shù)相加的函數(shù)
function add(...x){
    return x.reduce((m,n)=>m+n);
}
//傳遞任意個數(shù)的參數(shù)
console.log(add(1,2,3));//輸出：6
console.log(add(1,2,3,4,5));//輸出：15

拓展參數(shù)

拓展參數(shù)則是另一種形式的語法糖砾跃，它允許傳遞數(shù)組或者類數(shù)組直接做為函數(shù)的參數(shù)而不用通過apply。

var people=['Wayou','John','Sherlock'];
//sayHello函數(shù)本來接收三個單獨(dú)的參數(shù)人妖抽高，人二和人三
function sayHello(people1,people2,people3){
    console.log(`Hello ${people1},${people2},${people3}`);
}
//但是我們將一個數(shù)組以拓展參數(shù)的形式傳遞，它能很好地映射到每個單獨(dú)的參數(shù)
sayHello(...people);//輸出：Hello Wayou,John,Sherlock 

//而在以前翘骂，如果需要傳遞數(shù)組當(dāng)參數(shù)，我們需要使用函數(shù)的apply方法
sayHello.apply(null,people);//輸出：Hello Wayou,John,Sherlock 

let與const 關(guān)鍵字

可以把let看成var碳竟，只是它定義的變量被限定在了特定范圍內(nèi)才能使用，而離開這個范圍則無效莹桅。const則很直觀，用來定義常量仙蚜，即無法被更改值的變量。

for (let i=0;i<2;i++)console.log(i);//輸出: 0,1
console.log(i);//輸出：undefined,嚴(yán)格模式下會報錯

for of 值遍歷

我們都知道for in 循環(huán)用于遍歷數(shù)組委粉，類數(shù)組或?qū)ο螅珽S6中新引入的for of循環(huán)功能相似贾节，不同的是每次循環(huán)它提供的不是序號而是值衷畦。

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

注意栗涂，此功能google traceur并未實(shí)現(xiàn)祈争，所以無法模擬調(diào)試,下面有些功能也是如此

iterator, generator

這一部分的內(nèi)容有點(diǎn)生澀，詳情可以參見這里菩混。以下是些基本概念。
iterator:它是這么一個對象沮峡，擁有一個next方法，這個方法返回一個對象{done,value}邢疙，這個對象包含兩個屬性望薄，一個布爾類型的done和包含任意值的value
iterable: 這是這么一個對象呼畸，擁有一個obj[@@iterator]方法，這個方法返回一個iterator
generator: 它是一種特殊的iterator蛮原。反的next方法可以接收一個參數(shù)并且返回值取決與它的構(gòu)造函數(shù)（generator function）。generator同時擁有一個throw方法
generator 函數(shù): 即generator的構(gòu)造函數(shù)瞬痘。此函數(shù)內(nèi)可以使用yield關(guān)鍵字。在yield出現(xiàn)的地方可以通過generator的next或throw方法向外界傳遞值框全。generator 函數(shù)是通過function*來聲明的
yield 關(guān)鍵字：它可以暫停函數(shù)的執(zhí)行，隨后可以再進(jìn)進(jìn)入函數(shù)繼續(xù)執(zhí)行

模塊

在ES6標(biāo)準(zhǔn)中拆撼，JavaScript原生支持module了。這種將JS代碼分割成不同功能的小塊進(jìn)行模塊化的概念是在一些三方規(guī)范中流行起來的闸度，比如CommonJS和AMD模式。
將不同功能的代碼分別寫在不同文件中莺禁，各模塊只需導(dǎo)出公共接口部分，然后通過模塊的導(dǎo)入的方式可以在其他地方使用哟冬。下面的例子來自tutsplus:

// point.js
module "point" {
    export class Point {
        constructor (x, y) {
            public x = x;
            public y = y;
        }
    }
}
 
// myapp.js
//聲明引用的模塊
module point from "/point.js";
//這里可以看出忆绰，盡管聲明了引用的模塊浩峡，還是可以通過指定需要的部分進(jìn)行導(dǎo)入
import Point from "point";
 
var origin = new Point(0, 0);
console.log(origin);

Map错敢，Set 和 WeakMap，WeakSet

這些是新加的集合類型稚茅，提供了更加方便的獲取屬性值的方法，不用像以前一樣用hasOwnProperty來檢查某個屬性是屬于原型鏈上的呢還是當(dāng)前對象的峰锁。同時，在進(jìn)行屬性值添加與獲取時有專門的get糜芳，set 方法。
下方代碼來自es6feature

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

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

有時候我們會把對象作為一個對象的鍵用來存放屬性值峭竣，普通集合類型比如簡單對象會阻止垃圾回收器對這些作為屬性鍵存在的對象的回收晃虫，有造成內(nèi)存泄漏的危險皆撩。而WeakMap,WeakSet則更加安全些哲银，這些作為屬性鍵的對象如果沒有別的變量在引用它們，則會被回收釋放掉荆责，具體還看下面的例子。
正文代碼來自es6feature

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

// Weak Sets
var ws = new WeakSet();
ws.add({ data: 42 });//因?yàn)樘砑拥絯s的這個臨時對象沒有其他變量引用它做院，所以ws不會保存它的值，也就是說這次添加其實(shí)沒有意思

Proxies

Proxy可以監(jiān)聽對象身上發(fā)生了什么事情键耕，并在這些事情發(fā)生后執(zhí)行一些相應(yīng)的操作。一下子讓我們對一個對象有了很強(qiáng)的追蹤能力村视，同時在數(shù)據(jù)綁定方面也很有用處。
以下例子借用自這里蓖议。

  //定義被偵聽的目標(biāo)對象
var engineer = { name: 'Joe Sixpack', salary: 50 };
//定義處理程序
var interceptor = {
  set: function (receiver, property, value) {
    console.log(property, 'is changed to', value);
    receiver[property] = value;
  }
};
//創(chuàng)建代理以進(jìn)行偵聽
engineer = Proxy(engineer, interceptor);
//做一些改動來觸發(fā)代理
engineer.salary = 60;//控制臺輸出：salary is changed to 60

上面代碼我已加了注釋讥蟆，這里進(jìn)一步解釋勒虾。對于處理程序瘸彤，是在被偵聽的對象身上發(fā)生了相應(yīng)事件之后，處理程序里面的方法就會被調(diào)用质况，上面例子中我們設(shè)置了set的處理函數(shù)，表明结榄，如果我們偵聽的對象的屬性被更改，也就是被set了臼朗，那這個處理程序就會被調(diào)用蝎土，同時通過參數(shù)能夠得知是哪個屬性被更改绣否，更改為了什么值誊涯。

Symbols

我們知道對象其實(shí)是鍵值對的集合蒜撮，而鍵通常來說是字符串。而現(xiàn)在除了字符串外段磨，我們還可以用symbol這種值來做為對象的鍵。Symbol是一種基本類型苹支，像數(shù)字，字符串還有布爾一樣沐序，它不是一個對象。Symbol 通過調(diào)用symbol函數(shù)產(chǎn)生邑时，它接收一個可選的名字參數(shù)，該函數(shù)返回的symbol是唯一的晶丘。之后就可以用這個返回值做為對象的鍵了。Symbol還可以用來創(chuàng)建私有屬性浅浮，外部無法直接訪問由symbol做為鍵的屬性值捷枯。
以下例子來自es6features

(function() {

  // 創(chuàng)建symbol
  var key = Symbol("key");

  function MyClass(privateData) {
    this[key] = privateData;
  }

  MyClass.prototype = {
    doStuff: function() {
      ... this[key] ...
    }
  };

})();

var c = new MyClass("hello")
c["key"] === undefined//無法訪問該屬性滚秩，因?yàn)槭撬接械?

Math淮捆，Number，String攀痊，Object 的新API

對Math,Number,String還有Object等添加了許多新的API。下面代碼同樣來自es6features苟径，對這些新API進(jìn)行了簡單展示。

Number.EPSILON
Number.isInteger(Infinity) // false
Number.isNaN("NaN") // false

Math.acosh(3) // 1.762747174039086
Math.hypot(3, 4) // 5
Math.imul(Math.pow(2, 32) - 1, Math.pow(2, 32) - 2) // 2

"abcde".contains("cd") // true
"abc".repeat(3) // "abcabcabc"

Array.from(document.querySelectorAll('*')) // Returns a real Array
Array.of(1, 2, 3) // Similar to new Array(...), but without special one-arg behavior
[0, 0, 0].fill(7, 1) // [0,7,7]
[1,2,3].findIndex(x => x == 2) // 1
["a", "b", "c"].entries() // iterator [0, "a"], [1,"b"], [2,"c"]
["a", "b", "c"].keys() // iterator 0, 1, 2
["a", "b", "c"].values() // iterator "a", "b", "c"

Object.assign(Point, { origin: new Point(0,0) })

Promises

Promises是處理異步操作的一種模式蟆盐，之前在很多三方庫中有實(shí)現(xiàn)承边，比如jQuery的deferred 對象舱禽。當(dāng)你發(fā)起一個異步請求恩沽，并綁定了.when(), .done()等事件處理程序時，其實(shí)就是在應(yīng)用promise模式罗心。

//創(chuàng)建promise
var promise = new Promise(function(resolve, reject) {
    // 進(jìn)行一些異步或耗時操作
    if ( /*如果成功 */ ) {
        resolve("Stuff worked!");
    } else {
        reject(Error("It broke"));
    }
});
//綁定處理程序
promise.then(function(result) {
    //promise成功的話會執(zhí)行這里
    console.log(result); // "Stuff worked!"
}, function(err) {
    //promise失敗會執(zhí)行這里
    console.log(err); // Error: "It broke"
});

總結(jié)

總結(jié)就是一句話，前后端差異越來越小了渤闷。

更多spring boot/spring cloud學(xué)習(xí)資源：
https://download.csdn.net/download/wiseap/10364359
更多區(qū)塊鏈學(xué)習(xí)資源：
https://download.csdn.net/download/wiseap/10319848