上一节我们详细讲解了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编码时可能发生的误区,希望读者引以为戒,减少犯错。
C语言网提供由在职研发工程师或ACM蓝桥杯竞赛优秀选手录制的视频教程,并配有习题和答疑,点击了解:
一点编程也不会写的:零基础C语言学练课程
解决困扰你多年的C语言疑难杂症特性的C语言进阶课程
从零到写出一个爬虫的Python编程课程
只会语法写不出代码?手把手带你写100个编程真题的编程百练课程
信息学奥赛或C++选手的 必学C++课程
蓝桥杯ACM、信息学奥赛的必学课程:算法竞赛课入门课程
手把手讲解近五年真题的蓝桥杯辅导课程