ES6定義那些新屬性

ES6新特性(常用的)

1.類(class)
ES6 引入了class(類),讓JavaScript的面向對象編程變得更加簡單和易於理解。

2.模塊化(Module)

ES5不支持原生的模塊化,在ES6中模塊作爲重要的組成部分被添加進來。模塊的功能主要由 export 和 import 組成。每一個模塊都有自己單獨的作用域,模塊之間的相互調用關係是通過 export 來規定模塊對外暴露的接口,通過import來引用其它模塊提供的接口。同時還爲模塊創造了命名空間,防止函數的命名衝突。

導出(export)

ES6允許在一個模塊中使用export來導出多個變量或函數。

導入(import)

定義好模塊的輸出以後就可以在另外一個模塊通過import引用。

3.箭頭(Arrow)函數

這是ES6中最令人激動的特性之一。 =>不只是關鍵字function的簡寫,它還帶來了其它好處。箭頭函數與包圍它的代碼共享同一個 this,能幫你很好的解決this的指向問題。有經驗的JavaScript開發者都熟悉諸如 var self = this;或 var that =this這種引用外圍this的模式。但藉助 =>,就不需要這種模式了。

箭頭函數的結構

箭頭函數的箭頭=>之前是一個空括號、單個的參數名、或用括號括起的多個參數名,而箭頭之後可以是一個表達式(作爲函數的返回值),或者是用花括號括起的函數體(需要自行通過return來返回值,否則返回的是undefined)

5.模板字符串

ES6支持 模板字符串,使得字符串的拼接更加的簡潔、直觀。

不使用模板字符串:

var name ="your name is"+fist+last"

使用模板字符串:

var name ="your name is ${fist} ${last}"

在ES6中通過 ${}就可以完成字符串的拼接,只需要將變量放在大括號之中。

解構賦值語法是JavaScript的一種表達式,可以方便的從數組或者對象中快速提取值賦給定義的變量。

獲取數組中的值

從數組中獲取值並賦值到變量中,變量的順序與數組中對象順序對應。

var foo=["one","two","three","four"]
    var [one,two,three]=foo
    console.log(one)
    console.log(two)
    console.log(three)
    //如果你要忽略某些值,你可以按照下面的寫法獲取你想要的值
    var [first,,,last]=foo
    console.log(first)
    console.log(last)
    var a,b
    //如果沒有從數組中的獲取到值,你可以爲變量設置一個默認值。
    [a=5,b=7]=[1]
    console.log(a)
    console.log(b)

7.延展操作符(Spread operator)

延展操作符(三點)…
可以在函數調用/數組構造時, 將數組表達式或者string在語法層面展開;還可以在構造對象時, 將對象表達式按key-value的方式展開。

語法

函數調用:

myFunction(...iterableObj)

構造數組
沒有展開語法的時候,只能組合使用 push,splice,concat 等方法,來將已有數組元素變成新數組的一部分。有了展開語法, 構造新數組會變得更簡單、更優雅:

和參數列表的展開類似, … 在構造字數組時, 可以在任意位置多次使用。

數組操作

  	var myarr = [1, 2, 3,];
    var myarr2=[...myarr] //[1, 2, 3,]
    myarr2.push(77)
    var myarr3=[...myarr,...myarr2]
    console.log(myarr3) //[1, 2, 3, 1, 2, 3, 77]


在ECMAScript 2018中延展操作符增加了對對象的支持

8.對象屬性簡寫

在ES6中允許我們在設置一個對象的屬性的時候不指定屬性名。

	 //不使用es6
    const stuname="張三",stuage=18,city="成都";
    var student={
        stuname:stuname,stuage:stuage,city:city
    }
    console.log(student)
    //使用es6
    var student2={
        stuname,stuage,city
    }
    console.log(student2)

10.支持let與const
在之前JS是沒有塊級作用域的,const與let填補了這方便的空白,const與let都是塊級作用域。

使用var定義的變量爲函數級作用域:

	//使用var定義的變量爲函數級作用域:
    {var a=10}
    console.log(a)  //10
    //使用let與const定義的變量爲塊級作用域:
    {let ab=20}
    console.log(ab) //報錯
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章