前端开发中Js常见错误

更新日期: 2019-11-29阅读: 2.5k标签: 错误

1.错误分为两种: 

 (1)代码错误:这种错误浏览器会报错,可以根据错误类型去排错 

 (2)逻辑错误:这种错误浏览器不会报错,但是可以使用断点进行调试排错 


 2.代码错误类型 

 2.1语法错误:

即写的代码不符合js编码规则 报错为:Uncaught Syntaxerror:信息提示;我们可以根据后面的信息提示去修改错误,当然,语法错误,浏览器会直接报错,整个代码都不会执行。 

 2.2引用错误:

使用了没有定义的变量 报错为:Uncaught ReferenceError:信息提示;错误之前的代码会执行,之后代码不会执行 

 2.3类型错误:

提供的类型,不是JS所需要的; 报错为:Uncaught TypeError:信息提示;错误之前的代码会执行,之后代码不会执行 

 2.4范围错误:

指定的范围不是JS要求的 报错为:Uncaught RangeError:信息提示;错误之前的代码会执行,之后代码不会执行 3.逻辑错误 这类错误可能是逻辑顺序不正确,这种错误浏览器不会报错,我们可以通过断点调试排除错误 

JS常见的报错类型

1.Uncaught TypeError: Cannot read property '' of undefined

常见的一种是在渲染 UI 组件时对于状态的初始化操作不当,当你读取一个未定义的对象的属性或调用其方法时,这个错误会在 Chrome 中出现。

2.TypeError: ‘undefined’is not an object

这是在 Safari 中读取属性或调用未定义对象上的方法时发生的错误,Safari 使用了不同的错误消息提示语。

3.TypeError: 'null' is not an object
这是在 Safari 中读取属性或调用空对象上的方法时发生的错误,Safari 使用了不同的错误消息提示语。undefined 通常是一个尚未分配的变量,而 null 表示该值为空。 要验证它们不相等,请尝试使用严格的相等运算符 ===

这种错误可能发生场景是:在加载元素之前尝试在 JavaScript 中使用元素。 因为 dom api 对于空白的对象引用返回值为 null。

4.(unknown): Script error
当未捕获的 JavaScript 错误(通过window.onerror处理程序引发的错误,而不是捕获在try-catch中)被浏览器的跨域策略限制时,会产生这类的脚本错误。这是一种浏览器安全措施,旨在防止跨域传递数据,否则将不允许进行通信。

5.TypeError: Object doesn’t support property
这是您在调用未定义的方法时发生在 IE 中的错误。 您可以在 IE 开发者控制台中进行测试。

6.TypeError: ... is not a function
调用未定义的函数时,在 Chrome 中产生的错误

7.Uncaught RangeError: Maximum call stack
当你调用一个不终止的递归函数时或者将值传递给超出范围的函数,会报出的错,检查函数的递归调用,确保函数不是无限递归的

8. TypeError: Cannot read property ‘length’of undefined 
因为读取未定义变量的长度属性,通常会在数组中找到定义的长度,但是如果数组未初始化或者变量名称在另一个上下文中隐藏,则可能会遇到此错误。

var testArray = ["Test"];
function testFunction(testArray) {
  for (var i = 0; i < testArray.length; i++) {
    console.log(testArray[i]);
  }
}
testFunction();

当你用参数声明一个函数时,这些参数变成了函数作用域内的本地参数。这意味着即使你函数外有名为 testArray 的变量,在一个函数中具有相同名字的参数也会被视为本地参数。

9.Uncaught TypeError: Cannot set property ... of undefined
尝试访问一个未定义的变量时,它总是返回 undefined,我们不能获取或设置任何未定义的属性。

10.ReferenceError: ... is not defined
当您尝试访问未定义的变量或超出当前范围的变量时,会引发此错误。

11.Uncaught exception: ReferenceError: Cannot assign to ‘this’
尝试给一个不能被赋值的变量赋值时将发生该错误,确保不给函数函数的返回值或 this 关键字赋值。

12.Uncaught TypeError: Converting circular structure toJSON
该错误总是发生在使用 JSON.stringify 序列化一个存在循环引用的对象时,移除将要被转换为 JSON 字符串对象内部的循环引用。

13.Unexpected token ;
通常发生在缺少括号或分号时,该错误提示的行号有时并不能指向正确的位置

14.Uncaught SyntaxError: Unexpected token ILLEGAL
字符串字面量缺少闭合的引号,确保所有字符串都包含闭合的引号。


接下来,详细说明各种类型: 

1.Error:基类型。所有的错误都继承该类型。提供这个基类型的主要目的是提供给开发人员抛出自定义的错误(如:throw new Error(输出错误信息))。 

2.EvalError:使用eval()函数会抛出该错误。例如未将eval当作函数使用,例如 new eval()。 

3.RangeError: 数字超出范围会抛出该错误。例如,数组越界。 

4.ReferenceError:在找不到对象会抛出错误。例如 var obj = undefineObj,undefineObj未定义会报错。 

5.SyntaxError:语法错误。 

6.TypeError:类型错误。通常在if控制流中和全等,相等的比较中存在类型转换。 

7.URLError:使用eccodURL和decodeURL(),而URI格式不正确时,会导致错误。这个类型不常用。


错误的理解  

接着,简单的描述一下对错误的理解: 

错误主要出现在if控制流,类型转换和对于空值为进行判断,字段未定义等。在编写代码时一定要从正反两个角度考虑。不能单从正确的角度考虑,只有这样才可以保证代码的健壮性。 

最后,了解错误的使用方法: 

 throw 错误信息

throw  new Error(错误信息) 

throw new RangeError(错误信息,其他5种省略) 


链接: https://www.fly63.com/article/detial/6670

解决Cannot read property range of null 错误

vue工程npm run serve/start/dev启动时,node_modules文件报:Cannot read property range of null 错误,该问题是babel-eslint版本更新问题导致的;

HTTP 400 错误 - 请求无效 (Bad request)

在ajax请求后台数据时有时会报 HTTP 400 错误 - 请求无效 (Bad request);出现这个请求无效报错说明请求没有进入到后台服务里;原因:前端提交数据的字段名称或者是字段类型和后台的实体类不一致

js异步错误捕获

我们都知道 try catch 无法捕获 setTimeout 异步任务中的错误,那其中的原因是什么。以及异步代码在 js 中是特别常见的,我们该怎么做才比较?

不能执行已释放Script的代码

父页面初始化声明变量a为数组(数组对象是引用类型,赋值传递的是地址),创建iframe子页面后给父页面变量a赋值,赋值后销毁iframe子页面,再次调用变量a的时候就会抛出异常‘SCRIPT5011:不能执行已释放Script的代码’。

JS错误处理:前端JS/Vue/React/Iframe/跨域/Node

js错误的实质,也是发出一个事件,处理他,error实例对象message:错误提示信息,name:错误名称(非标准属性)宿主环境赋予

nodejs提示 cross-device link not permitted, rename 错误解决方法

文件上传的功能时候,调用fs.renameSync方法错误,这个提示是跨区重命名文件出现的权限问题。先从源文件拷贝到另外分区的目标文件,然后再unlink,就可以了。

Js中使用innerHTML的缺点是什么?

如果在JavaScript中使用innerHTML,缺点是:内容随处可见;不能像“追加到innerHTML”一样使用;innerHTML不提供验证,因此我们可能会在文档中插入有效的和破坏性的HTML并将其中断

Web前端开发,必须规避的8个错误点!

现在,有越来越多所谓的“教程”来帮助我们提高网站的易用性。我们收集了一些在Web开发中容易出错和被忽略的小问题,并且提供了参考的解决方案,以便于帮助Web开发者更好的完善网站。

web前端错误监控

为什么要做前端错误监控?1. 为了保证产品的质量2. 有些问题只存在于线上特定的环境3. 后端错误有监控,前端错误没有监控,前端错误分为两类: 即时运行错误和资源加载错误

自定义错误及扩展错误

当我们在进行开发的时候,通常需要属于我们自己的错误类来反映任务中可能出现的特殊情况。对于网络操作错误,我们需要 HttpError,对于数据库操作错误,我们需要 DbError,对于搜索操作错误,我们需要 NotFoundError,等等

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!