JavaScript 未定义 - JavaScript 教程

摘要: 在本教程中，您将了解 JavaScript undefined 以及如何有效地处理它。

如果您一直在使用其他编程语言（如 Java 或 C#），您可能会发现这些语言具有 null 值。

JavaScript 也具有 null 值。此外，它还具有 undefined 值。并且 null 和 undefined 值在 JavaScript 中都表示空值。

什么是未定义

undefined 是 JavaScript 中的一种原始类型。因此 undefined 是一个类型。而 undefined 类型只有一个值，即 undefined。

JavaScript 在以下情况下使用 undefined 值。

1) 访问未初始化的变量

当您声明一个变量并且不将其初始化为一个值时，该变量将具有 undefined 的值。例如

let counter;
console.log(counter); // undefinedCode language: JavaScript (javascript)

建议您尽可能始终初始化变量。在本例中，您可以将 counter 变量初始化为零，如下所示

let counter = 0;
console.log(counter); // 0Code language: JavaScript (javascript)

2) 访问对象中不存在的属性

如果您访问对象中不存在的属性，您将获得 undefined。例如

let counter = {
   current: 0
};
console.log(counter.max); // undefinedCode language: JavaScript (javascript)

在本例中，counter 对象具有一个属性 current。访问 counter 对象中不存在的 max 属性将返回 undefined。

建议您在访问属性之前检查该属性是否存在。JavaScript 提供了一些方法可以做到这一点。

最常用的验证对象是否具有属性的方法是使用 in 运算符

'propertyName' in objectNameCode language: JavaScript (javascript)

请注意，您需要用单引号或双引号将对象的属性名称括起来。

以下示例使用 in 运算符在访问 counter 对象的 max 属性之前检查它是否存在

let counter = {
   current: 0
};

if('max' in counter) {
    console.log(counter.max);
}Code language: JavaScript (javascript)

如果您希望在对象的属性不存在时分配默认值，可以使用空值合并运算符 (??)

const propValue = object.propName ?? defaultValue;Code language: JavaScript (javascript)

在此语法中，如果 object.propName 为 undefined 或 null，则空值合并运算符 (??) 将返回 defaultValue。

请注意，空值合并运算符自 ECMAScript 2020 起可用。

let counter = { current: 0 };
const max = counter.max ?? 100;Code language: JavaScript (javascript)

3) 函数参数

当您使用一定数量的参数调用函数时，您通常会传递相同数量的参数。例如

const formatCurrency = (amount, currency) => {
   return currency === '$' ?
     `$${amount}`: `${amount} ${currency}`;
}
Code language: JavaScript (javascript)

formatCurrency() 函数具有两个参数。调用它时，您可以像这样传递两个参数

formatCurrency(100,'$'); // $100Code language: JavaScript (javascript)

并且它按预期返回 $100。

但是，当您调用 formatCurrency() 函数并且不传递所有参数时，函数内部的参数将变为 undefined。例如

formatCurrency(100); // 100 undefinedCode language: JavaScript (javascript)

为了避免这种情况，您可以为函数参数设置默认值，如下所示

const formatCurrency = (amount, currency = '$') => {
   return currency === '$' ?
     `$${amount}`: `${amount} ${currency}`;
}Code language: JavaScript (javascript)

当调用它而不传递第二个参数时，您将获得一个合适的值

formatCurrency(100); // $100Code language: JavaScript (javascript)

4) 函数返回值

没有 return 语句的函数会隐式返回 undefined。例如

const log = (message) => {
  const time = (new Date()).toLocaleTimeString();
  console.log(`${time}: ${message}`);
};

const result = log('Hi');
console.log(result); // undefinedCode language: JavaScript (javascript)

同样，当函数具有 return 语句但没有表达式时，它也会返回 undefined。例如

const add = (a,b) => {
    const result = a + b;
    return;
}

let result = add(10,20);
console.log(result);  // undefinedCode language: JavaScript (javascript)

请考虑以下示例

const add = (a,b) => {
    return 
       a + b;
};

let result = add(10,20);
console.log(result); // undefinedCode language: JavaScript (javascript)

add() 函数返回 undefined。它应该返回 30。

问题是，当您在 return 关键字和返回表达式 ( a + b ) 之间创建新行时，Javascript 编译器会在新行之前自动插入分号 (;)。此功能称为 JavaScript 中的 **自动分号插入 (ASI)**。

对于 JavaScript 编译器而言，add() 函数将如下所示

const add = (a,b) => {
    return;
       a + b;
};Code language: JavaScript (javascript)

这就是您获得 undefined 作为返回结果的原因。

5) 访问超出界限的数组元素

当您访问数组中超出界限的元素时，您将获得 undefined 值。例如

const colors = ['red', 'green', 'blue'];
console.log(colors[3]); // undefinedCode language: JavaScript (javascript)

在本例中，colors 数组在索引 3 处没有元素。因此，colors[3] 返回 undefined。

总结

undefined 是一种原始类型，它只有一个值 undefined。
访问未初始化的变量将返回 undefined。
访问对象中不存在的属性将返回 undefined。
访问超出界限的数组元素将返回 undefined。
没有 return 语句或具有 return 语句但没有表达式的函数将返回 undefined。

本教程对您有帮助吗？