常用es6特性

定義函數(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);

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書(shū)系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 用let 來(lái)代替var即可,let定義不具有變量提升作用,同一作用域內(nèi)不可重復(fù)定義,塊級(jí)作用域 const表示常量...
    我就是L閱讀 281評(píng)論 0 0
  • ES6全面總結(jié) ES6新特性概覽 本文基于lukehoban/es6features,同時(shí)參考了大量博客資料,具體...
    隨風(fēng)而去隨遇而安閱讀 416評(píng)論 0 1
  • 箭頭操作符 如果你會(huì)C#或者Java,你肯定知道lambda表達(dá)式,ES6中新增的箭頭操作符=>便有異曲同工之妙。...
    晨光2016閱讀 210評(píng)論 0 1
  • JavaScript之父:Brendan Eich 。 -基本語(yǔ)法:借鑒了C語(yǔ)言和Java語(yǔ)言。-數(shù)據(jù)結(jié)構(gòu):借鑒了...
    饑人谷_kule閱讀 665評(píng)論 0 0
  • 今天又去看房,房東是一對(duì)小情侶,房子性價(jià)比很高,唯一不足的是男房東看著很不舒服,瘦高個(gè),鼻梁很挺,五官也很秀氣,只...
    琴瑟笙簫閱讀 276評(píng)論 0 0

友情鏈接更多精彩內(nèi)容