iT邦幫忙

2018 iT 邦幫忙鐵人賽
DAY 1
1
Modern Web

ES666系列 第 1

ES6 宣告變數新語法 Day1

ES6 又稱作 ES2015 ,是 JavaScript 的更新版本,
有許多好用的新語法來解決舊版本 JavaScript 的一些奇怪的問題與帶來了許多便利,
各家瀏覽器都已經實作 ES6 的新功能到自家產品上,因此已經可以放心的使用在專案上,
今後大概會每天講一點自己對 ES6 所知道的部分。

舊版 ES5 使用 var 宣告的變數會有互相影響的問題

使用 var 宣告變數會將變數加到全域物件 window 下,
在多人開發時,變數可能會互相影響導致其他問題,

var a = 1;
console.log(a);
for(var i = 0; i<3; i++) { // i 會被加到全域物件 window 下
  console.log(i);
}

這時候如果再查看全域物件 window 下 i 的值,會發現 i 的值為 3,

console.log(i) // 3

ES6 宣告變數新語法-1 let

let 變數範圍只(存活)作用在{}內,可解決影響全域變數的問題,
let 不能重複宣告變數,但可以重新賦值(使用=指定運算子),

// let 作用域 = {  }內
//if (3 > 2) {
//    let a = 1; // a 變數不會新增到 window 下
//}
var a = 0;
function changeA() {
let a = 1;
a = 0;
console.log(a);
}
changeA();
console.log(a);

let -for 用法

在 for 迴圈中使用 var 會將變數與全域物件連結,導致在事件的運用上也會出現與自己預期不一樣的事件結果。
在 for 圈使用let宣告變數可以讓變數在{}內的程式碼執行時重新與變數邦定,使得結果如自己的預期。

<body>
<ul class="list">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<script>
const listLen = document.querySelectorAll('.list li').length;
for(let i = 0; listLen > i; i++){   //如果用 var 宣告 i 變數在迴圈執行時在全域物件 window 的全域變數 i 會導致與預期不同。
document.querySelectorAll('.list li')[i].addEventListener('click',function() {
  alert(i+1);
})
}
</script>
</body>

ES6 宣告變數新語法-2 const

用const宣告變數 會讓變數變成不能重新被指派,物件與陣列除外,
因為不是原始型別,所以會依據參考指向整個物件(by reference),
物件裡的屬性是可以修改的,但不能將此物件重新指派成另一個新的物件,
可使用 Object.freeze 方法將物件凍結讓物件不能被修改,但只有第一層屬性有效果。


// let 與 const 用來宣告區塊裡的變數,
// 區塊 = { }
// const 唯獨變數 - 不能修改
// 變數不能被變更 - url 網址
// {} [] 物件與陣列可以修改
//const a = 1;
// a = 2;
//console.log(a); //出錯 用 const 宣告的變數不能重新指派

const obj = {
url: 'http://dfoa.com'
};
//obj.url = 'x'; //物件內的屬性可以修改
Object.freeze(obj); //如果不想讓屬性被修改 可以將物件凍結 讓裡面的屬性與值不能被修改
console.log(obj.url);

let、const 注意事項與使用時機

let 與 const 在同個區塊上不能重複命名,它們也不會與全域物件 window 連結 變成全域變數互相影響,

//let、const
//不可犯的錯誤,特性介紹
//第一點 不會向上提升( hoisting )
console.log(a);  //這會出錯因為找不到 a 變數
let a = 3;
console.log(a);

// 第二點 同個區塊上不能重複命名

let a = 1;
let a = 2;

//第三點 不會與全域物件 window 連結 變成全域變數互相影響,

let a = 1;
var b = 2;

var let const總結

  • 使用 var 宣告變數

屬於函數範圍
會自動Hoisting

  • 使用 let 宣告變數

作用範圍屬於區塊範圍{}內,且同一區塊內不能重複宣告同一變數
用 var 宣告過的變數,不能再使用 let 宣告一次
變數無法在用 let 宣告前使用

  • 使用 const 宣告變數

變數是唯獨的(物件與陣列除外)
必須給予預設值
與 let 同屬區塊變數(只作用在區塊範圍內),也不能重複宣告同一個變數(重複命名)


下一篇
ES6 解構賦值-上 Day2
系列文
ES66624

尚未有邦友留言

立即登入留言