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

简介: 【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 列,元素均为 0
  let newArray = [];
  for (let i = 0; i < m; i++) {
    // 添加第 m 行到 newArray
    let 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);


相关文章
|
1天前
|
存储 JavaScript 前端开发
掌握值类型和引用类型,让你的JavaScript代码更上一层楼!
掌握值类型和引用类型,让你的JavaScript代码更上一层楼!
|
1天前
|
资源调度 前端开发 JavaScript
Babel:JavaScript代码的编译利器
Babel:JavaScript代码的编译利器
|
1天前
|
JavaScript 前端开发 安全
抽象语法树(AST):理解JavaScript代码的抽象语法树
抽象语法树(AST):理解JavaScript代码的抽象语法树
|
2天前
|
JavaScript 前端开发 Go
动态加载与异步加载 JavaScript 详解:加载远程js,加载成功后执行回调函数
动态加载与异步加载 JavaScript 详解:加载远程js,加载成功后执行回调函数
|
3天前
|
移动开发 JavaScript 前端开发
Phaser和Three.js是两个非常流行的JavaScript游戏框架
【5月更文挑战第14天】Phaser是开源的2D游戏引擎,适合HTML5游戏开发,内置物理引擎和强大的图形渲染功能,适用于消消乐等2D游戏。Three.js是基于WebGL的3D库,用于创建3D场景和应用,支持各种3D对象和交互功能,广泛应用于游戏、可视化等领域。选择框架取决于项目需求,2D选Phaser,3D选Three.js。
15 4
|
3天前
|
JavaScript 前端开发 测试技术
编写JavaScript模块化代码主要涉及将代码分割成不同的文件或模块,每个模块负责处理特定的功能或任务
【5月更文挑战第10天】编写JavaScript模块化代码最佳实践:使用ES6模块或CommonJS(Node.js),组织逻辑相关模块,避免全局变量,封装细节。利用命名空间和目录结构,借助Webpack处理浏览器环境的模块。编写文档和注释,编写单元测试以确保代码质量。通过这些方法提升代码的可读性和可维护性。
13 3
|
3天前
|
JSON JavaScript 前端开发
使用JavaScript和XLSX.js将数据导出为Excel文件
使用JavaScript和XLSX.js将数据导出为Excel文件
27 0
|
3天前
|
JavaScript 前端开发 开发工具
【JavaScript 与 TypeScript 技术专栏】TypeScript 如何提升 JavaScript 代码的可读性与可维护性
【4月更文挑战第30天】TypeScript 提升 JavaScript 代码的可读性和可维护性,主要通过静态类型系统、增强代码组织、智能提示与错误检测、文档化和在大型项目中的优势。静态类型减少误解,类和接口提供结构,智能提示提高编码效率,类型注解充当内置文档。在大型项目中,TypeScript 降低理解差异,平滑迁移现有 JavaScript 项目,助力提高开发效率和项目质量。
|
3天前
|
JavaScript 前端开发 开发工具
【JavaScript 技术专栏】Node.js 基础与实战
【4月更文挑战第30天】本文介绍了Node.js的基础及应用,包括事件驱动的非阻塞I/O、单线程模型和模块系统。内容涵盖Node.js的安装配置、核心模块(如http、fs、path)及实战应用,如Web服务器、文件操作和实时通信。文章还讨论了Node.js的优劣势、与其他技术的结合,并通过案例分析展示项目实施流程。总结来说,Node.js是高效后端开发工具,适合构建高并发应用,其广阔的应用前景值得开发者探索。