ES6(ECMAScript2015)的出現,無疑給前端開發人員帶來了新的驚喜,它包含了一些很棒的新特性,可以更加方便的實現很多複雜的操作,提高開發人員的效率。下面是一些常用的新特性。他讓前端越來越接近後端...
1.箭頭操作符
如果你會C#或者Java,你肯定知道lambda表達式,ES6中新增的箭頭操作符=>便有異曲同工之妙。它簡化了函數的書寫。操作符左邊爲輸入的參數,而右邊則是進行的操作以及返回的值Inputs=>outputs。
ES6中新增箭頭操作符用於簡化函數的寫法,操作符左邊爲參數,右邊爲具體操作和返回值。。
// ES6
var test = (num1, num2) => { return num1 + num2; }
// 傳統
var test = function(num1, num2) {
return num1 + num2;
};
2.類的支持
ES6中添加了對類的支持,引入了class關鍵字(其實class在JavaScript中一直是保留字,目的就是考慮到可能在以後的新版本中會用到,現在終於派上用場了)。JS本身就是面向對象的,ES6中提供的類實際上只是JS原型模式的包裝。現在提供原生的class支持後,對象的創建,繼承更加直觀了,並且父類方法的調用,實例化,靜態方法和構造函數等概念都更加形象化。
//類的定義
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'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...’
3.字符串模板
字符串模板相對簡單易懂些。ES6中允許使用反引號 ` 來創建字符串,此種方法創建的字符串裏面可以包含由美元符號加花括號包裹的變量${vraible}。
//產生一個隨機數
var num=Math.random();
//將這個數字輸出到console
console.log(`your num is ${num}`);
4.let與const 關鍵字
可以把let看成var,只是它定義的變量被限定在了特定範圍內才能使用,而離開這個範圍則無效。const則很直觀,用來定義常量,即無法被更改值的變量。
for (let i=0;i<2;i++)console.log(i);//輸出: 0,1
console.log(i);//輸出:undefined,嚴格模式下會報錯
5.for of 值遍歷
我們都知道for in 循環用於遍歷數組,類數組或對象,ES6中新引入的for of循環功能相似,不同的是每次循環它提供的不是序號而是值。
var someArray = [ "a", "b", "c" ];
for (v of someArray) {
console.log(v);//輸出 a,b,c
}
ES6更多新特性:http://www.cnblogs.com/Wayou/p/es6_new_features.html