【JS代码调试技巧】你必须知道的Javascript技巧汇总

注：最后有面试挑战，看看自己掌握了吗

---

🌸I could be bounded in a nutshell and count myself a king of infinite space.

特别鸣谢：木芯工作室 、Ivan from Russia

---

使用控制台检查变量值

Chrome 和 Firefox 都有出色的 JavaScript 控制台（也称为 DevTools），可以用来调试 JavaScript 代码

可以在 Chrome 的菜单中找到“开发者工具”或 FireFox 的菜单中的 “Web 控制台”。 如果你使用其他浏览器或手机，我们强烈建议你切换到桌面版 Firefox 或 Chrome。

console.log() 方法可能是最有用的调试工具，它可以将括号中的内容输出到控制台。 将它放在代码中的关键点可以显示变量在当时的值。 在查看输出之前，最好先想清楚输出应该是什么。 在整个代码中使用检查点来查看计算状态将有助于缩小问题的范围。

下面是输出 Hello world! 字符串到控制台的示例：

console.log('Hello world!');

控制台

首先，打开浏览器控制台，以便查看日志。 要做到这一点，在大多数浏览器上，你可以右击顶部的 freeCodeCamp 导航栏，并点击 inspect。 然后在打开的窗口中找到 console 选项卡。

之后，使用 console.log 记录 output 变量。 查看这两个控制台，可以看到日志。 最后，在你的日志后面使用 console.clear 清除浏览器控制台。 查看两个控制台的差异。

使用 type of 检查变量的类型

可以使用 typeof 检查变量的数据结构或类型。 在处理多种数据类型时，这会对调试很有帮助。 如果想计算两数之和，但实际传入了一个字符串参数，则结果可能是错误的。 类型错误可能隐藏在计算或函数调用中。 当你以 JavaScript 对象（JSON）的形式访问和使用外部数据时尤其要小心。

下面是使用 typeof 的一些示例：

console.log(typeof "");
console.log(typeof 0);
console.log(typeof []);
console.log(typeof {});

控制台将按顺序显示字符串 string、number、object 和 object。

JavaScript 有七种原始（不可变）数据类型： Boolean，Null，Undefined，Number，String，Symbol （new with ES6），BigInt （new with ES2020）和一种可变数据类型：Object。 注意：在 JavaScript 中，数组在本质上是一种对象。

添加两个 console.log() 语句来检查代码中的两个变量 seven 和 three 的 typeof 值。

捕获拼错的变量名和函数名

console.log() 和 typeof 方法是检查中间值和程序输出类型的两种主要方法。 现在是时候了解一下 bug 出现的常见的情形。 一个语法级别的问题是打字太快带来的低级拼写错误。

变量或函数名的错写、漏写或大小写弄混都会让浏览器尝试查找并不存在的东西，并报出“引用错误”。 JavaScript 变量和函数名称区分大小写。

修复代码中的两个拼写错误，以便 netWorkingCapital 计算有效。

let myArray = [1, 2, 3];
let arraySum = myArray.reduce((previous, current) =>  previous + current);
console.log(`Sum of array values is: ${arraySum}`);

捕获使用赋值运算符而不是相等运算符

分支程序，即在满足某些条件时执行不同操作的程序，依赖于 JavaScript 中的if，else if、else语句。 条件有时采取测试一个结果是否等于一个值的形式。

这种逻辑可以表述为“如果 x 等于 y ，则…”，听起来像是可以使用 =（即赋值运算符）。 然而，这会导致程序中流程出问题。

如前面的挑战所述，JavaScript 中的赋值运算符 (=) 是用来为变量名赋值的。 并且 == 和 === 运算符检查相等性（三等号 === 是用来测试是否严格相等的，严格相等的意思是值和类型都必须相同）。

下面的代码将 x 赋值为 2，表达式会在执行后得到 true。 JavaScript 会把大部分的值都视为 true，除了所谓的 “falsy”值，即：false、0、“”（空字符串）、NaN、undefined 和 null。

let x = 1;
let y = 2;
if (x = y) {} else {}

在这个示例中，除非 y 值是假值，否则当 y 为任何值时，if 语句中的代码块都会运行。 我们期望运行的 else 代码块实际上将不会运行。

捕捉函数调用后缺少的左括号和右括号

当函数或方法不接受任何参数时，你可能忘记在调用它时加上空的左括号和右括号。 通常，函数调用的结果会保存在变量中，供其他代码使用。 可以通过将变量值（或其类型）打印到控制台，查看输出究竟是一个函数引用还是函数调用的返回值来检测这类错误。

下面示例中的两个变量是不同的:

function myFunction() {return "You rock!";
}
let varOne = myFunction;
let varTwo = myFunction();

这里 varOne 是函数 myFunction ，varTwo 是字符串 You rock!

修复代码，将变量 result 设置为调用函数 getNine 返回的值。

function zeroArray(m, n) {// 创建一个二维数组，有 m 行 n 列，元素均为 0let newArray = [];for (let i = 0; i < m; i++) {// 添加第 m 行到 newArraylet row = [];for (let j = 0; j < n; j++) {// 将 n 个 0 推入当前行以创建列row.push(0);}// 将当前行（已有 n 个 0）推送到数组newArray.push(row);}return newArray;
}let matrix = zeroArray(3, 2);
console.log(matrix);