在JavaScript中遇到的BUG-js教程-PHP中文网

首页

web前端

js教程

在JavaScript中遇到的BUG

亚连

Jun 20, 2018 am 11:44 AM

bugjavascript

给大家详细着整理了在JavaScript开发中大家经常遇到的BUG和问题，需要的朋友参考学习下吧。

就算最牛的JavaScript开发者也会犯错。有时候导致程序的执行结果和预期不一样，有时候根本无法运行。这里我总结了10个常见的错误，我相信不管是初级还是资深开发者都可能遇到。

相等混淆

x是否和y相等？x是否为真？在JavaScript中，如何正确地做相等判断很重要，但似乎很多人搞不清楚。简单概括一下，主要是下面三种情况：条件判断(if, &&, etc.)，相等操作符(==)，和严格相等操作符(===)。

甚至，有的时候会不小心把赋值(=)当做相等操作符使用，千万不要搞错了！

避免使用赋值(=)

赋值(=)将右边的表达式赋值给左边的变量，例如：

var a = 3;

该语句声明了一个新的变量a，值为3。

表达式可以是程序中的任何东西，想象把它类比为语言中的名词，操作符(+,-,*,/)类比为动词。初学者一个常见的错误就是误用赋值(=)作为相等判断符。

if (a=4){...}

代码并不会像预期的执行那样。

慎用相等操作符

相等操作符(==)和他的双胞胎不等操作符(!=)非常好用，但也很危险，尽量少用。接下来介绍为什么：

0 == &#39;0&#39;

在相等符号下，0和0是相等的！因为解释器发现左右类型不一致，首先做了隐式类型转换。这会导致各种各样的问题，然后一出错还很难找到问题原因。

如果你真的想判断一个字符串包含的数字和某个数字是否真的相同，建议你这么做：

parseInt(0) === parseInt(&#39;0&#39;)

所以，建议使用严格相等/不等操作符。

0 === &#39;0&#39;

会返回false。

丢失的大括号

当程序变得复杂，特别是如果你使用JavaScript对象来存储数据的话，大括号会越来越多。下面是一段代码，但是少了一个大括号：

{
 “status”: “OK”,
 “results”: [{
 “id”: 12,
 “title”: “Coding JavaScript For Dummies”,
 “author”: “Chris Minnick and Eva Holland”,
 “publication_date”: ““,
 “summary_short”: ““,
 “link”: {
 “type”: “review”,
 “url”: ““,
 “link_text”: “Read the New York Times Review 
of Coding JavaScript For Dummies”
 },
 “awards”: [{
 “type”: “Nobel Prize”,
 “url”: ““,
 }]
}

你能看出来哪里少了东西吗？当不确定的时候，一个好的编辑器将会非常有用。Sublime Text有一个很不错的功能，当你把光标放在某个大括号的时候，和它匹配的大括号会高亮出来。

不匹配的引号

在定义字符串的时候，你可以自由使用单引号或则双引号。但是，如果一个字符串单引号开始，双引号结束就不行了。而且你需要注意本身字符串中的单引号或则双引号。

var movieName = “Popeye&#39;; // error!
var welcomeMessage = ‘Thank you, ‘ + firstName + ‘, let&#39;s learn JavaScript!&#39; // error!

总的来说，个人认为是一个非常灵活且好用的功能，但是一定要小心！

缺少必要的圆括号

该错误往往在条件语句出错处，特别是有多个条件的时候。

if (x > y) && (y < 1000) {
...
}

如果你注意看，会发现少了括号，正确的应该是这样：

if ((x > y) && (y < 1000)) {
...
}

缺少分号

JavaScript中的语句都应该分号结束。但如果这些语句各自占一行，那么你不写分号也没关系。不过不建议使用，因为会有潜在问题。如果你使用自动代码美化工具可能错误的将不同行的代码合并而出错。

最好的策略是都要加分号。

大写错误

JavaScript对大小写敏感，你需要对变量和函数的命名小心，不能把大小写搞错了。比如，Document对象的getElementById函数经常被写错为getElementByID。

在加载前引用

JavaScript的代码通常是按顺序执行，如果你引用了后面才创建的元素将会报错。

<html>
<head>
 <script>
 document.getElementById(“myp”).innerHTML = “This p is my p”;
 </script>
</head>
<body>
 <p id = “myp”>This p is your p.</p>
</body>
</html>

在脚本执行的时候，浏览器还不知道myp是什么。

避免这个问题的方法有很多：

将代码放到最后，也就是36cc49f0c466276486e50c850b7e4956后面

将代码放到函数中，并且和body的onload绑定。

<html>
<head>
 <script>
 function nameMyp() {
 document.getElementById(“myp”).innerHTML = “This p is my p”;
 }
 </script>
</head>
<body onload = “nameMyp();”>
 <p id = “myp”>This p is your p</p>
</body>
</html>

滥用保留字做变量名

一个很难被追踪的问题就是使用保留字做变量名。JavaScript中有超过60个保留字。当然，你不可能都把它们记住来避免使用。最好的方法就是使用更加具有描述性的字符来命名变量。

举个例子，name是一个保留字。如果你喜欢用name，那么最好细化，比如firstName，lastName，dogName和nameOfTheWind。

作用域问题

JavaScript中有函数作用域和全局作用域。如果你没有使用var关键字来声明，那么它是全局的。为了确保不同作用域的安全隔离，建议使用var。译者补充：建议使用let，更加安全，可参考本文：ES6之”let”能替代”var”吗?。

函数调用缺少参数

在JavaScript中，在函数调用的时候少了几个参数，有时候并不会出错，但可能达不到预期的执行结果。所以，确保你传入了足够的函数参数。

从0开始

永远不要忘记数组是从0开始。

var myArray = new Array();
myArray[10] = “List of 10 Common Mistakes”;
myArray.length; // 输出11!

上面是我整理给大家的，希望今后会对大家有帮助。

在vue中详细介绍mixins和extends用法

在canvas中如何实现轨迹回放功能

在vue.js中通过vue-router如何实现无效路由提示

在Vue中extend 、component有哪些区别？

以上是在JavaScript中遇到的BUG的详细内容。更多信息请关注PHP中文网其他相关文章！

声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

JavaScript数据类型：浏览器和nodejs之间是否有区别？May 14, 2025 am 12:15 AM

JavaScript核心数据类型在浏览器和Node.js中一致，但处理方式和额外类型有所不同。1)全局对象在浏览器中为window，在Node.js中为global。2)Node.js独有Buffer对象，用于处理二进制数据。3)性能和时间处理在两者间也有差异，需根据环境调整代码。

JavaScript评论：使用//和 / * * / * / * /May 13, 2025 pm 03:49 PM

JavaScriptusestwotypesofcomments:single-line(//)andmulti-line(//).1)Use//forquicknotesorsingle-lineexplanations.2)Use//forlongerexplanationsorcommentingoutblocksofcode.Commentsshouldexplainthe'why',notthe'what',andbeplacedabovetherelevantcodeforclari

Python vs. JavaScript：开发人员的比较分析May 09, 2025 am 12:22 AM

Python和JavaScript的主要区别在于类型系统和应用场景。1.Python使用动态类型，适合科学计算和数据分析。2.JavaScript采用弱类型，广泛用于前端和全栈开发。两者在异步编程和性能优化上各有优势，选择时应根据项目需求决定。

Python vs. JavaScript：选择合适的工具May 08, 2025 am 12:10 AM

选择Python还是JavaScript取决于项目类型：1)数据科学和自动化任务选择Python；2)前端和全栈开发选择JavaScript。Python因其在数据处理和自动化方面的强大库而备受青睐，而JavaScript则因其在网页交互和全栈开发中的优势而不可或缺。

Python和JavaScript：了解每个的优势May 06, 2025 am 12:15 AM

Python和JavaScript各有优势，选择取决于项目需求和个人偏好。1.Python易学，语法简洁，适用于数据科学和后端开发，但执行速度较慢。2.JavaScript在前端开发中无处不在，异步编程能力强，Node.js使其适用于全栈开发，但语法可能复杂且易出错。

JavaScript的核心：它是在C还是C上构建的？May 05, 2025 am 12:07 AM

javascriptisnotbuiltoncorc; saninterpretedlanguagethatrunsonenginesoftenwritteninc.1）javascriptwasdesignedAsalightweight，解释edganguageforwebbrowsers.2）Enginesevolvedfromsimpleterterterpretpreterterterpretertestojitcompilerers，典型地提示。

JavaScript应用程序：从前端到后端May 04, 2025 am 12:12 AM

JavaScript可用于前端和后端开发。前端通过DOM操作增强用户体验，后端通过Node.js处理服务器任务。1.前端示例：改变网页文本内容。2.后端示例：创建Node.js服务器。

Python vs. JavaScript：您应该学到哪种语言？May 03, 2025 am 12:10 AM

选择Python还是JavaScript应基于职业发展、学习曲线和生态系统：1)职业发展：Python适合数据科学和后端开发，JavaScript适合前端和全栈开发。2)学习曲线：Python语法简洁，适合初学者；JavaScript语法灵活。3)生态系统：Python有丰富的科学计算库，JavaScript有强大的前端框架。

See all articles