【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.mzph.cn/news/22393.shtml

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

相关文章

使用FreeMarker导出word文档(支持导出图片)

今天跟大家分享一下工作中比较实用的导出word 带图片的功能。 对于在idea开发中我们需要引入以下依赖&#xff1a; 2.对于eclipse 开发我们需要进入对应的jar包 这个必须放在lib下&#xff0c;同样也需要在当前项目的环境是加入该依赖 需要在MEAT-INF加入 首先制定word 导出…

如何隐藏开源流媒体EasyPlayer.js视频H.265播放器的实时录像按钮?

目前我们TSINGSEE青犀视频所有的视频监控平台&#xff0c;集成的都是EasyPlayer.js版播放器&#xff0c;它属于一款高效、精炼、稳定且免费的流媒体播放器&#xff0c;可支持多种流媒体协议播放&#xff0c;包括WebSocket-FLV、HTTP-FLV&#xff0c;HLS&#xff08;m3u8&#x…

Windows安装JDK和JRE的方法

原文网址&#xff1a;Windows安装JDK和JRE的方法_IT利刃出鞘的博客-CSDN博客 简介 本文介绍Windows安装JDK和JRE&#xff08;Java8&#xff09;的方法。 下载 下载入口&#xff1a;https://www.oracle.com/java/technologies/javase/javase8-archive-downloads.html jdk-8…

计算机网络(2) --- 网络套接字UDP

计算机网络&#xff08;1&#xff09; --- 网络介绍_哈里沃克的博客-CSDN博客https://blog.csdn.net/m0_63488627/article/details/131967378?spm1001.2014.3001.5501 目录 1.端口号 2.TCP与UDP协议 1.TCP协议介绍 1.TCP协议 2.UDP协议 3.理解 2.网络字节序 发送逻辑…

Ansible之playbook剧本编写

一、playbook的相关知识 1.playbook简介 playbook是 一个不同于使用Ansible命令行执行方式的模式&#xff0c;其功能更强大灵活。简单来说&#xff0c;playbook是一个非常简单的配置管理和多主机部署系统&#xff0c;不同于任何已经存在的模式&#xff0c;可作为一个适合部署复…

Azure pipeline自动化打包发布

pipeline自动化&#xff0c;提交代码后&#xff0c;就自动打包&#xff0c;打包成功后自动发布 第一步 pipeline提交代码后&#xff0c;自动打包。 1 在Repos,分支里选择要触发的分支&#xff0c;这里选择cn_china,对该分支设置分支策略 2 在生产验证中增加新的策略 3 在分支安…

基于STM32103移植FreeRTOS

目录 一、FreeRTOS协议栈下载 二、准备工程文件与协议代码 三、移植FreeRTOS协议栈 一、FreeRTOS协议栈下载 1、官网下载 FreeRTOS - Market leading RTOS (Real Time Operating System) for embedded systems with Internet of Things extensionshttps://www.freertos.or…

“Why Should I Trust You?” Explaining the Predictions of Any Classifier阅读笔记

“Why Should I Trust You?” Explaining the Predictions of Any Classifier阅读笔记 1. 论文贡献2. 背景 [ 1 ] ^{[1]} [1]3. LIME解释单个样本3.1 总体思想3.2 构建可解释的数据表示 [ 1 ] ^{[1]} [1]3.3 可解释性和忠实度的权衡3.4 局部采样3.5 稀疏线性解释3.6 使用SVM进…

无人机航测技术有何特点?主要应用在哪些方面?

无人机航测是航空摄影测量的一种&#xff0c;主要面向低空遥感领域&#xff0c;具有成本低、快速高效、适用范围广等特点。目前&#xff0c;无人机航测主要应用于地形测绘、城市数字化建设、工程建设等方面。 无人机航测技术的特点 1、作业成本低 传统的人工测量技术主要利用…

2023 年牛客多校第六场题解

A Tree 题意&#xff1a;给定 n n n 个点的一棵边带权的树&#xff0c;点有黑白二色&#xff08; 0 , 1 0,1 0,1 表示&#xff09;&#xff0c;现在可以以 a i a_i ai​ 的价值翻转第 i i i 个点的颜色&#xff0c;一对异色点 ( u , v ) (u,v) (u,v) 的价值为树上路径的最…

视频监控汇聚平台EasyCVR视频分享页面WebRTC流地址播放不了是什么原因?

开源EasyDarwin视频监控TSINGSEE青犀视频平台EasyCVR能在复杂的网络环境中&#xff0c;将分散的各类视频资源进行统一汇聚、整合、集中管理&#xff0c;在视频监控播放上&#xff0c;TSINGSEE青犀视频安防监控汇聚平台可支持1、4、9、16个画面窗口播放&#xff0c;可同时播放多…

AI绘图实战(十二):让AI设计LOGO/图标/标识 | Stable Diffusion成为设计师生产力工具

S&#xff1a;AI能取代设计师么&#xff1f; I &#xff1a;至少在设计行业&#xff0c;目前AI扮演的主要角色还是超级工具&#xff0c;要顶替&#xff1f;除非甲方对设计效果无所畏惧~~ 预先学习&#xff1a; 安装及其问题解决参考&#xff1a;《Windows安装Stable Diffusion …

百度UEditor编辑器如何关闭抓取远程图片功能

百度UEditor编辑器如何关闭抓取远程图片功能 这个坑娘的功能&#xff0c;开始时居然不知道如何触发&#xff0c;以为有个按钮&#xff0c;点击一下触发&#xff0c;翻阅了文档&#xff0c;没有发现&#xff0c;然后再网络上看到原来是复制粘贴非白名单内的图片到编辑框时触发&a…

华为数通HCIA-华为VRP系统基础

什么是VRP? VRP是华为公司数据通信产品的通用操作系统平台&#xff0c;作为华为公司从低端到核心的全系列路由器、以太网交换机、业务网关等产品的软件核心引擎。 VRP提供以下功能&#xff1a; 实现统一的用户界面和管理界面 实现控制平面功能&#xff0c;并定义转发平面接口…

[数据集][目标检测]遛狗不牵绳数据集VOC格式-1980张

数据集格式&#xff1a;Pascal VOC格式(不包含分割路径的txt文件和yolo格式的txt文件&#xff0c;仅仅包含jpg图片和对应的xml) 图片数量(jpg文件个数)&#xff1a;1980 标注数量(xml文件个数)&#xff1a;1980 标注类别数&#xff1a;5 标注类别名称:["dog","p…

yo!这里是STL::vector类简单模拟实现

目录 前言 重要接口模拟实现 默认成员函数 1.构造函数 2.析构函数 3.拷贝构造函数 4.赋值运算符重载 迭代器 简单接口 1.size() 2.capacity() 3.swap() 操作符重载 1.操作符[] 扩容接口 1.reserve() 2.resize() 增删查改接口 1.push_back() 2.pop_back() …

大数据Flink(五十五):Flink架构体系

文章目录 Flink架构体系 一、 Flink中的重要角色 二、Flink数据流编程模型 三、Libraries支持

Flutter Flar动画实战

在Flare动面出现之前,Flare动画大体可以分为使用AnimationController控制的基础动画以及使用Hero的转场动画,如果遇到一些复杂的场景,使用这些动画方案实现起来还是有难度的。不过,随着Flutter开始支持Flare矢量动面,Flutter的动画开发也变得越来越简单。事实上,Flare动画…

实现天气预报走势图

实现效果&#xff1a; 这里我用的天气接口是网上开源的&#xff0c;可以自己找一下。 稍微简单封装了一下axiso以及接口 封装的axios&#xff1a; // import { useUserStore } from /stores/user import axios from axios import router from /router import { ElMessage } f…

9 多进程编程

文章目录 进程以及状态进程进程的状态linux下的进程管理pstopbgkillcrontab 进程的创建两个while同时运行示例获取进程pidProcess 结构给子进程指定的函数传递参数进程间是否共享全局变量补充 进程间通信-Queue常用操作Queue 实例 管道通信&#xff08;了解&#xff09;样例 进…