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

注:最后有面试挑战,看看自己掌握了吗

文章目录

  • 使用控制台检查变量值
  • 控制台
  • 使用 type of 检查变量的类型
  • 捕获拼错的变量名和函数名
  • 捕获使用赋值运算符而不是相等运算符
  • 捕捉函数调用后缺少的左括号和右括号


🌸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);

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/52675.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

如果网站用了CDN,我怎么找到它的真实IP?

0x01 验证是否存在CDN 方法1&#xff1a; 很简单&#xff0c;使用各种多地 ping 的服务&#xff0c;查看对应 IP 地址是否唯一&#xff0c;如果不唯一多半是使用了CDN&#xff0c; 多地 Ping 网站有&#xff1a; http://ping.chinaz.com/ http://ping.aizhan.com/ http://ce.…

JS解析JSON

在 JavaScript 中解析 JSON 数据 在 JavaScript 中&#xff0c;您可以使用 JSON.parse() 方法来解析 JSON 数据&#xff0c;示例代码如下&#xff1a; var json {"course": {"name": "JavaScript","author": "http://c.bianch…

探索CSS计数器:优雅管理网页元素的计数与序号

113. 探索CSS计数器&#xff1a;优雅管理网页元素的计数与序号 在前端开发中&#xff0c;我们经常需要对网页元素进行计数与序号&#xff0c;如有序列表、表格行号、步骤指示等。为了优雅地管理这些计数与序号&#xff0c;CSS提供了一种强大的功能&#xff1a;CSS计数器&#…

Stable diffusion 三大基础脚本 提示词矩阵,载入提示词,XYZ图表讲解

目录 0.本章讲解 1.提示词矩阵(prompt matrix) 1.2.提示词矩阵功能选项 1.2.1.把可变部分放在提示词文本的开头 1.2.2.为每张图片使用不同随机种子 1.2.3.选择提示词 1.2.4.选择分割符 1.2.5.宫格图边框&#xff08;像素&#xff09; 2.从文本框或文件载入提示词(Pro…

JVM基础篇-本地方法栈与堆

JVM基础篇-本地方法栈与堆 本地方法栈 什么是本地方法? 本地方法即那些不是由java层面实现的方法&#xff0c;而是由c/c实现交给java层面进行调用&#xff0c;这些方法在java中使用native关键字标识 public native int hashCode()本地方法栈的作用? 为本地方法提供内存空…

【数理知识】协方差,随机变量的的协方差,随机变量分别是单个数字和向量时的协方差

序号内容1【数理知识】自由度 degree of freedom 及自由度的计算方法2【数理知识】刚体 rigid body 及刚体的运动3【数理知识】刚体基本运动&#xff0c;平动&#xff0c;转动4【数理知识】向量数乘&#xff0c;内积&#xff0c;外积&#xff0c;matlab代码实现5【数理知识】协…

C 语言的 scanf() 函数

文章目录 概述转换说明intfloatdouble字符串 修饰符 modifier格式字符串中的空白格式字符串中的普通字符* 修饰符 概述 作用: Read formatted data from the standard input stream. 函数原型: int scanf( const char *format [,argument]… ); Parameters: format: Format …

Packet Tracer - 实施基本连接

Packet Tracer - 实施基本连接 地址分配表 设备 接口 IP 地址 子网掩码 S1 VLAN 1 192.168.1.253 255.255.255.0 S2 VLAN 1 192.168.1.254 255.255.255.0 PC1 网卡 192.168.1.1 255.255.255.0 PC2 网卡 192.168.1.2 255.255.255.0 拓扑图 目标 第 1 部分…

【数据结构与算法——TypeScript】算法的复杂度分析、 数组和链表的对比

【数据结构与算法——TypeScript】 算法的复杂度分析 什么是算法复杂度(现实案例)&#xff1f; ❤️‍&#x1f525; 前面已经解释了什么是算法&#xff1f; 其实就是解决问题的一系列步骤操作、逻辑。 ✅ 对于同一个问题&#xff0c;我们往往有很多种解决思路和方法&#x…

Adaptive autosar 都有哪些模块?各有什么功能?

Adaptive autosar是一种用于高性能计算ECU的软件平台,它支持自适应应用程序的开发和运行。它由两部分组成:基础(Foundation)和服务(Service)。基础包括了操作系统接口、执行管理、网络管理、识别访问管理、加密、更新和配置管理等功能。服务包括了通信管理、RESTful、时间…

OPENCV C++(四)形态学操作+连通域统计

形态学操作 先得到一个卷积核 Mat kernel getStructuringElement(MORPH_RECT,Size(5,5)); 第一个是形状 第二个是卷积核大小 依次为腐蚀 膨胀 开运算 闭运算 Mat erodemat,dilatemat,openmat,closemat;morphologyEx(result1, erodemat, MORPH_ERODE, kernel);morphologyEx…

命令行快捷键Mac Iterm2

原文:Jump forwards, backwards and delete a word in iTerm2 on Mac OS iTerm2并不允许你使用 ⌥← 或 ⌥→ 来跳过单词。 你也不能使用 ⌥backspace 来删除整个单词。 下面是在Mac OS上如何配置iTerm2以便能做到这一点的方法。 退格键 首先&#xff0c;你需要将你的左侧 ⌥…