水牛的es6日記第一天【let和const】

介紹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"}

這樣就可以讓函數實現真正意義上的“冰凍”;

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章