es6和es5的對比

2021-09-19 11:44:19 字數 3578 閱讀 9522

這篇可以幫助剛入門的小夥伴對es6有個簡單的理解。

// es5常量寫法

object.defineproperties(window,"pi2",)//需要用api去宣告常量。給物件定義乙個屬性,讓這個屬性變成唯讀,常量掛載在window下

//執行

console.log(window.pi2)

//es6常量寫法,不需要api宣告常量

//宣告乙個常量

const pt=3.14159//唯讀,不允許給其賦值

console.log(pi)

//es5的寫法

const callbacks=//宣告乙個陣列

for(var i=0;i<=2;i++)

}//所以執行callbacks[0]()的時候,i已經變成3了

//因為這個閉包的作用域i就是乙個全域性

console.table([

callbacks[0](),

callbacks[1](),

callbacks[2](),

]) //輸出的值都是6

//es6中的作用域

const callbacks2=

for(let j=0;j<=2;j++)

}console.table([

callbacks2[0](),

callbacks2[1](),

callbacks2[2](),

])//輸出為0 2 4

//es5立即執行函式

(function()

console.log("foo()===1",foo()===1)

//為了分隔這個作用域就叫立即執行作用域

;((function()

console.log("foo()===2",foo()===2)

})())

})()//宣告了兩個函式,表示的是整兩個函式已經被兩個作用域給隔離開,在es5中保證一塊**要執行所在作用域的問題

//輸出的是foo()===1 true

// foo()===2 true

//es6就會很簡單直接用{}就能指定乙個跨作用域

console.log('foo()===1',foo()===1);

console.log('foo()===2',foo()===2);

}}//也就是說在es6中,乙個{}就把作用域進行了隔離,而在es5中必須使用立即執行函式(function(){})()才能對作用域進行隔離

function a()中的表示式直接作為返回值的話是可以省略{}的

}}//es5宣告乙個函式

) console.log(evens,odds);

}//輸出結果為 [1,2,3,4,5] [2,3,4,5,6]

//輸出結果為 [1,2,3,4,5] [2,3,4,5,6]

//箭頭函式跟普通函式的區別

//es3,es5

}//this的指向是該函式被呼叫的物件,也就是所函式被執行的時候,this指向的是哪個物件呼叫的function,也就是

//b()是c呼叫的,而c本身就是乙個物件,所以這個this指向的是c,c中的a也就是a+

} console.log(new factory().c.b())//輸出結果為 a+

};//es6寫法

//b在定義這個函式的時候this指向的是函式體中的this的

}}//箭頭函式中this的指向是定義式this的指向

console.log(new factory().c.b())//輸出結果為 a

// new factory().c.b()中c.b()例項就是 new factory(),而new factory()的例項也就是這個建構函式中的a

}//這就是es6中的箭頭函式

//預設引數

function a(x,y);

if(z===underfined)

return x+y+z

}console.log(f(1,3) )//輸出 46

}; console.log(f(1))//輸出50

console.log(f(1,3))//輸出46,預設引數起作用

}

)

return sum;

}//通過arguments來獲取函式當前的引數列表然後進行乙個迴圈乙個運算,這就是乙個可

//變引數的獲取然後的乙個求和

console.log(f(1,2,3));//輸出結果 6

console.log(f(1,2,3,6));//輸出結果 12})

return sum;

}//在es6中去獲取乙個可變的引數只需要...a,不需要偽陣列什麼的了

console.log(f(1,2,3));//輸出結果 6

console.log(f(1,2,3,6));//輸出結果 12

}

…a還可以有其他的用途,在es6中可用合併,如下所示:

//或想讓外部去操作這個資料,只能get新增乙個api

this.get=function(key)

//想賦值,這時候要檢查

this.set=function(key)}}

//宣告乙個例項

var person =new preson();

//讀取

console.table()

//修改

person.set('name','es3-cname');

console.table()//輸出的**中name已經被修改為es3-cname

person.set('***','c***');

console.table()//輸出的**中***沒有被修改,因為進行判斷了,***不允許修改};

object.defineproperties(person,'***',)//在es5中利用這個api達到乙個唯讀的效果,也就達到乙個保護的效果,唯讀不可寫

console.table()

person.name='es5=cname';

console.table()//輸出的**中name已經被修改為es5=cname

person.***='es5=***';

console.table()//報錯,不能給乙個唯讀的屬性賦值};

let person=new proxy(person,,

set(target,key,value)

}})//這個person是將來暴露給使用者操作的乙個物件,把最前面的person保護起來,以後操作的就是這個person,

//二這個person通過proxy()這個**掛上鉤,**的就是乙個原始資料,這裡面的target就是**的資料,key就是資料裡面的屬性

console.table()

//修改

trycatch(e)finally//報錯,不允許修改

}

ES6和ES5的區別

es6和es5的區別?1 定義變數 es5中用 var function es6中用 let const class import 沒有變數提公升 同乙個作用域中不可重複宣告 不會給window增加全域性屬性 會形成塊級作用域 const設定的變數值是不可修改的 理解為常量 暫時性死區 2 解構賦值...

es6和es5的區別

1 es6新增了let命令,用來宣告變數。它的用法類似於var,但是所宣告的變數,只在let命令所在的 塊內有效。a b let不像var存在變數提公升,即變數一定要宣告之後才能使用 2 塊級作用域 es5只有全域性作用域和函式作用域,沒有塊級作用域 3 變數的結構賦值 var a,b,c 1,2,...

es5和es6的區別

最近在看阮一峰的 ecmascript6入門 講真,這本書對初學者真的很有幫助,在這裡也推薦給大家。接下來,我要說的一些例子也大多 於這本書,如果對這本書感興趣的小夥伴,也可以戳這裡哦!1.新增let命令 在es6之前,我們宣告變數都是通過var,es6新增的let命令與var類似,與之不同是,le...