js 我不知道的東西太特么多了，基礎(chǔ)不扎實(shí)，因此這系列是在日常學(xué)習(xí)中看到的知識(shí)點(diǎn)然后自己作不同的嘗試去擴(kuò)展與填充自己知識(shí)空白部分

從 ES6 聲明變量的方式開(kāi)始

聲明變量這個(gè)東西必須用，但真的了解多少？

未聲明變量

當(dāng)我直接輸出一個(gè)未聲明的變量 myname 是會(huì)報(bào)一個(gè)未捕獲的錯(cuò)誤 Uncaught ReferenceError: myname is not defined

var log = '能夠執(zhí)行到這里？';
console.log(myname); // Uncaught ReferenceError: myname is not defined
console.log(log); // 上行代碼報(bào)錯(cuò)后此行及之后的代碼不會(huì)繼續(xù)執(zhí)行

未捕獲的錯(cuò)誤

捕獲異常

為了不影響后續(xù)代碼執(zhí)行，我們需要用 try catch 來(lái)捕獲錯(cuò)誤，

// var 的變量提升
var log = '能夠執(zhí)行到這里？'

try {
    console.log(myname);
    alert('不會(huì)執(zhí)行') // 上行代碼捕獲到異常后此行代碼也不會(huì)執(zhí)行
} catch (e) {
    console.log(e); // 日志輸出
    console.warn(e); // 警告黃色輸出
    console.error(e); // 錯(cuò)誤紅色輸出
    console.table(e); // 表格的方式輸出，包含了錯(cuò)誤在文件中第幾行第幾列
}
console.log(log); // 能夠執(zhí)行到這里？ 由于捕獲了異常所以可以執(zhí)行這行代碼

這里正好用控制臺(tái)的 4 個(gè) api 來(lái)輸出錯(cuò)誤信息

控制臺(tái)的 4 個(gè) api 來(lái)輸出錯(cuò)誤信息

這里你會(huì)看到 try catch 后的兩點(diǎn)變化

• 代碼能繼續(xù)執(zhí)行
• 未捕獲的錯(cuò)誤 Uncaught ReferenceError 已經(jīng)變成 ReferenceError

這里有個(gè)小插曲，為什么變量要用 myname 而不是 name，因?yàn)?name 是 window 的一個(gè)內(nèi)置屬性，值為空字符串，所以在未聲明 name 的前訪問(wèn)是不會(huì)報(bào)錯(cuò)，但未聲明 myName 則胡報(bào)錯(cuò)

console.log(name); // ''
console.log(myName); // Uncaught ReferenceError: myName is not defined

代碼地址 git repo
commit 5c9642bfdfdc73be20543b8c39bddd58ce308bec

var 聲明變量

• 變量提升
• 可重復(fù)聲明并賦值

// var 聲明變量
console.log(log); // var 聲明的變量會(huì)變量提升，因此這里不會(huì)報(bào)錯(cuò)而是輸出默認(rèn)值 undefined
var log = '存在'
console.log(log); // 存在
var log = "已成功改變"; // 可重復(fù)聲明 var，不會(huì)報(bào)錯(cuò)
console.log(log); // 已成功改變
var log; // 不賦值不改變值
console.log(log); // 已成功改變

let 聲明變量

• 變量不會(huì)提升
• 不可重復(fù)聲明并賦值

// var 聲明變量
console.log(log); // var 聲明的變量會(huì)變量提升，因此這里不會(huì)報(bào)錯(cuò)而是輸出默認(rèn)值 undefined
var log = '存在'
console.log(log); // 存在
var log = "已成功改變"; // 可重復(fù)聲明 var，不會(huì)報(bào)錯(cuò)
console.log(log); // 已成功改變
var log; // 不賦值不改變值
console.log(log); // 已成功改變

// let 聲明變量
console.log(log1); // 不能在用 let 聲明變量前訪問(wèn) Uncaught ReferenceError: Cannot access 'log1' before initialization，let 聲明的變量不存在提升
let log1 = 'let 聲明的變量'; 

let log = '修改 var 變量的值'; // 不可重復(fù)聲明 var 或 let 聲明過(guò)的變量 Uncaught SyntaxError: Identifier 'log' has already been declared， SyntaxError 會(huì)導(dǎo)致整個(gè)程序不運(yùn)行

// 無(wú)論是 var 還是 let 聲明過(guò)的變量，都不能重復(fù)聲明
let log1 = '重新賦值'; // Uncaught SyntaxError: Identifier 'log1' has already been declared
let log = '重新賦值'; // Uncaught SyntaxError: Identifier 'log' has already been declared

進(jìn)入語(yǔ)法分析時(shí):

• 如果語(yǔ)法錯(cuò)誤SyntaxError，則整個(gè)程序不會(huì)運(yùn)行;
• 如果引用錯(cuò)誤ReferenceError，只會(huì)導(dǎo)致錯(cuò)誤后面的代碼無(wú)法執(zhí)行;

代碼地址 git repo
commit f75661ecbff1687aa05df88ed06961a22d309d21

作用域

• js 里面只有全局作用域和函數(shù)作用域，沒(méi)有局部作用域
• js 運(yùn)行會(huì)有一個(gè)預(yù)解析過(guò)程，解析后會(huì)有一個(gè)語(yǔ)法樹(shù)，再進(jìn)入執(zhí)行階段

if (false) {
    var log = "能否輸出？"
}
console.log(log); // undefined 這里會(huì)有一個(gè)預(yù)解析（解析后會(huì)有一個(gè)語(yǔ)法樹(shù)，再進(jìn)入執(zhí)行階段）的過(guò)程，var 聲明的變量會(huì)在執(zhí)行前將變量提升到作用域上

if (false) {
    let log1 = "能否輸出？" // let 聲明的變量只存在離他最近的大括號(hào)內(nèi)
}
console.log(log1); // Uncaught ReferenceError: log1 is not defined，即使是 true log1 這行還是會(huì)報(bào)錯(cuò)

• for 循壞
  • var 聲明的變量沒(méi)有局部作用域，因此控制臺(tái)可以輸出最后計(jì)算的值
  • let 聲明的變量在 for 循環(huán)中使用是存在局部作用域（離他最近的大括號(hào)內(nèi)），因此這里不會(huì)覆蓋 var 聲明的 i，也不會(huì)出現(xiàn)重復(fù)聲明 i

// var 聲明的變量沒(méi)有局部作用域，因此控制臺(tái)可以輸出最后計(jì)算的值
for (var i = 0; i < 3; i++) {}
console.log(i); // 3

// let 聲明的變量在 for 循環(huán)中使用是存在局部作用域（離他最近的大括號(hào)內(nèi)），因此這里不會(huì)覆蓋 var 聲明的 i，也不會(huì)出現(xiàn)重復(fù)聲明 i
for (let i = 0; i < 5; i++) {
    console.log(i); // 1, 2, 3, 4, 5，這里輸出的是 let 里的 i
}
console.log(i); // 3 這里輸出的 i 是 var 聲明的 i

• 閉包
  • 使用 var 聲明 for 循環(huán)的初始變量 j，最終 j 點(diǎn)擊按鈕的時(shí)候會(huì)輸出計(jì)算后的最終值
  • 使用 let 聲明 for 循環(huán)的初始變量 j，由于存在塊級(jí)別作用域，會(huì)將 j 的值鎖死在當(dāng)前作用域內(nèi)，因此點(diǎn)擊會(huì)輸出對(duì)應(yīng)的 j 值

// 使用 var 聲明 for 循環(huán)的初始變量 j，最終 j 點(diǎn)擊按鈕的時(shí)候會(huì)輸出計(jì)算后的最終值
for (var j = 0; j < 2; j++) {
    document.querySelector('#var').addEventListener('click', () => console.log(j))
}
// var 聲明的也可使用閉包解決沒(méi)全局作用域的問(wèn)題
for (var k = 0; k < 2; k++) {
    (function(param){
        document.querySelector('#closure').addEventListener('click', () => console.log(param))
    })(k)
}
// 使用 let 聲明 for 循環(huán)的初始變量 j，由于存在塊級(jí)別作用域，會(huì)將 j 的值鎖死在當(dāng)前作用域內(nèi)，因此點(diǎn)擊會(huì)輸出對(duì)應(yīng)的 j 值
// let 的寫(xiě)法明顯優(yōu)雅與閉包，但 let 聲明變量性能會(huì)稍遜于 var，因?yàn)榫幾g時(shí)會(huì)自動(dòng)生成閉包
for (let j = 0; j < 2; j++) {
    document.querySelector('#let').addEventListener('click', () => console.log(j))
}

let 的寫(xiě)法明顯優(yōu)雅與閉包，但 let 聲明變量性能會(huì)稍遜于 var，因?yàn)榫幾g時(shí)會(huì)自動(dòng)生成閉包

代碼地址 git repo
commit 3e68005f3f08cdc5249be9c1ebeff82e95bf23ea

const 聲明常量

js 一直以來(lái)都沒(méi)有常量這個(gè)概念，es6 加入了常量，讓使用 const 聲明的常量變量不能重新賦值，多用于引入模塊保存到常量

// 常量
const log = '常量會(huì)被改變嗎？';
log = '不會(huì)'; // Uncaught TypeError: Assignment to constant variable.
console.log(log);

代碼地址 git repo
commit e6dbf861265b7b2901e1acd97fa1fdd1cbdbce2b