怎样避免JavaScript常见错误？这些坑你踩过吗？
发布时间：2022-02-19 13:43:35 所属栏目：语言 来源：互联网
导读：对于JavaScript新手来说，常常容易犯一些比较低级错误，因此这篇文章小编就主要给大家分享怎样避免那些JavaScript常见错误，大家可以看看，有没有你曾经踩过的坑？ 混淆 undefined 和 null JavaScript 中的undefined和null都可用来表示没有值，但是二者之间
|
对于JavaScript新手来说，常常容易犯一些比较低级错误，因此这篇文章小编就主要给大家分享怎样避免那些JavaScript常见错误，大家可以看看，有没有你曾经踩过的坑？ 混淆 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之类的方法。 （编辑：许昌站长网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
