介紹ES6
ECMAScript是JavaScript的標準化版本,目標是統一該語言的規範和特性。由於所有主要的瀏覽器和JavaScript運行時都遵循這個規範,所以ECMAScript這個術語可以與JavaScript這個術語互換。
freeCodeCamp上的大多數挑戰都使用該語言的ECMAScript 5 (ES5)規範,該規範於2009年定稿。但JavaScript是一門不斷髮展的編程語言。隨着特性的增加和修訂,該語言的新版本將發佈供開發人員使用。
最新的標準化版本是2015年發佈的ECMAScript 6 (ES6)。
這個新版本的語言增加了一些強大的功能,這些功能將在本節的挑戰中介紹,包括以下:
- Arrow functions
- Classes Modules
- Promises
- Generators
- let and const
注意:不是所有的瀏覽器都支持ES6特性。如果您在自己的項目中使用ES6,您可能需要使用一個程序(編譯器)將ES6代碼轉換爲ES5,直到瀏覽器支持ES6。
let函數
- 特性一. 不可重寫
爲什麼要有let,因爲使用var關鍵字聲明變量的最大問題之一是,您可以覆蓋變量聲明而不會出錯,這在代碼量很大的時候,便會是個棘手的問題
var camper = 'James';
var camper = 'David';
console.log(camper);
// logs 'David'
正如您在上面的代碼中所看到的,camper變量最初被聲明爲James,然後被覆蓋爲David。
在小型應用程序中,您可能不會遇到這種類型的問題,但是當您的代碼變得更大時,您可能會意外地覆蓋一個您不打算覆蓋的變量。因爲這種行爲不會拋出錯誤,所以搜索和修復bug變得更加困難。
在ES6中引入了一個名爲let的新關鍵字來解決var關鍵字的這個潛在問題。如果要用上面代碼中的變量聲明來替換var,結果將是一個error。
- 特性二 作用範圍
當使用var關鍵字聲明變量時,該變量將在全局範圍內聲明,或者在函數內部聲明時在本地聲明。
let關鍵字的行爲類似,但是具有一些額外的功能。當您在塊,語句或表達式中使用let關鍵字聲明變量時,其範圍將限於該塊,語句或表達式。
看例子吧
var numArray = [];
for (var i = 0; i < 3; i++) {
numArray.push(i);
}
console.log(numArray);
// returns [0, 1, 2]
console.log(i);
// returns 3
上面那段代碼和下面的這段,是一樣的
var numArray = [];
var i;
for (i = 0; i < 3; i++) {
numArray.push(i);
}
console.log(numArray);
// returns [0, 1, 2]
console.log(i);
// returns 3
如果要創建一個函數並將其存儲以供以後使用i變量的for循環使用,則此行爲將導致問題。這是因爲存儲的函數將始終引用更新的全局i變量的值
var printNumTwo;
for (var i = 0; i < 3; i++) {
if (i === 2) {
printNumTwo = function() {
return i;
};
}
}
console.log(printNumTwo());
// returns 3
如您所見,printNumTwo()輸出3而不是2。這是因爲分配給i的值已更新,並且printNumTwo()返回全局i,而不是在for循環中創建函數時所具有的值。
下面看看 如果是let呢
let printNumTwo;
for (let i = 0; i < 3; i++) {
if (i === 2) {
printNumTwo = function() {
return i;
};
}
}
console.log(printNumTwo());
// returns 2
console.log(i);
// returns "i is not defined"
這裏的i定義在循環裏面,跳出循環,i就不起作用
const
const其實擁有let所有特性,再此基礎上,多加了一條可看不可改的特性
"use strict";
const FAV_PET = "Cats";
FAV_PET = "Dogs"; // returns error
一旦嘗試修改,就會拋出bug
const要注意的一個點是,最好用const的變量,命名時候一律大寫,這是業務規範。
當然 const加完,其實是可以改的
怎麼改呢,看下面代碼
"use strict";
const s = [5, 6, 7];
s = [1, 2, 3]; // throws error, trying to assign a const
s[2] = 45; // works just as it would with an array declared with var or let
console.log(s); // returns [5, 6, 45]
如果想實現真正意義上的固定,不讓別人改怎麼辦呢,僅const聲明並不能真正保護您的數據免遭突變。爲了確保您的數據不變,JavaScript提供了一個Object.freeze函數來防止數據突變。
凍結對象後,便無法再從中添加,更新或刪除屬性。更改對象的任何嘗試都會被拒絕,不會出錯。
代碼如下
let obj = {
name:"FreeCodeCamp",
review:"Awesome"
};
Object.freeze(obj);
obj.review = "bad"; // will be ignored. Mutation not allowed
obj.newProp = "Test"; // will be ignored. Mutation not allowed
console.log(obj);
// { name: "FreeCodeCamp", review:"Awesome"}
這樣就可以讓函數實現真正意義上的“冰凍”;