Javascript基礎鞏固系列——錯誤處理機制+編程風格+console對象與控制檯

全手打原創，轉載請標明出處：https://www.cnblogs.com/dreamsqin/p/13712246.html， 多謝，=。=~（如果對你有幫助的話請幫我點個贊啦）

重新學習JavaScript是因爲當年轉前端有點兒趕鴨子上架的意味，我一直在反思我的知識點總是很零散，不能在腦海中形成一個完整的體系，所以這次想通過再次學習將知識點都串聯起來，結合日常開發的項目，達到溫故而知新的效果。與此同時，總結一下我認爲很重要但又被我遺漏的知識點～

錯誤處理機制

Error實例對象

JavaScript 原生提供Error構造函數，所有拋出的錯誤都是這個構造函數的實例。

var err = new Error('出錯了');
err.message // "出錯了"

原生錯誤類型

Error實例對象是最一般的錯誤類型，在它的基礎上，JavaScript 還定義了其他6種錯誤對象，即Error的6個派生對象。

• SyntaxError對象
  解析代碼時發生的語法錯誤，在語法解析階段就可以發現，例如變量名錯誤、缺少括號。

// Uncaught SyntaxError: Invalid or unexpected token
// Uncaught SyntaxError: Unexpected string

• ReferenceError對象
  引用一個不存在的變量時發生的錯誤，或者將一個值分配給無法分配的對象，例如對函數的運行結果賦值。

// Uncaught ReferenceError: unknownVariable is not defined
// Uncaught ReferenceError: Invalid left-hand side in assignment

• RangeError對象
  一個值超出有效範圍時發生的錯誤，例如數組長度爲負數、Number對象的方法參數超出範圍、函數堆棧超過最大值。

// Uncaught RangeError: Invalid array length

• TypeError對象
  變量或參數不是預期類型時發生的錯誤，例如對原始類型的值使用new命令、調用對象不存在的方法。

// Uncaught TypeError: number is not a func
// Uncaught TypeError: obj.unknownMethod is not a function

• URIError對象
  URI 相關函數（encodeURI()、decodeURI()、encodeURIComponent()、decodeURIComponent()、escape()和unescape()）的參數不正確時拋出的錯誤。

// URIError: URI malformed

• EvalError對象
  eval函數沒有被正確執行時拋出錯誤，該錯誤類型已經不再使用，只是爲了保證與以前代碼兼容，才繼續保留。

自定義錯誤

可以定義自己的錯誤對象，讓它繼承至Error對象，然後就可以生成這種自定義類型的錯誤了。

function UserError(message) {
  this.message = message || '默認信息';
  this.name = 'UserError';
}

UserError.prototype = new Error();
UserError.prototype.constructor = UserError;

new UserError('這是自定義的錯誤！');

throw語句

• 手動中斷程序執行並拋出一個錯誤。

var x = -1
if (x <= 0) {
  throw new Error('x 必須爲正數');
}
// Uncaught Error: x 必須爲正數

• throw可以拋出任何類型的值，它的參數可以是任何值。

// 拋出一個字符串
throw 'Error！';
// Uncaught Error！

// 拋出一個對象
throw {
  toString: function () {
    return 'Error!';
  }
};
// Uncaught {toString: ƒ}

try...catch語句

允許對錯誤進行處理，選擇是否往下執行，catch接受一個參數，表示try代碼塊拋出的值，catch代碼塊捕獲錯誤之後，程序不會中斷，會按照正常流程繼續執行下去，catch代碼塊中可繼續拋出錯誤或嵌套try...catch語句。

try {
  throw new Error('出錯了!');
} catch (e) {
  console.log(e.name + ": " + e.message);
  console.log("task:" + e.stack);
}
console.log("繼續執行了")
// Error: 出錯了!
// task:Error: 出錯了!
//   at <anonymous>:3:9
// 繼續執行了

finally語句

try...catch允許在最後添加一個finally代碼塊，表示不管是否出現錯誤，都必需在最後運行的語句。

var count = 0;
function countUp() {
  try {
    return count;  // return語句裏面的count值是在finally代碼塊運行之前就獲取了。
  } finally {
    count++;
  }
}

countUp()
// 0
count
// 1

編程風格

區塊

終於明白爲什麼區塊起首的大括號的位置通常建議跟在關鍵字的後面了，下面這種本來是要返回一個對象，但實際上返回的是undefined，因爲 JavaScript 自動在return語句後面添加了分號，這就導致了難以察覺的錯誤。

return
{
  key: value
};

// 相當於
return;
{
  key: value
};
// 推薦寫法
return {
  key : value
};

行尾的分號

除了for和while循環、if和switch以及try分支語句、函數的聲明語句這三種情況，所有語句都應該使用分號，否則大多數情況下Javascript會進行“分號的自動添加”（Automatic Semicolon Insertion，簡稱 ASI），但會出現應該添加卻沒添加的情況以及不該添加卻添加了的情況，難以預測；還有一個原因是有的代碼壓縮器是不會自動添加分號的；另外不寫結尾的分號，可能會導致腳本合併出錯，可以在句首自己額外添加一個分號避免這種問題。

// 引擎解釋爲 c(d+e)
var a = b + c
(d+e).toString();

// 引擎解釋爲 a = b/hi/g.exec(c).map(d)
// 正則表達式的斜槓，會當作除法運算符
a = b
/hi/g.exec(c).map(d);

// 解釋爲'b'['red', 'green']，
// 即把字符串當作一個數組，按索引取值
var a = 'b'
['red', 'green'].forEach(function (c) {
  console.log(c);
})

// 解釋爲 function (x) { return x }(a++)
// 即調用匿名函數，結果f等於0
var a = 0;
var f = function (x) { return x }
(a++)

// 如果continue、break、return和throw這四個語句後面，直接跟換行符，則會自動添加分號。
return
{ first: 'Jane' };

// 解釋成
return;
{ first: 'Jane' };

switch...case結構

在每一個case的最後一行必須是break語句，否則會接着運行下一個case，這樣不僅易忘還會造成代碼的冗長，而且該結構不使用大括號，不利於代碼形式的統一，結構類似於goto語句，容易造成程序流程的混亂，不符合面向對象編程的原則，建議採用對象結構替代。

function doAction(action) {
  var actions = {
    'hack': function () {
      return 'hack';
    },
    'slash': function () {
      return 'slash';
    },
    'run': function () {
      return 'run';
    }
  };

  if (typeof actions[action] !== 'function') {
    throw new Error('Invalid action.');
  }

  return actions[action]();
}

console對象與控制檯

console對象是 JavaScript 的原生對象，可以輸出各種信息到控制檯，並且還提供了很多有用的輔助方法。

console 對象的靜態方法

• console.log()
  可以接受一個或多個參數，將它們連接起來輸出；也可以使用格式佔位符，參數會依次填充輸出。
  %s：字符串
  %d：整數
  %i：整數
  %f：浮點數
  %o：對象的鏈接
  %c：CSS 格式字符串

var number = 11 * 9;
var color = 'red';
console.log('%d %s balloons', number, color);

console.log(
  '%cThis text is styled!',
  'color: red; background: yellow; font-size: 24px;'
)

// console對象的所有方法都可以被覆蓋，因此可以自定`console.log`方法。
['log', 'info', 'warn', 'error'].forEach(function(method) {
  console[method] = console[method].bind(
    console,
    new Date().toISOString()
  );
});

console.log("出錯了！");
// 2014-05-18T09:00.000Z 出錯了！

• console.table()
  可以將某些複合類型的數據轉爲表格顯示。

var languages = [
  { name: "JavaScript", fileExtension: ".js" },
  { name: "TypeScript", fileExtension: ".ts" },
  { name: "CoffeeScript", fileExtension: ".coffee" }
];

console.table(languages);

• console.count()
  用於計數，輸出它被調用了多少次，可以接受一個字符串作爲參數，作爲標籤，對執行次數進行分類。

function greet(user) {
  console.count(user);
  return "hi " + user;
}

greet('bob')
// bob: 1
// "hi bob"

greet('alice')
// alice: 1
// "hi alice"

greet('bob')
// bob: 2
// "hi bob"

• console.assert()
  進行條件判斷，如果不滿足條件，就顯示一個錯誤，但不會中斷程序執行。

console.assert(list.childNodes.length < 500, '節點個數大於等於500')

• console.time()和console.timeEnd()
  用於計時，可以算出一個操作所花費的準確時間，參數是計時器的名稱。調用timeEnd方法之後，控制檯會顯示“計時器名稱: 所耗費的時間”。

console.time('Array initialize');

var array= new Array(1000000);
for (var i = array.length - 1; i >= 0; i--) {
  array[i] = new Object();
};

console.timeEnd('Array initialize');
// Array initialize: 1914.481ms

控制檯命令行 API

• $(selector)
  返回第一個匹配的元素，等同於document.querySelector()，如果頁面腳本對$有定義，則會覆蓋原始的定義。
• $$(selector)
  返回選中的 DOM 對象，等同於document.querySelectorAll。
• inspect(object)
  打開相關面板，並選中相應的元素（打開Elements面板，高亮並選中指定的Dom元素）。

inspect(document.querySelector('.panel-block'))

• getEventListeners(object)
  返回一個對象，該對象的成員爲object登記了回調函數的各種事件（比如click或keydown），每個事件對應一個數組，數組的成員爲該事件的回調函數。

參考資料

JavaScript 語言入門教程 ：https://wangdoc.com/javascript/index.html