前端讀者 | ES6知識點概述

本文來自 @羯瑞 整理

ES6，並非一個新鮮的東西，ES七、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進行了解的話，最直接的方式就是看書。但願你的代碼寫的愈來愈優雅。