JS 未定义或为空 - Javascript

在Javascript开发中，我们常常会遇到'undefined' 或 'null' 的变量或值，如果不加以注意，这些变量或值可能会影响我们的代码执行。在本文中，将介绍如何避免JS未定义或为空的情况。

undefined 和 null 的区别

首先需要明确的是，undefined 和 null 是不同的。undefined 表示变量未被声明或变量声明后未被赋值，而 null 表示变量被明确赋值为null（即空值）。

let variable1; // 变量未被声明，此时variable1为undefined
console.log(variable1); // undefined

let variable2 = null; // 变量被明确赋值为null（空值），此时variable2为null
console.log(variable2); // null

未定义或为空的风险

当变量未定义或为空时，会出现意外的结果，因为Javascript会自动将变量处理成'undefined' 或 'null'。例如：

let number1; // 此时number1为undefined
let number2 = null; // 此时number2为null

console.log(number1 + 1); // NaN
console.log(number2 + 1); // 1

上述代码中，我们尝试将未声明或明确赋值为null的变量与数字相加，得到了不同的结果。对于number1来说，由于它的值为undefined，所以计算出的值为NaN(Not a Number)，而对于number2来说，虽然它的值为null，但是Javascript会将null视为0，所以计算出的值为1。

而且，当我们调用未定义或为空的变量的属性时，也会出现问题。例如：

let person;

console.log(person.name); // TypeError: Cannot read property 'name' of undefined

上述代码中，由于person变量未被赋值，调用person的属性name时，会抛出TypeError错误。

避免JS未定义或为空

为了避免这种情况，可以采用typeof和nullish coalescing operator来处理变量值为undefined和null的情况。

###使用typeof判断

typeof 可以用来检查一个变量是否已定义。例如：

let variable;

if (typeof variable === 'undefined') {
  console.log('变量未定义');
} else {
  console.log('变量已定义');
}

上述代码中，如果变量variable未定义，将输出'变量未定义'，否则将输出'变量已定义'。

###使用nullish coalescing operator

?? 运算符（双问号运算符）属于nullish coalescing operator，它可以用来检查一个变量是否为null或undefined，如果是，则返回默认值。例如：

let foo = null;
let bar = 'hello';

console.log(foo ?? 'world'); // world
console.log(bar ?? 'world'); // hello

上述代码中，由于foo的值为null，所以返回了默认值'world'，而bar的值为'hello'，所以返回了bar的值。

结论

Javascript中，避免JS未定义或为空是十分重要的。通过使用typeof和nullish coalescing operator可以避免这种情况的发生。始终确保变量已被正确定义或已被赋予适当的值，可以保证程序的正常运行。