JavaScript 初学者常犯的四个典型错误及避坑指南

前言

尽管 JavaScript 由 Brendan Eich 在极短时间内设计完成，难免存在一些历史遗留的设计局限。作为开发者，我们需要了解如何规避那些常见的低级错误。本文将列举几个高频出现的坑，帮助读者检查自身代码中是否存在类似问题。

混淆 undefined 和 null

在 JavaScript 中，undefined 和 null 均表示“无值”，但二者语义不同。undefined 的字面含义是“未定义”，其实际覆盖范围更广：包括读取对象不存在的属性、没有 return 语句的函数返回值、声明但未赋值的变量，以及显式赋值为 undefined 的变量，这些情况的结果均为 undefined。使用 typeof 检测其类型，返回字符串 'undefined'。相比之下，null 更为纯粹，只有显式赋值为 null 时变量才具有该值。此外，null 的类型被判定为对象，即 typeof(null) 返回字符串 'object'。

需要注意的是，在布尔判断中，undefined 和 null 均被视为 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，因为其类型检测结果为 'object'。

混淆数字相加和字符串拼接

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 的资料请关注本站其它相关文章！