首页 / JAVASCRIPT / 在JavaScript中遇到的BUG

在JavaScript中遇到的BUG

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了在JavaScript中遇到的BUG，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含4397字，纯文字阅读大概需要7分钟。

内容图文

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

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

相等混淆

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

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

避免使用赋值(=)

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

var a = 3;

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

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

if (a=4){...}

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

慎用相等操作符

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

0 == '0'

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

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

parseInt(0) === parseInt('0')

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

0 === '0'

会返回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'; // error!
var welcomeMessage = ‘Thank you, ‘ + firstName + ‘, let's learn JavaScript!' // error!

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

缺少必要的圆括号

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

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

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

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

缺少分号

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

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

大写错误

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

在加载前引用

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

在JavaScript中遇到的BUG - 文章图片

<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是什么。

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

将代码放到最后，也就是</body>后面

将代码放到函数中，并且和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开始

在JavaScript中遇到的BUG - 文章图片

永远不要忘记数组是从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的详细内容，更多请关注Gxl网其它相关文章！

内容总结

以上是互联网集市为您收集整理的在JavaScript中遇到的BUG全部内容，希望文章能够帮你解决在JavaScript中遇到的BUG所遇到的程序开发问题。如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/286547.html

来源：【匿名】

【上一篇】在js中容易出现的兼容性易错问题【下一篇】javascript 怎么调用php方法

更多 ►

【在JavaScript中遇到的BUG】教程文章相关的互联网学习教程文章

JavaScript中双等的使用情况【代码】

https://www.cnblogs.com/lvmylife/p/10067824.html1.判断一个对象的值是否存在var obj = {}; if(obj.a == null) {// todo } 2. 判断函数入参是否存在function (a, b) {if(a == null) {// todo} }原文：https://www.cnblogs.com/ganiner/p/11518517.html

javascript中各类的prototype属性【代码】

prototype作用：获取调用对象的对象原型引用应用：可以为某对象原型添加方法例：function getMax() {var max = this[0];for(var x=0; x<this.length; x++){if(this[x] > max)max = this[x];}return max; } Array.prototype.getMax = getMax;//以后数组使用获取最大值的方法就可以如下调用，例如arr是以个整数数组 arr.getMax();//OK 原文：http://www.cnblogs.com/fantasy01/p/4072581.html

bobo javascript中onblur和onfocus

javascript中闭包的2种经典用法

闭包这个东西，网上有很多介绍资料。个人看了很多，还是一知半解。这里不做理论介绍，直接给出2个例子。代码1：记录函数被调用的次数function a() {var i = 0;function b(){return ++i;}return b; }var c = a(); c();//1 c();//2这种方式类似C语言中的private static变量，能够保持局部变量的内存不释放。代码2：正确给DOM注册事件处理函数<body><input type="button" id="b1" value="1"><input type="button" id="b2" value="2"...

Jquery第四课 Javascript中this的使用方法【代码】

thiskeyword的使用在JavaScript中使用thiskeyword表示调用方法的对象，这与大部分面向对象语言是一样的。可是因为call、apply、bind等函数的影响。我们能够改变this所代指的对象。使用call或者apply调用的函数中，this代指传入的第一个參数对象，假设传入null或者undefined。则表示全局对象(window)。通过对象调用函数（方法），函数中的this表示调用该函数的对象。单独调用的函数中this表示全局对象。varmyObject={sayHello:func...

JavaScript中，为什么eval和with会有性能问题？

词法作用域词法作用域意味着作用域是由书写代码时函数声明的位置来决定的。编译的词法分析阶段基本能够知道全部标识符在哪里以及是如何声明的，从而能够预测在执行过程中如何对它们进行查找。eval(..) 和 withJavaScript 中有两个机制可以“欺骗”词法作用域:eval(..) 和 with。前者可以对一段包含一个或多个声明的“代码”字符串进行演算，并借此来修改已经存在的词法作用域(在运行时)。后者本质上是通过将一个对象的引用当作...

javascript中split字符串分割函数【代码】

1、var ss=s.split("fs"); for(var i=0;i<ss.length;i++){ 处理每一个ss[i]; }2、"2:3:4:5".split(":") //将返回["2", "3", "4", "5"] "|a|b|c".split("|") //将返回["", "a", "b", "c"]3、<script type="text/javascript"> var str = "一二三四"; var str1 = "篮球、排球、乒乓球"; var arr = str.split("");//全部分割 var arr1 = str1.split("、");//按照顿号分割 var arr2 = str1.split("、",2);//按照顿号分割,保留两段 </...

javascript中各类高度和宽度的整理【代码】【图】

基础学的不扎实，关于高度宽度的各个属性总是糊里糊涂的，在这里理一下思路。下面的测试以以下html结构为例<div id="div1" style="height:200px;width:200px;padding:20px;margin:10px;border:1px solid #000;overflow:scroll"><div id="div2" style="height:1000px;width:1000px;padding:20px;margin:10px;border:1px solid #000;"></div></div> heightheight属性有点特殊，只能获取写在内联样式中的高度值，并且返回的是一个字符...

javascript中错误使用var造成undefined

在javascript中根据变量作用的范围不同分为局部变量和全局变量，直接定义的变量是全局变量，全局变量可以被所有的脚本访问；在函数中定义的变量是局部变量，局部变量只在函数内有效。如果全局变量和局部变量使用相同的变量名，则局部变量将会覆盖全局变量。例子代码：<!DOCTYPE html> <html><head><meta charset="utf-8"><title>js中全局变量与局部变量</title></head><body><script type="text/javascript">var a = "全局变量";fu...

JAVAScript中DOM与BOM的差异分析【代码】【图】

JAVAScript 有三部分构成，ECMAScript，DOM和BOM，根据浏览器的不同，具体的表现形式也不尽相同。我们今天来谈一谈DOM和BOM这俩者之间的差异。用百科上的来说：1. DOM是 W3C 的标准; [所有浏览器公共遵守的标准]2. BOM 是各个浏览器厂商根据 DOM在各自浏览器上的实现;[表现为不同浏览器定义有差别,实现方式不同]3. window 是 BOM 对象，而非 js 对象；DOM（文档对象模型）是 HTML 和 XML 的应用程序接口（API）。BOM 主要处理浏览...

Javascript中parseInt的正确使用方式【图】

定义和用法parseInt() 函数可解析一个字符串，并返回一个整数。语法?1parseInt(string, radix)parseInt(string, radix) 当参数radix的值为 0，或没有设置该参数时，parseInt()会根据 string来判断数字的基数。返回值返回解析后的数字。提示和注释注释：只有字符串中的第一个数字会被返回。注释：开头和结尾的空格是允许的。提示：如果字符串的第一个字符不能被转换为数字，那么 parseFloat() 会返回 NaN。实例在本例中，我们将使用...

JavaScript中BuildPath函数

JavaScript中BuildPath函数就是在已存在路径后追加名称。BuildPath()的使用方法为：　　object.BuildPath(path, name)　　object是必选项。应为 FileSystemObject 的名称。　　path是必选项。将被追加 name 的并存在的路径。路径可以是绝对的或相对的，同时不需要指定已有文件夹。　　name是必选项。被追加到已存在的 path 后的名称。http://www.mlybyby.com　　如果需要，BuildPath 方法会在已有路径和名称之间另外再插入一个...

javascript中ajax post实例详解

一，原生态的XMLHttpRequest 代码如下复制代码 <script language="javascript"> function saveintroduce() { //获取接受返回信息层 var introducemsg = document.getElementById("introducemsg"); //获取表单对象和用户信息值 var f = document.introduceedt; var elm1 = encodeURIComponent(f.elm1.value); //接收表单的URL地址 var url = "save.php?id=<?=$_GET["id"]?>"; //需要...

Javascript中Promise的简单使用【代码】

1// 函数功能：1秒以后创建一个10以内的随机整数，并判断这个数是否为偶数；如果是偶数则做一件事情，如果是奇数则做另一件事情 2function doSomthing() {3var promise = new Promise(function (resolve, reject) {4 setTimeout(function () {5 const num = Math.round(Math.random() * 10);6if (num % 2 === 0) {7 resolve(num);8 } else {9 ...

javascript中replace使用总结【代码】

ECMAScript提供了replace()方法。这个方法接收两个参数，第一个参数可以是一个RegExp对象或者一个字符串，第二个参数可以是一个字符串或者一个函数。现在我们来详细讲解可能出现的几种情况。　　1. 两个参数都为字符串的情况1var text = ‘cat, bat, sat, fat‘; 2// 在字符串中找到at，并将at替换为ond，只替换一次3var result = text.replace(‘at‘, ‘ond‘); 4// "cond, bat, sat, fat"5 console.log(result);　　2. 第一...

首页 / JAVASCRIPT / 在JavaScript中遇到的BUG

在JavaScript中遇到的BUG

内容导读

内容图文

内容总结

内容备注

内容手机端

【在JavaScript中遇到的BUG】教程文章相关的互联网学习教程文章

JAVASCRIPT - 相关标签

JAVASCRIPT - 技术教程分类

JAVASCRIPT - 最新教程

JAVASCRIPT - 最热教程