Js初学者容易犯的几个错误

更新日期: 2019-12-22阅读: 1.7k标签: 错误

JavaScript 是对初学者比较友好的一门编程语言,基本上花个半小时看下语法就能写出能运行的代码。JavaScript 是动态脚本语言,对数据类型没有太多的限制,写起来非常灵活。但正因为如此,初学者如果不深入了解语言本身,往往会犯一些错误,从而导致一些很难发现的 bug。

抛开 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 很容易上手,但稍不注意还是比较容易犯错。本文简单介绍了几种容易犯的错,希望对你有所帮助。


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

解决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,等等

点击更多...

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