ES6特性一覽

ECMAScript 6(以下簡稱ES6)是JavaScript語言的下一代標(biāo)準(zhǔn)。因?yàn)楫?dāng)前版本的ES6是在2015年發(fā)布的赌结,所以又稱ECMAScript 2015肘交。

也就是說炬搭,ES6就是ES2015漏益。

雖然目前并不是所有瀏覽器都能兼容ES6全部特性,但越來越多的程序員在實(shí)際項(xiàng)目當(dāng)中已經(jīng)開始使用ES6了粘舟。所以就算你現(xiàn)在不打算使用ES6熔脂,但為了看懂別人的你也該懂點(diǎn)ES6的語法了...

在我們正式講解ES6語法之前佩研,我們得先了解下Babel。
Babel

Babel是一個(gè)廣泛使用的ES6轉(zhuǎn)碼器霞揉,可以將ES6代碼轉(zhuǎn)為ES5代碼旬薯,從而在現(xiàn)有環(huán)境執(zhí)行。大家可以選擇自己習(xí)慣的工具來使用使用Babel适秩,具體過程可直接在Babel官網(wǎng)查看

最常用的ES6特性
let, const, class, extends, super, arrow functions, template string, destructuring, default, rest arguments
這些是ES6最常用的幾個(gè)語法绊序,基本上學(xué)會(huì)它們,我們就可以走遍天下都不怕啦秽荞!我會(huì)用最通俗易懂的語言和例子來講解它們骤公,保證一看就懂,一學(xué)就會(huì)扬跋。

let, const

這兩個(gè)的用途與var類似阶捆,都是用來聲明變量的,但在實(shí)際運(yùn)用中他倆都有各自的特殊用途钦听。
首先來看下面這個(gè)例子:

var name = 'zach'

while (true) {
    var name = 'obama'
    console.log(name)  //obama
    break
}

console.log(name)  //obama

使用var 兩次輸出都是obama洒试,這是因?yàn)镋S5只有全局作用域和函數(shù)作用域,沒有塊級作用域朴上,這帶來很多不合理的場景垒棋。第一種場景就是你現(xiàn)在看到的內(nèi)層變量覆蓋外層變量。而let則實(shí)際上為JavaScript新增了塊級作用域痪宰。用它所聲明的變量捕犬,只在let命令所在的代碼塊內(nèi)有效。

let name = 'zach'

while (true) {
    let name = 'obama'
    console.log(name)  //obama
    break
}

console.log(name)  //zach

另外一個(gè)var帶來的不合理場景就是用來計(jì)數(shù)的循環(huán)變量泄露為全局變量酵镜,看下面的例子:

var a = [];
for (var i = 0; i < 10; i++) {
  a[i] = function () {
    console.log(i);
  };
}
a[6](); // 10

上面代碼中,變量i是var聲明的柴钻,在全局范圍內(nèi)都有效淮韭。所以每一次循環(huán),新的i值都會(huì)覆蓋舊值贴届,導(dǎo)致最后輸出的是最后一輪的i的值靠粪。而使用let則不會(huì)出現(xiàn)這個(gè)問題。

var a = [];
for (let i = 0; i < 10; i++) {
  a[i] = function () {
    console.log(i);
  };
}
a[6](); // 6

再來看一個(gè)更常見的例子毫蚓,了解下如果不用ES6占键,而用閉包如何解決這個(gè)問題。

var clickBoxs = document.querySelectorAll('.clickBox')
for (var i = 0; i < clickBoxs.length; i++){
    clickBoxs[i].onclick = function(){
        console.log(i)
    }
}

我們本來希望的是點(diǎn)擊不同的clickBox元潘,顯示不同的i畔乙,但事實(shí)是無論我們點(diǎn)擊哪個(gè)clickBox,輸出的都是5翩概。下面我們來看下牲距,如何用閉包搞定它返咱。

function iteratorFactory(i){
    var onclick = function(e){
        console.log(i)
    }
    return onclick;
}
var clickBoxs = document.querySelectorAll('.clickBox')
for (var i = 0; i < clickBoxs.length; i++){
    clickBoxs[i].onclick = iteratorFactory(i)
}

const也用來聲明變量,但是聲明的是常量牍鞠。一旦聲明咖摹,常量的值就不能改變。

const PI = Math.PI

PI = 23 //Module build failed: SyntaxError: /es6/app.js: "PI" is read-only

當(dāng)我們嘗試去改變用const聲明的常量時(shí)难述,瀏覽器就會(huì)報(bào)錯(cuò)萤晴。
const有一個(gè)很好的應(yīng)用場景,就是當(dāng)我們引用第三方庫的時(shí)聲明的變量胁后,用const來聲明可以避免未來不小心重命名而導(dǎo)致出現(xiàn)bug:

const monent = require('moment')

class, extends, super

這三個(gè)特性涉及了ES5中最令人頭疼的的幾個(gè)部分:原型店读、構(gòu)造函數(shù),繼承...你還在為它們復(fù)雜難懂的語法而煩惱嗎择同?你還在為指針到底指向哪里而糾結(jié)萬分嗎两入?

有了ES6我們不再煩惱!

class

ES6提供了更接近傳統(tǒng)語言的寫法敲才,引入了Class(類)這個(gè)概念裹纳。新的class寫法讓對象原型的寫法更加清晰、更像面向?qū)ο缶幊痰恼Z法紧武,也更加通俗易懂剃氧。

class Animal {
    constructor(){
        this.type = 'animal'
    }
    says(say){
        console.log(this.type + ' says ' + say)
    }
}

let animal = new Animal()
animal.says('hello') //animal says hello

class Cat extends Animal {
    constructor(){
        super()
        this.type = 'cat'
    }
}

let cat = new Cat()
cat.says('hello') //cat says hello

上面代碼首先用class定義了一個(gè)“類”,可以看到里面有一個(gè)constructor方法阻星,這就是構(gòu)造方法朋鞍,而this關(guān)鍵字則代表實(shí)例對象。簡單地說妥箕,constructor內(nèi)定義的方法和屬性是實(shí)例對象自己的滥酥,而constructor外定義的方法和屬性則是所有實(shí)例對象可以共享的。

extends

Class之間可以通過extends關(guān)鍵字實(shí)現(xiàn)繼承畦幢,這比ES5的通過修改原型鏈實(shí)現(xiàn)繼承坎吻,要清晰和方便很多。上面定義了一個(gè)Cat類宇葱,該類通過extends關(guān)鍵字瘦真,繼承了Animal類的所有屬性和方法。

super

super關(guān)鍵字黍瞧,它指代父類的實(shí)例(即父類的this對象)诸尽。子類必須在constructor方法中調(diào)用super方法,否則新建實(shí)例時(shí)會(huì)報(bào)錯(cuò)印颤。這是因?yàn)樽宇悰]有自己的this對象您机,而是繼承父類的this對象,然后對其進(jìn)行加工。如果不調(diào)用super方法往产,子類就得不到this對象被碗。

ES6的繼承機(jī)制,實(shí)質(zhì)是先創(chuàng)造父類的實(shí)例對象this(所以必須先調(diào)用super方法)仿村,然后再用子類的構(gòu)造函數(shù)修改this锐朴。

P.S 如果你寫react的話,就會(huì)發(fā)現(xiàn)以上三個(gè)東西在最新版React中出現(xiàn)得很多蔼囊。創(chuàng)建的每個(gè)component都是一個(gè)繼承React.Component的類焚志。詳見react文檔

arrow function

這個(gè)恐怕是ES6最最常用的一個(gè)新特性了,用它來寫function比原來的寫法要簡潔清晰很多:

function(i){ return i + 1; } //ES5
(i) => i + 1 //ES6
簡直是簡單的不像話對吧...
如果方程比較復(fù)雜畏鼓,則需要用{}把代碼包起來:

function(x, y) { 
    x++;
    y--;
    return x + y;
}
(x, y) => {x++; y--; return x+y}\

除了看上去更簡潔以外酱酬,arrow function還有一項(xiàng)超級無敵的功能!
長期以來云矫,JavaScript語言的this對象一直是一個(gè)令人頭痛的問題膳沽,在對象方法中使用this,必須非常小心让禀。例如:

class Animal {
    constructor(){
        this.type = 'animal'
    }
    says(say){
        setTimeout(function(){
            console.log(this.type + ' says ' + say)
        }, 1000)
    }
}

 var animal = new Animal()
 animal.says('hi')  //undefined says hi

運(yùn)行上面的代碼會(huì)報(bào)錯(cuò)挑社,這是因?yàn)?code>setTimeout中的this指向的是全局對象。所以為了讓它能夠正確的運(yùn)行巡揍,傳統(tǒng)的解決方法有兩種:

第一種是將this傳給self,再用self來指代this

   says(say){
       var self = this;
       setTimeout(function(){
           console.log(self.type + ' says ' + say)
       }, 1000)

2.第二種方法是用bind(this),即

   says(say){
       setTimeout(function(){
           console.log(this.type + ' says ' + say)
       }.bind(this), 1000)

但現(xiàn)在我們有了箭頭函數(shù)痛阻,就不需要這么麻煩了:

class Animal {
    constructor(){
        this.type = 'animal'
    }
    says(say){
        setTimeout( () => {
            console.log(this.type + ' says ' + say)
        }, 1000)
    }
}
 var animal = new Animal()
 animal.says('hi')  //animal says hi

當(dāng)我們使用箭頭函數(shù)時(shí),函數(shù)體內(nèi)的this對象腮敌,就是定義時(shí)所在的對象阱当,而不是使用時(shí)所在的對象。
并不是因?yàn)榧^函數(shù)內(nèi)部有綁定this的機(jī)制糜工,實(shí)際原因是箭頭函數(shù)根本沒有自己的this弊添,它的this是繼承外面的,因此內(nèi)部的this就是外層代碼塊的this捌木。

template string

這個(gè)東西也是非常有用表箭,當(dāng)我們要插入大段的html內(nèi)容到文檔中時(shí),傳統(tǒng)的寫法非常麻煩钮莲,所以之前我們通常會(huì)引用一些模板工具庫,比如mustache等等彼水。

大家可以先看下面一段代碼:

$("#result").append(
  "There are <b>" + basket.count + "</b> " +
  "items in your basket, " +
  "<em>" + basket.onSale +
  "</em> are on sale!"
);

我們要用一堆的'+'號(hào)來連接文本與變量崔拥,而使用ES6的新特性模板字符串``后,我們可以直接這么來寫:

$("#result").append(`
  There are <b>${basket.count}</b> items
   in your basket, <em>${basket.onSale}</em>
  are on sale!
`);

用反引號(hào)(\)來標(biāo)識(shí)起始凤覆,用${}來引用變量链瓦,而且所有的空格和縮進(jìn)都會(huì)被保留在輸出之中,是不是非常爽?慈俯!

React Router從第1.0.3版開始也使用ES6語法了渤刃,比如這個(gè)例子:

<Link to={`/taco/${taco.name}`}>{taco.name}</Link>
React Router


destructuring

ES6允許按照一定模式,從數(shù)組和對象中提取值贴膘,對變量進(jìn)行賦值卖子,這被稱為解構(gòu)(Destructuring)。

看下面的例子:

let cat = 'ken'
let dog = 'lili'
let zoo = {cat: cat, dog: dog}
console.log(zoo)  //Object {cat: "ken", dog: "lili"}

用ES6完全可以像下面這么寫:

let cat = 'ken'
let dog = 'lili'
let zoo = {cat, dog}
console.log(zoo)  //Object {cat: "ken", dog: "lili"}

反過來可以這么寫:

let dog = {type: 'animal', many: 2}
let { type, many} = dog
console.log(type, many)   //animal 2

default, rest

default很簡單刑峡,意思就是默認(rèn)值洋闽。大家可以看下面的例子,調(diào)用animal()方法時(shí)忘了傳參數(shù)突梦,傳統(tǒng)的做法就是加上這一句type = type || 'cat'來指定默認(rèn)值诫舅。

function animal(type){
    type = type || 'cat'  
    console.log(type)
}
animal()

如果用ES6我們而已直接這么寫:

function animal(type = 'cat'){
    console.log(type)
}
animal()

最后一個(gè)rest語法也很簡單,直接看例子:

function animals(...types){
    console.log(types)
}
animals('cat', 'dog', 'fish') //["cat", "dog", "fish"]

而如果不用ES6的話宫患,我們則得使用ES5的arguments刊懈。

總結(jié)
以上就是ES6最常用的一些語法,可以說這20%的語法娃闲,在ES6的日常使用中占了80%...

import export

這兩個(gè)家伙對應(yīng)的就是es6自己的module功能虚汛。

我們之前寫的Javascript一直都沒有模塊化的體系,無法將一個(gè)龐大的js工程拆分成一個(gè)個(gè)功能相對獨(dú)立但相互依賴的小工程畜吊,再用一種簡單的方法把這些小工程連接在一起泽疆。

這有可能導(dǎo)致兩個(gè)問題:

  1. 一方面js代碼變得很臃腫,難以維護(hù)
  2. 另一方面我們常常得很注意每個(gè)script標(biāo)簽在html中的位置玲献,因?yàn)樗鼈兺ǔS幸蕾囮P(guān)系殉疼,順序錯(cuò)了可能就會(huì)出bug

在es6之前為解決上面提到的問題,我們得利用第三方提供的一些方案捌年,主要有兩種CommonJS(服務(wù)器端)和AMD(瀏覽器端瓢娜,如require.js)。

如果想了解更多AMD礼预,尤其是require.js眠砾,可以參看這個(gè)教程:

而現(xiàn)在我們有了es6的module功能,它實(shí)現(xiàn)非常簡單托酸,可以成為服務(wù)器和瀏覽器通用的模塊解決方案褒颈。

ES6模塊的設(shè)計(jì)思想,是盡量的靜態(tài)化励堡,使得編譯時(shí)就能確定模塊的依賴關(guān)系谷丸,以及輸入和輸出的變量。CommonJSAMD模塊应结,都只能在運(yùn)行時(shí)確定這些東西刨疼。
上面的設(shè)計(jì)思想看不懂也沒關(guān)系泉唁,咱先學(xué)會(huì)怎么用,等以后用多了揩慕、熟練了再去研究它背后的設(shè)計(jì)思想也不遲亭畜!好,那我們就上代碼...

傳統(tǒng)的寫法
首先我們回顧下require.js的寫法迎卤。假設(shè)我們有兩個(gè)js文件:index.jscontent.js,現(xiàn)在我們想要在index.js中使用content.js返回的結(jié)果拴鸵,我們要怎么做呢?

首先定義:

//content.js
define('content.js', function(){
    return 'A cat';
})

然后require:

//index.js
require(['./content.js'], function(animal){
    console.log(animal);   //A cat
})

那CommonJS是怎么寫的呢止吐?

//index.js
var animal = require('./content.js')

//content.js
module.exports = 'A cat'

ES6的寫法

//index.js
import animal from './content'

//content.js
export default 'A cat'

以上我把三者都列出來了宝踪,媽媽再也不用擔(dān)心我寫混淆了...

ES6 module的其他高級用法

//content.js

export default 'A cat'    
export function say(){
    return 'Hello!'
}    
export const type = 'dog' 

上面可以看出,export命令除了輸出變量碍扔,還可以輸出函數(shù)瘩燥,甚至是類(react的模塊基本都是輸出類)

//index.js

import { say, type } from './content'  
let says = say()
console.log(`The ${type} says ${says}`)  //The dog says Hello

這里輸入的時(shí)候要注意:大括號(hào)里面的變量名,必須與被導(dǎo)入模塊(content.js)對外接口的名稱相同不同。

如果還希望輸入content.js中輸出的默認(rèn)值(default), 可以寫在大括號(hào)外面厉膀。

//index.js

import animal, { say, type } from './content'  
let says = say()
console.log(`The ${type} says ${says} to ${animal}`)  
//The dog says Hello to A cat

修改變量名

此時(shí)我們不喜歡type這個(gè)變量名,因?yàn)樗锌赡苤孛眨晕覀冃枰薷囊幌滤淖兞棵臁T趀s6中可以用as實(shí)現(xiàn)一鍵換名。

//index.js

import animal, { say, type as animalType } from './content'  
let says = say()
console.log(`The ${animalType} says ${says} to ${animal}`)  
//The dog says Hello to A cat

模塊的整體加載

除了指定加載某個(gè)輸出值百新,還可以使用整體加載企软,即用星號(hào)(*)指定一個(gè)對象,所有輸出值都加載在這個(gè)對象上面饭望。

//index.js

import animal, * as content from './content'  
let says = content.say()
console.log(`The ${content.type} says ${says} to ${animal}`)  
//The dog says Hello to A cat
通常星號(hào)*結(jié)合as一起使用比較合適仗哨。

原文:30分鐘掌握es6

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個(gè)濱河市铅辞,隨后出現(xiàn)的幾起案子厌漂,更是在濱河造成了極大的恐慌,老刑警劉巖斟珊,帶你破解...
    沈念sama閱讀 211,123評論 6 490
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件苇倡,死亡現(xiàn)場離奇詭異,居然都是意外死亡囤踩,警方通過查閱死者的電腦和手機(jī)旨椒,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,031評論 2 384
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來堵漱,“玉大人综慎,你說我怎么就攤上這事≌浚” “怎么了?”我有些...
    開封第一講書人閱讀 156,723評論 0 345
  • 文/不壞的土叔 我叫張陵,是天一觀的道長埃元。 經(jīng)常有香客問我涝涤,道長,這世上最難降的妖魔是什么岛杀? 我笑而不...
    開封第一講書人閱讀 56,357評論 1 283
  • 正文 為了忘掉前任阔拳,我火速辦了婚禮,結(jié)果婚禮上类嗤,老公的妹妹穿的比我還像新娘糊肠。我一直安慰自己,他們只是感情好遗锣,可當(dāng)我...
    茶點(diǎn)故事閱讀 65,412評論 5 384
  • 文/花漫 我一把揭開白布货裹。 她就那樣靜靜地躺著,像睡著了一般精偿。 火紅的嫁衣襯著肌膚如雪弧圆。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 49,760評論 1 289
  • 那天笔咽,我揣著相機(jī)與錄音搔预,去河邊找鬼。 笑死叶组,一個(gè)胖子當(dāng)著我的面吹牛拯田,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播甩十,決...
    沈念sama閱讀 38,904評論 3 405
  • 文/蒼蘭香墨 我猛地睜開眼船庇,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了枣氧?” 一聲冷哼從身側(cè)響起溢十,我...
    開封第一講書人閱讀 37,672評論 0 266
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎达吞,沒想到半個(gè)月后张弛,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 44,118評論 1 303
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡酪劫,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 36,456評論 2 325
  • 正文 我和宋清朗相戀三年吞鸭,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片覆糟。...
    茶點(diǎn)故事閱讀 38,599評論 1 340
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡刻剥,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出滩字,到底是詐尸還是另有隱情造虏,我是刑警寧澤御吞,帶...
    沈念sama閱讀 34,264評論 4 328
  • 正文 年R本政府宣布,位于F島的核電站漓藕,受9級特大地震影響陶珠,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜享钞,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 39,857評論 3 312
  • 文/蒙蒙 一揍诽、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧栗竖,春花似錦暑脆、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,731評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至处坪,卻和暖如春根资,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背同窘。 一陣腳步聲響...
    開封第一講書人閱讀 31,956評論 1 264
  • 我被黑心中介騙來泰國打工玄帕, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人想邦。 一個(gè)月前我還...
    沈念sama閱讀 46,286評論 2 360
  • 正文 我出身青樓裤纹,卻偏偏與公主長得像,于是被迫代替她去往敵國和親丧没。 傳聞我的和親對象是個(gè)殘疾皇子鹰椒,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 43,465評論 2 348

推薦閱讀更多精彩內(nèi)容

  • 一、ES6簡介 ? 歷時(shí)將近6年的時(shí)間來制定的新 ECMAScript 標(biāo)準(zhǔn) ECMAScript 6(亦稱 ...
    一歲一枯榮_閱讀 6,062評論 8 25
  • 以下內(nèi)容是我在學(xué)習(xí)和研究ES6時(shí)呕童,對ES6的特性漆际、重點(diǎn)和注意事項(xiàng)的提取、精練和總結(jié)夺饲,可以做為ES6特性的字典奸汇;在本...
    科研者閱讀 3,120評論 2 9
  • [TOC] 參考阮一峰的ECMAScript 6 入門參考深入淺出ES6 let和const let和const都...
    郭子web閱讀 1,773評論 0 1
  • 引用:http://hao.jser.com/archive/10813/?utm_source=tuicool&...
    莊志平閱讀 1,206評論 1 14
  • 記得有一次我哭得稀里嘩啦的時(shí)候,你說你就怕在一起我們的三觀不一樣往声,我當(dāng)時(shí)很難過擂找,就算不一樣,我也要跟你在一起浩销,因?yàn)?..
    小瘦子與大胖子閱讀 655評論 0 0