ES-Ver：ECMAScript 6
阿新 • • 發佈：2020-08-14
| ylbtech-ES-Ver：ECMAScript 6 |
| 1.返回頂部 |
- 外文名：ECMAScript 6
- 簡稱：ES6
- 型別：前端語言
- 通過日期：2015年6月
- 正式名字：ECMAScript 2015（ES2015）
- 性質：JavaScript語言的標準
目錄
2、| 2.返回頂部 |
發展歷史
2000年，ECMAScript 4.0開始醞釀。這個版本最後沒有通過，但是它的大部分內容被ECMAScript6繼承了。因此，ECMAScript6制定的起點其實是2000年。 2007年10月，ECMAScript 4.0草案發布，本來預計2008年8月釋出正式版本。但是，各方對於是否通過這個標準，發生了嚴重分歧。以新增功能
宣告命令
1.let命令 ES6新增了let命令，用來宣告變數。它的用法類似於var，但是所宣告的變數，只在let命令所在的程式碼塊內有效。下面程式碼在程式碼塊之中，分別用let和var聲明瞭兩個變數。然後在程式碼塊之外呼叫這兩個變數，結果let宣告的變數報錯，var宣告的變數返回了正確的值。這表明，let宣告的變數只在它所在的程式碼塊有效。| 1 2 3 4 5 6 |
{
leta=10;
varb=1;
}
console.log(b);//1
console.log(a);//報錯a沒有定義
|
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
vara=[];
for(vari=0;i<10;i++){
a[i]=function(){
console.log(i);
};
}
a[6]();//10
vara=[];
for(leti=0;i<10;i++){
a[i]=function(){
console.log(i);
};
}
a[6]();//6
|
| 1 2 3 4 5 6 7 8 9 10 11 12 |
leta=10;//即使宣告是vara=10;後面一樣報錯
leta=1;//報錯
functionfunc(arg){
letarg;//呼叫時因同範圍重名報錯
}
functionfunc(arg){
{
letarg;//不報錯，因為對上一個arg來看在子模組中
}
}
|
| 1 2 3 4 5 6 7 8 9 10 11 |
leti=123;
console.log(i);
for(leti=0;i<2;i++,console.log(i)){
leti='abc';
console.log(i);
}
//123
//abc
//1
//abc
//2
|
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
functiontext1(){
letn=5;//或varn=5;
if(true){
letn=10;
}
console.log(n);//5
}
functiontext2(){
varn=5;
if(true){
varn=10;
}
console.log(n);//10
}
functiontext3(){
letn=5;
if(true){
varn=10;//報錯，已經聲明瞭n
}
}
|
| 1 2 3 4 |
constfoo={};//constfoo=[]同理，可以正常使用push等功能
foo.prop=123;//為foo新增一個屬性，可以成功
console.log(foo.prop);//123
foo={};//將foo指向另一個物件，就會報錯
|
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
functionPoint(x,y){
this.x=x;
this.y=y;
}
Point.prototype.toString=function(){
return'('+this.x+','+this.y+')';
};
//上面為原先寫法，下面為ES6的Class寫法
classPoint{
constructor(x,y){//構造方法，this關鍵字代表例項物件
this.x=x;
this.y=y;
}
toString(){//自定義方法，方法之間不需要逗號分隔，加了會報錯
return'('+this.x+','+this.y+')';
}
}
|
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
classPoint{
constructor(){
}
toString(){
}
toValue(){
}
}
console.log(Object.keys(Point.prototype));//[]不可列舉
console.log(Object.getOwnPropertyNames(Point.prototype));//["constructor","toString","toValue"]
//相當於
functionPoint(){
}
Point.prototype={
constructor(){},
toString(){},
toValue(){},
};
console.log(Object.keys(Point.prototype));//["constructor","toString","toValue"]
|
| 1 2 3 4 5 |
letmethodName='getArea';
classSquare{
[methodName](){
}
}
|
| 1 2 3 4 5 6 7 8 |
constMyClass=classMe{//如果類的內部沒用到的話，可以省略Me
getClassName(){
returnMe.name;
}
};
letinst=newMyClass();
console.log(inst.getClassName())//Me
Me.name//報錯，Me沒有定義
|
| 1 2 3 4 5 6 7 8 |
classFoo{
staticclassMethod(){
return'hello';
}
}
Foo.classMethod()//'hello'
varfoo=newFoo();
foo.classMethod()//報錯foo.classMethod不是一個函式（不存在該方法）
|
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
classFoo{
staticbar(){
this.baz();//等同於呼叫Foo.baz
}
staticbaz(){
console.log('hello');
}
baz(){
console.log('world');
}
}
Foo.bar()//hello
classBarextendsFoo{
}
Bar.bar()//hello
|
| 1 2 3 4 5 6 7 8 9 10 |
//profile.js
exportvarfirstName='Michael';
exportfunctionf(){};
exportvaryear=1958;
//寫法2，與上等同
varfirstName='Michael';
functionf(){};
vary=1958;
export{firstName,f,yasyear};
|
| 1 2 3 4 5 6 |
exportvarfoo='bar';
setTimeout(()=>foo='baz',500);//輸出變數foo，值為bar，500毫秒之後變成baz
functionfoo(){
exportdefault'bar'//語法錯誤
}
|
| 1 2 3 4 5 6 |
import{firstNameasname,f,year}from'./profile.js';
import*aspfrom'./profile.js';
functionsetName(element){
element.textContent=name+''+year;//值等同於p.firstName+''+p.year;
}
|
| 1 2 3 4 5 6 7 8 9 10 11 12 |
import{a}from'./xxx.js';//也可以是絕對路徑，.js字尾可以省略
a.foo='hello';//合法操作
a={};//報錯：a是隻讀的
import{'f'+'oo'}from'/my_module.js';//報錯，語法錯誤（不能用運算子）
if(x===1){
import{foo}from'module1';//報錯，語法錯誤（import不能在{}內）
}else{
import{foo}from'module2';
}
|
| 1 2 3 4 |
foo();
import{foo}from'/my_module.js';//不會報錯，因為import的執行早於foo的呼叫
import'/modules/my-module.js';//不引入變數，但執行其中全域性程式碼
import{a}from'/modules/my-module.js';//重複引入不執行全域性程式碼，但引入變數a
|
| 1 2 3 4 5 6 7 8 |
//export-default.js
exportdefaultfunction(){
console.log('foo');
}
//import-default.js
importcustomNamefrom'./export-default.js';//customName可以是任意名字
customName();//'foo'
|
解構賦值
ES6允許按照一定模式，從陣列和物件中提取值，對變數進行賦值，這被稱為解構（Destructuring）。本質上，這種寫法屬於“模式匹配”，只要等號兩邊的模式相同，左邊的變數就會被賦予對應的值。| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
leta=1;
letb=2;
letc=3;
//等價於
let[a,b,c]=[1,2,3];
let[,third]=["foo","bar","baz"];
third//"bar"
let[head,...tail]=[1,2,3,4];
head//1
tail//[2,3,4]
let[x,y,...z]=['a'];
x//"a"
y//變數解構不成功，賦值為undefined
z//陣列解構不成功，賦值為[]
|
| 1 2 3 4 |
let[foo=true]=[];//foo=true
let[x,y='b']=['a'];//x='a',y='b'
let[q=1,w='b']=['a',undefined];//q='a',w='b'
let[e=1]=[null];//e=null
|
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
let{bar,foo}={foo:"aaa",bar:"bbb"};
foo//"aaa"
bar//"bbb"
let{abc}={foo:"aaa",bar:"bbb"};
abc//undefined
let{foo:baz}={foo:'aaa',bar:'bbb'};
baz//"aaa"
constnode={
loc:{
start:{
line:1,
column:5
}
}
};
let{loc,loc:{start},loc:{start:{line}}}=node;
line//1
loc//Object{start:Object}
start//Object{line:1,column:5}
|
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
//交換變數的值
letx=1;
lety=2;
[x,y]=[y,x];
//提取JSON資料
letjsonData={
id:42,
status:"OK",
data:[867,5309]
};
let{id,status,data:number}=jsonData;
console.log(id,status,number);//42,"OK",[867,5309]
//遍歷Map結構
constmap=newMap();
map.set('first','hello');
map.set('second','world');
for(let[key,value]ofmap){
console.log(key+"is"+value);
}
//firstishello
//secondisworld
|
字元處理
ES6 又提供了三種新方法用來確定一個字串是否包含在另一個字串中，而且這三個方法都支援第二個引數，表示開始搜尋的位置：- includes()：返回布林值，表示是否找到了引數字串。
- startsWith()：返回布林值，表示引數字串是否在原字串的頭部。
- endsWith()：返回布林值，表示引數字串是否在原字串的尾部。
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
//傳統寫法
alert(
'<div>Thereare<b>'+basket.count+'</b>'+
'itemsinyourbasket,'+
'<em>'+basket.onSale+
'</em>areonsale!</div>'
);
//模板字串，換行、空格、縮排均會保留
alert(`
<div>Thereare<b>${basket.count}</b>items
inyourbasket,<em>${basket.onSale}</em>
areonsale!</div>
`);
|
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
consttmpl=addrs=>`
<table>
${addrs.map(addr=>`
<tr><td>${addr.first}</td></tr>
<tr><td>${addr.last}</td></tr>
`).join('')}
</table>
`;
constdata=[
{first:'<Jane>',last:'Bond'},
{first:'Lars',last:'<Croft>'},
];
console.log(tmpl(data));
//<table>
//
//<tr><td><Jane></td></tr>
//<tr><td>Bond</td></tr>
//
//<tr><td>Lars</td></tr>
//<tr><td><Croft></td></tr>
//
//</table>
|
| 1 2 3 4 5 |
leta=5;
letb=10;
console.log`Hello${a+b}world${a*b}`;
//等同於
console.log(['Hello','world',''],15,50);
|