定義函數(shù)
? ? ? ?我們先來(lái)看一個(gè)基本的新特性,在javascript中,定義函數(shù)需要關(guān)鍵字function,但是在es6中,還有更先進(jìn)的寫(xiě)法,我們來(lái)看:
? ? es6寫(xiě)法:
var human = {
? ? ? ? breathe(name) { ?//不需要function也能定義breathe函數(shù)。
? ? ? ? ? ? ? ? console.log(name +' is ?breathing...');
? ? ? }
};
human.breathe('jarson'); ?//輸出 ‘jarson is breathing...’
轉(zhuǎn)成js代碼:
var human = {
? ? ? ?breathe:function(name){
? ? ? ? ? ? ? ?console.log(name +'is breathing...');
? ? ? ?}
};
human.breathe('jarson');
創(chuàng)建類(lèi)
我們知道,javascript不像java是面向?qū)ο缶幊痰恼Z(yǔ)言,而只可以說(shuō)是基于對(duì)象編程的語(yǔ)言。所以在js中,我們通常都是用function和prototype來(lái)模擬 類(lèi) 這個(gè)概念。
但是現(xiàn)在有了es6,我們可以像java那樣‘明目張膽’的創(chuàng)建一個(gè)類(lèi)了:
class Human{
? ? ? ? constructor(name) {
? ? ? ? ? ? ? this.name = name
? ? ? ? ? ? ? }
? ? ? ? ? ? ?breathe() {
? ? ? ? ? ? ? ? ? ? console.log(this.name +" is breathing");
? ? ? ? ? ? ? }
}
var man =new Human("jarson");
man.breathe();?//jarson is breathing
所以我們看到,我們可以像java那樣語(yǔ)義化的去創(chuàng)建一個(gè)類(lèi)。另外,js中的繼承父類(lèi),需要用prototype來(lái)實(shí)現(xiàn)。那么在es6中,又有什么新的方法來(lái)實(shí)現(xiàn)類(lèi)的繼承呢?繼續(xù)看:
假如我們要?jiǎng)?chuàng)建一個(gè)Man類(lèi)繼承上面的Human類(lèi),es6代碼:
class Man extends Human{
? ? ? ?constructor(name, sex) {
? ? ? ? ? ?super(name);this.sex = sex;
? ? ? }
? ? ?info(){
? ? ? ? ? ? console.log(this.name +'is '+this.sex);
? ? ?}
}
var xx =new Man('jarson','boy');
xx.breathe(); ? //jarson is breathing
xx.info(); ? ? //arsonis boy
模塊
在ES6標(biāo)準(zhǔn)中,javascript原生支持module了。將不同功能的代碼分別寫(xiě)在不同文件中,各模塊只需 導(dǎo)出(export) 公共接口部分,然后在需要使用的地方通過(guò)模塊的 導(dǎo)入(import) 就可以了。下面繼續(xù)看例子:
內(nèi)聯(lián)導(dǎo)出
class Human{
? ? ? constructor(name){
? ? ? ? ? this.name = name;
? ? ? }
? ? ? breathe() {
? ? ? ? ? ?console.log(this.name +" is breathing");
? ? ?}
}
function run(){
? ? ? console.log('i am runing');
}
function ? eat(){
? ? ? ?console.log('i am eating');
}
export{Human, run};
Default導(dǎo)出
導(dǎo)出時(shí)使用關(guān)鍵字default,可將對(duì)象標(biāo)注為default對(duì)象導(dǎo)出。default關(guān)鍵字在每一個(gè)模塊中只能使用一次。它既可以用于內(nèi)聯(lián)導(dǎo)出,也可以用于一組對(duì)象導(dǎo)出聲明中。
查看導(dǎo)出default對(duì)象的語(yǔ)法:
...//創(chuàng)建類(lèi)、函數(shù)等等
export default{ ? ?//把Human類(lèi)和run函數(shù)標(biāo)注為default對(duì)象導(dǎo)出。
? ? ? ? ?Human,
? ? ? ? run
};
無(wú)對(duì)象導(dǎo)入
使用Default導(dǎo)出方式導(dǎo)出對(duì)象,該對(duì)象在import聲明中將直接被分配給某個(gè)引用,如下例中的“app”。
import app from'./module1.js';
上面例子中,默認(rèn) ./module1.js 文件只導(dǎo)出了一個(gè)對(duì)象;若導(dǎo)出了一組對(duì)象,則應(yīng)該在導(dǎo)入聲明中一一列出這些對(duì)象,如:
import{Human, run}from'./app.js'
let與const
在我看來(lái),在es6新特性中,在定義變量的時(shí)候統(tǒng)統(tǒng)使用 let 來(lái)代替 var 就好了, const 則很直觀,用來(lái)定義常量,即無(wú)法被更改值的變量。
for(leti=0;i<2;i++) {
? ? ?console.log(i); ? ?//輸出: 0,1
}
箭頭函數(shù)
ES6中新增的箭頭操作符 => 簡(jiǎn)化了函數(shù)的書(shū)寫(xiě)。操作符左邊為輸入的參數(shù),而右邊則是進(jìn)行的操作以及返回的值,這樣的寫(xiě)法可以為我們減少大量的代碼,看下面的實(shí)例:
let arr = [6,8,10,20,15,9];
arr.forEach((item, i) =>console.log(item, i));
let newArr = arr.filter((item) => (item<10));
console.log(newArr); ? //[6, 8, 9];
上面的 (item, i) 就是參數(shù),后面的 console.log(item, i) 就是回到函數(shù)要執(zhí)行的操作邏輯。
上面代碼轉(zhuǎn)為js格式:
var arr = [6,8,10,20,15,9];
arr.forEach(
? ? ? ?function(item, i){
? ? ? ? ? ? ?return ?console.log(item, i);
});
var ?newArr = arr.filter(
? ? ? ?function(item){
? ? ? ? ? ? ?return(item <10);
});
console.log(newArr);