您的浏览器过于古老 & 陈旧。为了更好的访问体验, 请 升级你的浏览器
一纸荒年 发布于2019年11月27日 23:30

原创 查找并解决 JavaScript 代码的错误

164 次浏览 读完需要≈ 5 分钟 JavaScript

内容目录

错误类型

一般来说,代码错误主要分为两种:

  • 语法错误:代码中存在拼写错误,将导致程序完全或部分不能运行,通常你会收到一些出错信息。只要熟悉语言并了解出错信息的含义,你就能够顺利修复它们。
  • 逻辑错误:有些代码语法虽正确,但执行结果和预期相悖,这里便存在着逻辑错误。这意味着程序虽能运行,但会给出错误的结果。由于一般你不会收到来自这些错误的提示,它们通常比语法错误更难修复。

修复语法错误

在开发工具 JavaScript 控制台 中输入一些简单的 JavaScript 命令。更实用的是,当 JavaScript 代码进入浏览器的 JavaScript 引擎时,如果存在语法错误,控制台会提供出错信息。在JavaScript 中执行console.log() ,可以在控制台看到的执行结果。

  1. 打开JavaScript 控制台。查看出错信息。
  2. 根据浏览器输出信息跟踪错误,分析错误。
  • 红色 “!” 表示这是一个错误。
  • 表示问题出在哪儿:“TypeError:......”(类型错误:......
  • 点击[详细了解]将跳转到包含了此类错误超详细的解释页面
  • JavaScript文件名,点击将跳转到开发者工具的“调试器”标签页。 如果你按照这个链接,你会看到错误突出显示的确切行。
  • 出错的行,以及导致错误的首个字符号。

在控制台中看到错误信息要去分析输出的内容,然后对症下药。不能报红就惊慌失措。如下面栗子看到报错之后,再看中文解释是不是明朗很多?

SyntaxError: missing ; before statement // (语法错误:语句缺少分号)
SyntaxError: missing ) after argument list // (语法错误:参数表末尾缺少括号)
SyntaxError: missing : after property id // (语法错误:属性ID后缺少冒号)
SystaxError: missing } after function body //(语法错误:函数体末尾缺少花括号)
SyntaxError: expected expression, got 'string' //(语法错误:得到一个 'string' 而非表达式)
SyntaxError: unterminated string literal //(语法错误:字符串字面量未正常结束)

逻辑错误

语法未报错,但是执行之后的结果不是自己预期的,就需要分析写入的代码。

  • 大致查看全部代码,看看有没有变量弄错位置,或者是类型错误等。
  • 分析到精确的大概行数,使用console.log()预测输出结果,是否正确。
  • 更正代码,刷新之后如果未正确,重新执行第二行要求。

修正逻辑错误

举个栗子:我们调用 Math.random(),它生成一个在 0 和 1 之间的十进制随机数,例如 0.5675493843。

Math.random()

调用 Math.random() 的结果作为参数传递给 Math.floor(),它会舍弃小数部分返回与之最接近的整数。然后我们给这个结果加上1:

Math.floor(Math.random())

由于将一个 0 和 1 之间的随机小数的小数部分舍弃,返回的整数一定为 0,如果要取100以上的范围

// 必然不能保证100以上
Math.floor(Math.random() * 100)
// 更正
Math.floor(Math.random() * 100) + 100
  • CodePlayer技术交流群1
  • CodePlayer技术交流群2

0 条评论

撰写评论