ES6 筆記

ES6 學習筆記

特點是盡量避免汙染全域變數，也避免合併程式碼的衝突，維護性高。

在ES5中宣告變數時

var a = 1;
console.log(a);

便會在window中產生全域的a值，進而可能前後相互影響，如果改用ES6的let與const就可以避免，這兩個是用來宣告區塊{}裡的變數，因此他們跑不出去區塊

//es5
var a = 1;
if (3 > 2) {
  var b = 1; //跑出全域
}
//改成
if (3 > 2) {
  let b = 1; //跑不出去
}

函數式時也一樣，

var a = 0;
function changeA(){
  let a = 0;
  a = 1;
  console.log(a);  //let跑不出{}
}
changeA();
console.log(a); //將會得到 1, 0的結果

因此var用在全域中有同樣的東西需要不斷呼叫時使用，函數式中就用let

變數汙染範例，在html中生成一組3個的li，設定點第一個會是1，第二個會是2...，

const listLen = document.querySelectorAll('.list li').length;
for (var i = 0; listLen > i; i++) {
  document.querySelectorAll('.list li')[i]
  .addEventListener('click', function(){
    alert(i + 1);
  });
};

但這樣的結果卻是每點一下都是4，因為i在第一個跑完成3後就變成3了再進入下一個區塊時就變成3+1，把var改成let之後，在第一層的{}區塊中都會維持變數，

for (let i = 0; listLen > i; i++) {
  document.querySelectorAll('.list li')[i]
  .addEventListener('click', function(){
    alert(i + 1);
  });
};

const唯讀變數 = 不能被修改

const a = 1;
a = 2; 
console.log(a);

這樣的a會顯示錯誤，因為const不能被修改，當嘗試去修改時便會出錯，但是凡事都會有例外，如果const用在{}[]中時可以被修改，如物件、陣列

const obj = {
  url: 'http://apple.com'
};
obj.url = 'http://pen.com';
console.log(obj.url); //可以修改

如果要在{}[]中都不給修改的話可以加上Object.freeze()，

const obj = {
  url: 'http://apple.com'
};
Object.freeze(obj);
//凍結裡面任何內容，常使用於預設的值，不讓其他人不小心修改到
console.log(obj.url);

差異：

console.log(a);
var a = 3;

js由上執行到下，a因為尚未定義顯示undefined，

console.log(a);
let a = 3; //or
const a = 3;

這邊則是顯示錯誤，因為let、const的特性是，只會在寫到時才創建，程式沒跑到前他們都不存在，而var則是會先建立起來等給值，所以才會有undefined(向上提升的特性)
同一區塊{}中let、const不能重複命名

var a = 1;
var a = 2; //可覆寫

let a = 1;
let a = 2; //錯誤

const a = 1;
const a = 2; //錯誤

let、const的宣告都不會變成全域變數，宣告後用console去查window是查不到的，而用var就會繼承到window中

使用``取代'++'(舊ie不支援)
ES6中帶入變數不需要使用++，使用${變數}

listLen.innerHTML = '<li><img src=' + ing + '></li>';
listLen.innerHTML = `<li><img src=" ${ img } "></li>`;