iT邦幫忙

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

ES666系列 第 1

ES 6 宣告變數新語法 Day 1

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

舊版 ES 5 使用 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

ES 6 宣告變數新語法 - 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>

ES 6 宣告變數新語法 - 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
// 不可犯的錯誤,特性介紹
console.log(a);  // 這會出錯
let a = 3;
console.log(a); // 3

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

let a = 1;
let a = 2; 

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

let a = 1;
var b = 2;

var let const 總結

使用 var 宣告變數

  • 作用域依據函式來劃分
  • 有 Hoisting 特性

使用 let 宣告變數

  • 作用域依據區塊 {} 來劃分,且同一區塊內不能重複宣告同一變數
  • 用 var 宣告過的變數,不能再使用 let 宣告一次
  • 變數無法在 let 宣告前使用

使用 const 宣告變數

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

系列文
ES6661

1 則留言

0
hannahpun
iT邦新手 5 級 ‧ 2019-05-30 13:28:47

"ES6 又稱作 ES2015 ,是 JavaScript 的更新版本"
想了一下覺得好像說 JavaScript 的標準 (ECMAScript 5) 更新版本似乎更適合
因為 js 不像 vue.js 有 vue 1, vue 2, 他就是照著 ECMAScript 標準走
只是小建議~~
謝謝你的分享

我要留言

立即登入留言