乐趣区

关于javascript:JavaScript-开发中常见错误解决小总结

jiezi

身为一名前端打工人，当然是教训越多，在排查谬误时会更容易。情理都懂，但依然会在遇到问题时会不晓得怎么着手。

Chrome DevTools 中的常见谬误排查

Chrome 开发者工具的 Console 相当好用，最常应用的不外乎是通过 console.log 展现出变量或运算的后果，如果合乎预期则大快人心。

然而一旦呈现红字同病相怜的通知咱们“你出错了！”，这对咱们来说无疑是一种挫折，在不知如何着手解决谬误的时，只能反覆地查看本人的代码，看看是不是有什么奇怪的中央，有时就算停在了谬误中央也往往不知是什么意思，会因而破费大量的工夫。

本文就来介绍在 Chrome 开发者工具中常见的谬误反馈及排除技巧，让你不再为了满屏幕的红字感到挫折，更能从中学习如何疾速搜查错误代码。

留神：JavaScript 是属于同步的编程语言，如果呈现谬误就会造成前面的代码无奈运行，当 红字没有解决时，都有可能造成接下来的代码行谬误或是无奈持续运行。

谬误类型：SyntaxError

SyntaxError 类型的谬误通常是 语法 谬误，遇到这中谬误时倡议通过你所用的 IDE 排查，比方 VSCode 可能间接跳出这类型的谬误提醒。

如下图，VSCode 用红色波浪线提醒 family 对象有谬误，当呈现谬误时会倡议不要只查看以后行，谬误可能会存在于上下文中（有可能跨多行的谬误），这个例子中仔细检查能够发现在 '小明' 前面少了一个逗号。

排查重点：应用支流的 IDE 例如 “VSCode” 进行排查

Uncaught SyntaxError: Unexpected identifier

var person = {
  name: '小明'
  family: {name: '小明家'}
}

语法解析谬误，因为在对象构造中短少一个逗号，除了通过在 VSCode 中查看外，也能够间接通过 Chrome Console 切换到 Source 页面查看谬误行，并查看此行的上下文中是否存在语法错误。

Uncaught SyntaxError: Unexpected end of input

function fn() {console.log('这是一个函数');
console.log(fn);

语法解析谬误：未预期的完结，这个例子中短少结尾的大括号 }，在编写代码时尽可能的维持正确的锁紧，将代码排列参差之后更容易找到谬误。

Uncaught SyntaxError: Unexpected token ‘}’

if (name)
  console.log('立刻执行函数')
};

语法解析谬误：未预期的符号 }，代码结尾多了一个 } 符号导致环境运行谬误，这个谬误的排查办法与下面雷同，尽可能将代码排参差并维持首尾符号的统一。

除此之外再举荐一个 VSCode 工具，能够为你的首尾标签加上对应的色调：https://marketplace.visualstu…

例子：代码中成对的 {} 都会以雷同的色彩展现。

Uncaught SyntaxError: Identifier ‘a’ has already been declared

let a;
let a;

语法解析谬误：辨认符号（在这里指的是变量）曾经被申明，应该防止反复生命同一个变量，在 ES6 都禁止用 let、const 对变量进行反复申明，间接排除即可。

谬误类型：ReferenceError

ReferenceError 这类谬误通常是指找不到援用，当呈现这类谬误时在 IDE 中不肯定会提醒现谬误（除非装置了 Linter），所以在代码的运行阶段才会看到这类谬误。

排查重点：

  • 通过 Chrome 的提醒改过
  • 在 JavaScript 开发环境中装置 ESLint

ReferenceError: a is not defined

ReferenceError: a is not defined

援用谬误：因为变量 a 未定义，所以在应用这个变量时会呈现未定义的提醒，只有先定义好这个变量即可。

还有另一种很常见的状况，当援用内部包时呈现“包名 + is not defined”，这种状况通常是内部资源没有被正确载入，应该确保该资源被正确的引入。

上面的例子就是因为 jQuery 没有正确导入而导致的。

Uncaught ReferenceError: $ is not defined

谬误类型：TypeError

TypeError 是类型上的谬误，同样 IDE 也不会事后提醒有谬误，必须在执行时才会看到，这类型的谬误通常是以下几种：

  • 试图获取 undefined、null 的属性
  • 尝试调用非函式变量或表达式（例如: 'text'()）

排查重点：在获取变量前先确认其以后的数据类型及构造

Uncaught TypeError: Cannot read property ‘a’ of undefined

var a;
console.log(a.a);

阐明：在这个变量的值中无奈找到其特定的属性，例如在 undefined、null 的值上是找不到其它属性的，如果无奈确认该变量是否为 undefined，能够把代码改成这样：

if (typeof a !== 'undefined') {console.log(a.a);
}

Uncaught TypeError: console.log(…) is not a function

console.log('a')
(function() {console.log('立刻执行函数')
})()

阐明：这代码看起来是立刻执行函数的谬误，然而却呈现了 console.log(...) is not a function。这个谬误次要是因为短少了分号。

当遇到这类谬误时只有在两者之间补上分号即可。

console.log('a');
(function() {console.log('立刻执行函数')
})()

谬误类型：RangeError

这是创立了超过长度下限的数组或执行了无奈退出的递归函数所造成的谬误，遇到这类问题须要从新查看代码的逻辑，是否耗费了过多的资源（内存或 CPU 资源）。

排查重点：须要从新查看逻辑，如果有必要可先删除局部代码，先找出谬误的片段后再进行除错。

Uncaught RangeError: Maximum call stack size exceeded

(function a() {a();
})();

阐明：在函数调用时会产生一个函数调用栈，如果在递归的过程中超过下限则会产生谬误。

这类谬误也很常见，却不容易找到出错的起因，其次要起因是在递归时超过了环境的限度（应用框架时也很常见），如果遇到这谬误倡议改写以后调用函数的形式。

总结

当 Chrome Console 报错时要放弃淡定，在编码的过程中呈现谬误是很常见的，所谓的大佬与老手之间的区别之一就是 遇到谬误时的教训，遇到谬误时搞不清楚没关系，这都是教训的累积。只有积攒足够了，再遇到雷同的问题时就能自然而然的轻松面对了。

本文首发微信公众号：前端先锋

欢送扫描二维码关注公众号，每天都给你推送陈腐的前端技术文章

欢送持续浏览本专栏其它高赞文章：

  • 深刻了解 Shadow DOM v1
  • 一步步教你用 WebVR 实现虚拟现实游戏
  • 13 个帮你进步开发效率的古代 CSS 框架
  • 疾速上手 BootstrapVue
  • JavaScript 引擎是如何工作的？从调用栈到 Promise 你须要晓得的所有
  • WebSocket 实战：在 Node 和 React 之间进行实时通信
  • 对于 Git 的 20 个面试题
  • 深刻解析 Node.js 的 console.log
  • Node.js 到底是什么？
  • 30 分钟用 Node.js 构建一个 API 服务器
  • Javascript 的对象拷贝
  • 程序员 30 岁前月薪达不到 30K，该何去何从
  • 14 个最好的 JavaScript 数据可视化库
  • 8 个给前端的顶级 VS Code 扩大插件
  • Node.js 多线程齐全指南
  • 把 HTML 转成 PDF 的 4 个计划及实现
  • 更多文章 …
退出移动版