ES6知識點概述

羯瑞_發表於2018-08-01

本文來自 @羯瑞 整理，關注公眾號：前端讀者（fe_duzhe），每日推文...

ES6，並不是一個新鮮的東西，ES7、ES8已經趕腳了。但是，東西不在於新，而在於總結。

變數的新定義 let 和 const

在ES6沒有被普及時，我們會用的變數定義的方法是var。其實，var對於一個剛剛接觸js的人說，或許並不覺得怪異。但是，對於一個開發者而言，或許會在內心抨擊它。因為它就是javascript的敗筆之一，在其他語言看來的一個怪胎。那我們就來看看怪在何處呢？

  • var 可以重複定義，let 在同一個塊級作用域中，不允許重複定義
var a = 10;
var a = 11;
複製程式碼

或許，你會看到這樣子的寫法覺得沒啥，那麼你很厲(wei)害(xian)。其實，這樣子的壞處不言而喻。在大型的工程化開發中，你定義一個a，我定義一個a，還有千千萬萬個你和我，這時，技術總監就該著急了。

同樣的例子換成 let ,你會發現瀏覽器報錯了

201851522634

  • var 可隨意修改，const 定義的變數不允許二次修改
var PI = 3.1415926
PI = 4.1415926
複製程式碼

從例子中，我們可以看到，PI是一個我們經常會使用的常量，是公認的不可變動的。但在javascript中並不是如此。那天，如果你的PI被你們公司新晉的實習生改了，可能你找錯誤都得找半天，但這可不是實習生的鍋，也許，他並不知道這裡是個常量。

同樣的例子換成 const ,你會發現瀏覽器報錯了

201851522917

  • var 沒有塊級作用域，let 和 const 定義的變數會形成塊級作用域
if(true){
    var i = 10;
}
console.log(i);  //10
複製程式碼

相信，這變數不存在塊級作用域給我們帶來過不少麻煩吧。不知道啥時候，又得在迴圈中套一層閉包呢。

同樣的例子換成 let 、const ,你會發現瀏覽器報錯了

2018515221216

  • 變數不存在變數提升
//簡單的面試題
var a = 10;
function hello(){
    console.log(a);
  	var a = 11;
  	console.log(a);
}
hello();
複製程式碼

第一個console時，下面定義的變數a被提升了，所以a變成了undefined，第二個的話，就比較好理解...

2018515221457

使用let和const就會不一樣，它們並不存在變數提升

201851522171

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進行了解的話，最直接的方式就是看書。希望你的程式碼寫的越來越優雅。

相關文章