JavaScript初学者容易犯的几个错误
目录
- 前言
- 混淆 undefined 和 null
- 混淆数字相加和字符串拼接
- return 语句换行问题
- 用 return 跳出 forEach 循环
- 总结
前言
抛开 JavaScript 语言设计层面的问题不说，毕竟它是 Brendan Eich 当年用短短十天时间设计出来的，有点缺陷也是在所难免。作为开发者，我们该怎样避免一些常见的低级错误呢？本文就列举几个常见错误，看看你有没有似曾相识。
混淆 undefined 和 null
JavaScript 中的undefined和null都可用来表示没有值，但是二者之间有所区别。undefined字面意思是“未定义”，但它的含义其实已经超出了变量未定义的范畴：尝试读取对象不存在的属性、没有return语句的函数的返回值、声明后没有赋值的变量甚至显式赋值为undefined的变量等，它们的结果都是undefined。用typeof测试它的类型，是字符串'undefined'。而null就比较纯粹了，变量只有设置为null才有这个值。另外，null是对象类型，即typeof(null)的值是字符串'object'。
需要注意的是，用if判断这两个值都是false，而且null==undefined是成立的，这一点初学者通常容易搞混。因此，尽量统一把“没有值”都设置为undefined，这样就省去了判断区分的麻烦。
返回undefined的函数：
const f = () => {}
设置变量的值为undefined：
x = undefined;
判断属性是否为undefined：
typeof obj.prop === 'undefined' obj.prop === undefined
判断变量是否为undefined：
typeof x === 'undefined'
变量声明后没有赋值，自动就有了undefined值。
如果一定要判断null，用全等判断：
obj.prop === null x === null
使用typeof是无法判断null的，因为它是对象类型。
混淆数字相加和字符串拼接
在 JavaScript 中，加号+操作符既可用于数字相加，也可以用于字符串拼接。由于 JavaScript 是动态语言，操作符会自动将变量转成相同数据类型再运算。比如：
let x = 1 + 1; // 2
结果是 2，是我们期望的数字相加操作，因为两个值都是数字。
但是，如果是下面这种表达式：
let x = 1 + '1'; // “11”
结果是'11'，因为第一个数字会转换成字符串。这里的加号+运算符被用作字符串拼接，而不是数字相加。这里能直接看到表达式的值还算清楚，如果是由多个变量组成的表达式就很难判断类型了。
为了解决这个问题，我们可以把字符串都转成数字类型，再进行运算。例如：
let x = 1; let y = '2'; let z = Number(x) + Number(y);
这样，运行结果就是3了。Number函数接收任意类型的值，如果能转成数字就返回数字，否则返回NaN。还可以用new Number(...).valueOf()函数：
let x = 1; let y = '2'; let z = new Number(x).valueOf() + new Number(y).valueOf();
由于new Number(...)是实例化一个构造函数，返回的是一个对象，并不是数字类型。如果要得到原始的数字类型，需要用该对象的valueOf方法。其实还有个更简洁的方法：
let x = 1; let y = '2'; let z = +x + +y;
变量前面的 + 作用是将它转换成数字，或者NaN，跟Number函数的作用相同。
return 语句换行问题
JavaScript 语法规定换行代表语句结束。例如：
const add = (a, b) => {
return
a + b;
}
add(1,2); // undefined
本以为会返回 3，实际上是undefined。这是因为在a + b之前，函数已经执行了return。要解决这个问题，有两个做法：要么把表达式跟return放在一行，要么把表达式套一层括号。
const add = (a, b) => {
return a + b;
}
// 或者
const add = (a, b) => {
return (
a + b
);
}
加括号为什么可以换行呢？因为括号里的是表达式，不是语句。表达式可以拆成多行，如果很长的话。用箭头函数会更直观：
const add = (a, b) => a + b
箭头函数里的单行表达式自带return效果，当然也可以在表达式外面套一层括号：
const add = (a, b) => (a + b)
这个括号在返回对象字面量的箭头函数里有点用处，因为不加圆括号()的话，{}只是函数体的开始和结束标记，要返回对象字面量，还要显式return {...}。
如果某行代码中的语句不完整，JavaScript 解析器会将下一行的语句合并一起解析。比如：
const power = (a) => {
const
power = 10;
return a ** 10;
}
// 等同于：
const power = (a) => {
const power = 10;
return a ** 10;
}
但是对于完整的语句，比如return，就不会合并多行。
用 return 跳出 forEach 循环
JavaScript 数组有个 forEach 方法，用于对数组元素进行循环操作。初学者很容易联想到 for循环的break或continue关键字，用来中止循环。但是对不起，forEach没有这两个关键字。那用return行不行？可以用，但它的作用就是提前返回函数，跟continue的效果类似，用于结束本次循环。要跳出整个循环，return做不到。
const nums = [1, 2, 3, 4, 5, 6];
let firstEven;
nums.forEach(n => {
if (n % 2 ===0 ) {
firstEven = n;
return n;
}
});
console.log(firstEven); // 6
代码本意是想找出第一个偶数，找到就退出循环。但实际并没有退出循环，因此最终结果是最后一个偶数。
有解决办法吗？这种情况可以用for循环，或者用数组filter、find之类的方法。
总结
虽然 JavaScript 很容易上手，但稍不注意还是比较容易犯错。本文简单介绍了几种容易犯的错，希望对你有所帮助。
以上就是JavaScript初学者容易犯的几个错误的详细内容，更多关于JS的资料请关注我们其它相关文章！
相关推荐
-
JS错误处理与调试操作实例分析
本文实例讲述了JS错误处理与调试操作.分享给大家供大家参考,具体如下: JavaScript 错误 - throw.try 和 catch try 语句测试代码块的错误. catch 语句处理错误. throw 语句创建自定义错误. finally 语句在 try 和 catch 语句之后,无论是否有触发异常,该语句都会执行. JavaScript try 和 catch try 语句允许我们定义在执行时进行错误测试的代码块. catch 语句允许我们定义当 try 代码块发生错误时,所执行的代
-
JavaScript将DOM事件处理程序封装为event.js 出现的低级错误问题
将 DOM 0级事件处理程序和DOM2级事件处理程序 IE事件处理程序封装为eventUtil对象,达到跨浏览器的效果.代码如下: var eventUtil = { // 添加事件句柄 addEventHandler:function (element,type,handler) { if (element.addEventListener) { element.addEventListener(type, handler,false); }else if(element.attachEven
-
详解JavaScript错误捕获
目录 一.基本使用与逻辑 二.特性 三.错误对象 四.较好的catch和throw策略 五.Promise的错误处理 六.性能损耗 一.基本使用与逻辑 使用 try{ //code.... }catch(err){ //error handling }finally{ //no matter what happens in the try/catch (error or no error), this code in the finally statement should run. } 逻辑
-
javascript 初学教程及五子棋小程序的简单实现
一.JavaScript简介 JavaScript一种直译式脚本语言,是一种动态类型.弱类型.基于原型的语言,内置支持类型.它的解释器被称为JavaScript引擎,为浏览器的一部分,广泛用于客户端的脚本语言,最早是在HTML(标准通用标记语言下的一个应用)网页上使用,用来给HTML网页增加动态功能. 二.hbulider工具的使用 1) hbulider的特点: 1.飞快的编码速度 2.HBuilder直接创建移动App,打包为ios或Android原生安装包 3.HTML5语法.HTML5+
-
7个你应该知道的JS原生错误类型
概述 从浏览器控制台到运行 Node.js的终端,我们到处都会看到错误.本文的重点是概述我们在js开发过程中可能遇到的错误类型. 提示:良好的错误提示会导致快速而无痛的发展经历与缓慢而痛苦的发展经历之间的区别.在编写可重用的代码时,请确保自己在编写清晰易懂的错误处理代码. 1. RangeError 当数字超出允许的值范围时,将会抛出此错误. 例如 const l = console.logconst arr = [90,88] arr.length=90**99 我们有一个数组,带有两个元素的
-
JS常见错误(Error)及处理方案详解
1. 错误的类型 Error: 所有错误的父类型 错误的子类型包括: ReferenceError: 引用的变量不存在 TypeError: 数据类型不正确的错误 RangeError: 数据值不在其所允许的范围内 SyntaxError: 语法错误 常见的内置错误: (1)ReferenceError: 引用变量不存在 console.log(a) //ReferenceError: a is not defined (2)TypeError: 数据类型不正确 var b = {} b.xxx
-
JavaScript初学者必看“new”
译者按: 本文简单的介绍了new, 更多的是介绍原型(prototype),值得一读. 原文:JavaScript For Beginners: the 'new' operator 译者: Fundebug 为了保证可读性,本文采用意译而非直译.另外,本文版权归原作者所有,翻译仅用于学习 当你使用new的时候,会: 1.创建一个新的空对象: 2.将this绑定到该对象: 3.添加一个名为__proto__的新属性,并且指向构造函数的原型(prototype): 4.返回该this对象. 如果你
-
JavaScript语句错误throw、try及catch实例解析
try 语句测试代码块的错误. catch 语句处理错误. throw 语句创建自定义错误. finally 语句在 try 和 catch 语句之后,无论是否有触发异常,该语句都会执行. JavaScript 抛出(throw)错误 当错误发生时,当事情出问题时,JavaScript 引擎通常会停止,并生成一个错误消息. 描述这种情况的技术术语是:JavaScript 将抛出一个错误. JavaScript try 和 catch try 语句允许我们定义在执行时进行错误测试的代码块. cat
-
Extjs学习过程中新手容易碰到的低级错误积累
1.下载extjs的安装包,里面没有.msi文件,看好多的安装方法说都有这个.msi文件,但是我在官方下载的解压缩后没有,以为不能用.说明一下,我用的开发工具是visualstudio 2008,其实根本不用安装,直接解压缩后放到创建的网站项目的目录下,然后再也页面添加extjs的引用就行啦. 2.extjs的引用的错误. <script type="text/javascript" src="extjs/adapter/ext/ext-base.js">
-
JavaScript初学者容易犯的几个错误
目录 前言 混淆 undefined 和 null 混淆数字相加和字符串拼接 return 语句换行问题 用 return 跳出 forEach 循环 总结 前言 抛开 JavaScript 语言设计层面的问题不说,毕竟它是 Brendan Eich 当年用短短十天时间设计出来的,有点缺陷也是在所难免.作为开发者,我们该怎样避免一些常见的低级错误呢?本文就列举几个常见错误,看看你有没有似曾相识. 混淆 undefined 和 null JavaScript 中的undefined和null都可用
-
pandas初学者容易犯的六个错误总结
目录 使用pandas自带的函数读取大文件 没有矢量化 数据类型,dtypes! 不设置样式 使用 CSV格式保存文件 不看文档! 总结 我们在这里讨论6个新手容易犯的错误,这些错误与你所使用工具的API或语法无关,而是与你的知识和经验水平直接相关.在实际中如果出现了这些问题可能不会有任何的错误提示,但是在应用中却会给我们带来很大的麻烦. 使用pandas自带的函数读取大文件 第一个错误与实际使用Pandas完成某些任务有关.具体来说我们在实际处理表格的数据集都非常庞大.使用pandas的rea
-
ASP初学者常犯的几个错误（ZT）
1.记录集关闭之前再次打开:------------------------------------sql="select * from test"rs.open sql,conn,1,1if not rs.eof thendim myNamemyName=rs("name")end ifsql="select * from myBook"rs.open sql,conn,1,1----------------------------------
-
Python新手们容易犯的几个错误总结
前言 这篇文章主要给大家总结了关于学习Python的新手们容易犯的几个错误,一共四个易犯错误,下面来看看详细的介绍吧. 一.i+=1 不等于++i 初学者对Python语言不是特别了解的话,又正好有c++,java的语言背景,很容易把++i和i+=1弄混 先来看一个小例子: i=0 mylist=[1,2,3,4,5,6] while i <len(mylist): print(mylist[i]) ++i 这段代码会想当然的认为,没有啥问题啊,一个循环输出,i不断的+1,蛮对的呀.其实不是的,
-
JavaScript初学者建议：不要去管浏览器兼容
如果可以回到过去的话,我会告诉自己这句话:"初学JavaScript的时候无视DOM和BOM的兼容性" 我初学时的处境 在我初学JavaScript的时候最头痛的就是浏览器兼容问题.在Firefox下面好好的代码放到IE就不能显示了,又或者是在IE能正常显示的代码在firefox又报错了. 前端开发工程师的职责就包括跨浏览器开发.所以我就在还不了解JS这门语言本身的时候去花时间学习浏览器兼容知识,这样会让JS学习难度增加.但是不能兼容主流浏览器的代码不能用在实际项目中. DOM和BOM
-
关于mysql调用新手们常犯的11个错误总结
前言 大家可能经常收到安全部门的警告邮件,SQL注入,XSS攻击漏洞等等,偶尔还被黑客挂了小马,郁闷不?还有数据库执行太慢(根据经验基本是没有正确使用索引导致) ,下面就跟着小编来一起看看MYSQL新手们常犯的11个错误吧. 1.使用MyISAM而不是InnoDB MySQL有很多的数据库引擎,单一般也就用MyISAM和InnoDB. MyISAM是默认使用的.但是除非你是建立一个非常简单的数据库或者只是实验性的,那么到大多数时候这个选择是错误的.MyISAM不支持外键的 约束,这是保证数据完整
-
手写TypeScript 时很多人常犯的几个错误
目录 前言 1.没有使用严格模式 我们为什么要使用严格模式? 2. 使用 || 确定默认值 那它应该是什么样子的呢? 3.使用any作为类型 为什么要这么做呢? 为什么不能用any? 4. val 作为 SomeType 强制告诉编译器它无法推断的类型. 这就是类型守卫的用途. 5. any在测试用例中的表现 在编写测试时 6. 可选属性 将属性定义为有时存在,有时不存在的可选属性. 清楚地表达,模型哪些组合存在,哪些不存在. 7. 使用一个字母作为泛型参数 用一个字母给作为名称,比如常用的T作
-
Python程序员开发中常犯的10个错误
Python是一门简单易学的编程语言,语法简洁而清晰,并且拥有丰富和强大的类库.与其它大多数程序设计语言使用大括号不一样 ,它使用缩进来定义语句块. 在平时的工作中,Python开发者很容易犯一些小错误,这些错误都很容易避免,本文总结了Python开发者最常犯的10个错误,一起来看下,不知你中枪了没有. 1.滥用表达式作为函数参数默认值 Python允许开发者指定一个默认值给函数参数,虽然这是该语言的一个特征,但当参数可变时,很容易导致混乱,例如,下面这段函数定义: 复制代码 代码如下: >>
-
JavaScript初学者应注意的七个细节详细介绍
种种语言都有它特别的地方,对于JavaScript来说,使用var就可以声明任意类型的变量,这门脚本语言看起来很简单,然而想要写出优雅的代码却是需要不断积累经验的.本文利列举了JavaScript初学者应该注意的七个细节,与大家分享. (1)简化代码 -------------------------------------------------------------------------------- JavaScript定义对象和数组非常简单,我们想要创建一个对象,一般是这样写的: 复
-
JavaScript初学者应注意的七个细节小结
每种语言都有它特别的地方,对于JavaScript来说,使用var就可以声明任意类型的变量,这门脚本语言看起来很简单,然而想要写出优雅的代码却是需要不断积累经验的.本文利列举了JavaScript初学者应该注意的七个细节,与大家分享. (1)简化代码 JavaScript定义对象和数组非常简单,我们想要创建一个对象,一般是这样写的: 复制代码 代码如下: var car = new Object(); car.colour = 'red'; car.wheels = 4; car.hubcaps