JavaScript 初学者容易犯的几个错误，你中招没？

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

更多前端技术干货尽在微信公众号：1024译站