前端讀者 | ES6知識點概述
摘要：
本文來自 @羯瑞 整理
ES6，並不是一個新鮮的東西，ES7、ES8已經趕腳了。但是，東西不在於新，而在於總結。
變數的新定義 let 和 const
在ES6沒有被普及時，我們會用的變數定義的方法是var。其實，var對於一個剛剛接觸js的人說，或許並不覺得怪異。但是，對於一個開...
本文來自 @羯瑞 整理
ES6，並不是一個新鮮的東西，ES7、ES8已經趕腳了。但是，東西不在於新，而在於總結。
變數的新定義 let 和 const
在ES6沒有被普及時，我們會用的變數定義的方法是var。其實，var對於一個剛剛接觸js的人說，或許並不覺得怪異。但是，對於一個開發者而言，或許會在內心抨擊它。因為它就是javascript的敗筆之一，在其他語言看來的一個怪胎。那我們就來看看怪在何處呢？
- var 可以重複定義，let 在同一個塊級作用域中，不允許重複定義
var a = 10; var a = 11;
或許，你會看到這樣子的寫法覺得沒啥，那麼你很厲(wei)害(xian)。其實，這樣子的壞處不言而喻。在大型的工程化開發中，你定義一個a，我定義一個a，還有千千萬萬個你和我，這時，技術總監就該著急了。
同樣的例子換成 let ,你會發現瀏覽器報錯了
- var 可隨意修改，const 定義的變數不允許二次修改
var PI = 3.1415926 PI = 4.1415926
從例子中，我們可以看到，PI是一個我們經常會使用的常量，是公認的不可變動的。但在javascript中並不是如此。那天，如果你的PI被你們公司新晉的實習生改了，可能你找錯誤都得找半天，但這可不是實習生的鍋，也許，他並不知道這裡是個常量。
同樣的例子換成 const ,你會發現瀏覽器報錯了
- var 沒有塊級作用域，let 和 const 定義的變數會形成塊級作用域
if(true){
var i = 10;
}
console.log(i);//10
相信，這變數不存在塊級作用域給我們帶來過不少麻煩吧。不知道啥時候，又得在迴圈中套一層閉包呢。
同樣的例子換成 let 、const ,你會發現瀏覽器報錯了
- 變數不存在變數提升
//簡單的面試題
var a = 10;
function hello(){
console.log(a);
var a = 11;
console.log(a);
}
hello();
第一個console時，下面定義的變數a被提升了，所以a變成了undefined，第二個的話，就比較好理解...
使用let和const就會不一樣，它們並不存在變數提升
ES5 & ES6 一些簡單的程式碼區別
常量
//ES5
Object.defineProperty(window,'chenrf',{
configurable:'true',//型別可變
writable:'false',//值是否可變
value:'羯瑞',
})
console.log(window.chenrf);
//ES6
const chenrf="羯瑞";
作用域
//ES5
var cb2=[];
for(var a=0;a<3;a++){
cb2[a]=function(){
return a;
}
}
console.log([cb2[0](),cb2[1](),cb2[2]()]);//[1,2,3]
//ES6
let cb=[];
for(let a=0;a<3;a++){
cb[a]=function(){
return a;
}
}
console.log([cb[0](),cb[1](),cb[2]()]); //[3,3,3]
箭頭函式
//es5
var es5 = function(){
var a='chenrf-es5';
return a;
}
//es6
let es6=()=>{
let a='chenrf-es6';
return a;
}
console.log(es5()); //cherrf-es5
console.log(es6()); //chenrf-es6
預設引數
let es6=(a='chenrf-es6')=>{
return a;
}
console.log(es6()); //chenrf-es6
console.log(es6('chenrf')); //chenrf
this指向
var obj = {
i: 10,
//如果是直接return,可以不需要{}
b: () => this,
c: function() {
return this;
}
}
console.log(obj.b());//{}
console.log(obj.c());//{ i: 10, b: [Function: b], c: [Function: c] }
...剩餘引數
// => abc 等價於 return abc；es6語法 let addFun=(...abc)=> abc; console.log(addFun(1,2,3)); //[1,2,3] console.log(addFun(1,2,3,4,5,7));//[1,2,3,4,5,7]
總結
ES6還有很多新特性，如果你還想深入ES6進行了解的話，最直接的方式就是看書。希望你的程式碼寫的越來越優雅。