上一节我们详细讲解了JS中的异步编程,本节我们将学习JS中的常见使用误区。

1. 误用’=‘作比较运算符’==‘

/*误用赋值运算符作比较运算符*/
let n =1
if(n=2)console.log(n);//这里会判断为真,打印2。正常情况下应该不打印的

2. 误用比较运算符’==‘(宽松比较)和’===‘(严格比较)

在JS里,’==‘会进行类型转换后再比较,而’===‘直接进行类型和值的比较。此时会出现一个问题,如果有一个字符串’100‘和数字100,通过if判断两个是等同的,此时判断结果和我们的预期南辕北辙。所以,推荐使用严格比较’===‘。这里枚举几个比较运算符混淆使用的后果:

const s1='100'
const s2=100
if(s1==s2)console.log('使用==时,字符串和数字可以相等');//控制台会打印这句话

3. ’+‘运算

数字有’+‘运算,比如1+1=2;字符串也有’+‘运算,比如'dotcpp'+'.com'='dotcpp.com',默认有字符串参与的情况下都会被转为字符串拼接。如果我们想要字符串转数字,最好使用Number()强制类型转换。

let n1=0
let s1='1'
/*想要n1+s1返回Number类型*/
console.log(n1+Number(s1));//控制台打印1

4. 浮点型运算问题

由于JS使用 64 位双精度浮点数(IEEE 754)来表示所有数字,包括整数和小数。所以对于某些小数无法精确表示。

console.log(0.1+0.2);//0.30000000000000004

5. 字符串分行问题

由于ASI机制,字符串可以进行分行,可是如果在字符串中间分行则会报错:

/*不报错*/
const s1=
'Dotcpp'
/*报错*/
const s2= 'Dot
cpp'

我们可以使用'\'解决字符串中间分行报错问题:

/*不报错*/
const s2= 'Dot\
cpp

6. this关键字错误使用

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <button onclick="f()">按钮</button>
</body>
<script>
/*HTML 内联事件处理函数的特殊行为导致this指针没有指向函数的调用者*/
function f(){
  console.log(this);//这里this应该指向button , 但是控制台却打印window
  
}
</script>
</html>

想要解决这个问题,此时我们可以使用bind来更改this指针指向:

<button onclick="f.bind(this)()">按钮</button>

7.内存泄漏

定时器没有被及时手动清理,导致内存泄漏:

// 未清理的定时器
const time = setInterval(() => {}, 1000);

总结:本文简单枚举了7个JS编码时可能发生的误区,希望读者引以为戒,减少犯错。

点赞(0)

C语言网提供由在职研发工程师或ACM蓝桥杯竞赛优秀选手录制的视频教程,并配有习题和答疑,点击了解:

一点编程也不会写的:零基础C语言学练课程

解决困扰你多年的C语言疑难杂症特性的C语言进阶课程

从零到写出一个爬虫的Python编程课程

只会语法写不出代码?手把手带你写100个编程真题的编程百练课程

信息学奥赛或C++选手的 必学C++课程

蓝桥杯ACM、信息学奥赛的必学课程:算法竞赛课入门课程

手把手讲解近五年真题的蓝桥杯辅导课程

Dotcpp在线编译      (登录可减少运行等待时间)