ES6基礎入門之let、const

時間 2020-01-07

標籤 es6 基礎入門 let const 欄目 JavaScript 简体版

原文原文鏈接

做者 | Jeskson
來源 | 達達前端小酒館javascript

01前端

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

ESMAScript與JavaScript的關係：es6

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

ESMAScript的部分歷史：算法

1998-06 ES2發佈，1999-12 ES3發佈，成爲js的通行標準編程

2007-10 ES4草案發布segmentfault

2008-07 將ES4小部份內容提取，發佈爲ES3.1設計模式

2009-12 ES5發佈網絡

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

let與塊級做用域

變量聲明：var，直接使用

window.location.href === location.href // 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類似

不能重複聲明，不存在變量提高，只在當前塊級做用域內有效

常量是不可改變的？

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

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

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

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

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

Object.freeze(); // 凍結

es6以前聲明常量

var Da = '123';

Object.defineProperty();

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

hasOwnProperty()自身的屬性

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