ES6基礎入門之let、const

2019 年 11 月 21 日
筆記

file

作者 | Jeskson 來源 | 達達前端小酒館

首先呢？歡迎大家來學習ES6入門基礎let，const的基礎知識內容。初始ECMA Script6。

ESMAScript與JavaScript的關係：

ES是JS的標準（ES是對ECMAScript的縮寫） JS是ES的實現

file

file

ESMAScript的部分歷史：

1998-06 ES2發布，1999-12 ES3發布，成為js的通行標準

2007-10 ES4草案發布

2008-07 將ES4小部分內容提取，發布為ES3.1

2009-12 ES5發布

學習let和const關鍵字，塊級作用域

let與塊級作用域

變數聲明：var，直接使用

window.kk === kk // true

<script type="text/javascript">   var age = 11;   console.log(window.age);  </script>

let與var的主要區別

let聲明的變數只在當前塊級作用域內有效，let聲明的變數不能被重複聲明，不存在變數的提升。

ES6之前的作用域

全局作用域函數作用域 eval作用域

塊級作用域

就是一對花括弧的區域

{...}    if() {}  switch() {}  for() {}  try {} catch (err) {}  {}

塊級作用域可以嵌套

{   {    }  }

代表對象，不是塊級作用域：

var da = {   name: dada,  }

let只作用在當前塊級作用域內

{   var a = 1;   let b = 2;   }   console.log(a);   console.log(b);

{   // 1   let a = 1;   {    console.log(a); // 1    let b = 2;   }   console.log(b); // 錯誤  }

for(let i = o; i<3; i++) {  };  console.log(i);

使用let或者const聲明的變數，不能在被重新賦值

let不存在變數提升

console.log(da);  var da = 'dada';    console.log(dada);  let dada = 'dada';

暫時性死區

var da = '1';  {   console.log(da);   var da = '2';  }  console.log(da);

let da = '1';  {   console.log(da);   let da = '2';  }  console.log(da);

面試題：

生成10個按鈕，點擊彈出1-10：

var i=0;  for(i=1; i<=10; i++){   (function(i) {    var btn = document.createElement('button');    btn.innerText = i;    btn.onclick = function() {     alert(i)    };    document.body.appendChild(btn);    })(i);  }

for(let i = 1; i<=10; i++) {   var btn = document.createElement('button');   btn.innerText = i;   btn.onclick = function() {    alert(i);   };   document.body.appendChild(btn);  }

const常量，不可改變的量

常量是必須要賦值的，否則報錯

與let相似

不能重複聲明，不存在變數提升，只在當前塊級作用域內有效

常量是不可改變的？

file

一旦聲明常量，就不能再改變？

常量為引用類型的時候，不能保證不可變

解決引用類型，不可保證不可變

const只能保證地址的指向不改變，但是不能保證地址上的值不能改變

file

怎麼去防止常量去引用類型的時候能被修改的情況

Object.freeze(); // 凍結

file

es6之前聲明常量

var Da = '123';    Object.defineProperty();

file

file

file

file

file

Object.seal(); // 防止對象被擴展

file

file

file

file

file

hasOwnProperty()自身的屬性

file

file

seal()，defineProperty()，hasOwnperty()，freeze()。

Object.freeze() 方法可以凍結一個對象。

一個被凍結的對象再也不能被修改；凍結了一個對象則不能向這個對象添加新的屬性，不能刪除已有屬性，不能修改該對象已有屬性的可枚舉性、可配置性、可寫性，以及不能修改已有屬性的值。freeze() 返回和傳入的參數相同的對象。

const obj = {    prop: 42  };    Object.freeze(obj);    obj.prop = 33;  // Throws an error in strict mode    console.log(obj.prop);  // expected output: 42

hasOwnPreperty()剔除原型鏈上的屬性，如果是true,說明不是原型的屬性

Object.defineProperty() 方法會直接在一個對象上定義一個新屬性，或者修改一個對象的現有屬性，並返回這個對象。

obj 要在其上定義屬性的對象。 prop 要定義或修改的屬性的名稱。 descriptor 將被定義或修改的屬性描述符。

Object.seal()方法封閉一個對象，阻止添加新屬性並將所有現有屬性標記為不可配置。

const object1 = {    property1: 42  };    Object.seal(object1);  object1.property1 = 33;  console.log(object1.property1);  // expected output: 33    delete object1.property1; // cannot delete when sealed  console.log(object1.property1);  // expected output: 33

請點贊！因為你們的贊同/鼓勵是我寫作的最大動力！

歡迎關注達達的CSDN！

這是一個有品質，有態度的部落格

7d927f18ebd05ea1d505a572393fbc87.jpg