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) //報錯