本文深入探讨了在javascript中安全访问对象属性，特别是当这些属性可能为`null`或`undefined`时，如何避免运行时错误。通过讲解可选链操作符 (`?.`) 和三元运算符的结合使用，文章提供了健壮的代码实践，确保在属性缺失或无效时，程序能够优雅地处理，尤其是在将属性值用作数组或对象索引的场景中，有效防止了常见的 `typeerror`。
1. 问题背景：直接访问属性引发的错误
在JavaScript开发中，我们经常需要访问对象的嵌套属性。然而，如果对象本身或其某个中间属性是null或undefined，直接访问其子属性会导致程序抛出 TypeError。一个常见的场景是将对象的某个属性值用作另一个数组或对象的索引，如下例所示：
const conversionFactorArr = {
'kg': { conversionFactor: 2.2 },
'g': { conversionFactor: 0.0022 }
};
let point = { sum: 100 };
let item = { /* 假设 item.unit 可能缺失或为 null/undefined */ };
// 潜在的错误代码：
// point.sum = point.sum * conversionFactorArr[item.unit].conversionFactor;
// 如果 item.unit 为 null 或 undefined，尝试访问 conversionFactorArr[null] 或 conversionFactorArr[undefined]
// 进而尝试访问 .conversionFactor，就会引发 TypeError。当 item.unit 为 null 或 undefined 时，conversionFactorArr[item.unit] 的结果也会是 undefined（假设 conversionFactorArr 中没有 null 或 undefined 键）。此时，再尝试访问 undefined.conversionFactor 就会导致 TypeError，因为 undefined 没有属性可供访问。
2. 解决方案：可选链与三元运算符的结合
为了解决上述问题，我们可以利用JavaScript中的可选链操作符 (?.) 和三元运算符来安全地访问属性并提供备用值。
2.1 可选链操作符 (?.)
可选链操作符允许我们尝试访问可能不存在的属性，而不会在属性链中的某个引用为 null 或 undefined 时抛出错误。如果链中的某个引用是 null 或 undefined，表达式会短路并返回 undefined。
// 示例：安全访问 item.unit
const unitValue = item?.unit; // 如果 item 为 null/undefined，unitValue 为 undefined
// 如果 item 存在但没有 unit 属性，unitValue 也为 undefined
// 如果 item.unit 存在，则为 item.unit 的值2.2 三元运算符提供备用值
虽然可选链能够防止错误，但它在属性不存在时返回 undefined。在某些情况下，我们需要一个具体的备用值（例如空字符串 ''、默认数字或其他默认键），而不是 undefined，尤其是在将该值用作索引时。这时，三元运算符就派上用场了。
const unitKey = item?.unit ? item.unit : '';
这行代码的逻辑是：
- item?.unit：首先尝试安全地获取 item.unit 的值。
- 如果 item 是 null 或 undefined，item?.unit 返回 undefined。
- 如果 item 存在但没有 unit 属性，item?.unit 返回 undefined。
- 如果 item.unit 存在且值为非 null 或 undefined 的值（包括 0、false、空字符串等），则返回该值。
- ? item.unit : ''：这是一个三元运算符。
- 如果 item?.unit 的结果是“真值”（truthy，即非 false、0、''、null、undefined、NaN），则 unitKey 的值为 item.unit 的实际值。
- 如果 item?.unit 的结果是“假值”（falsy，例如 undefined、null、0、''），则 unitKey 的值为 ''。
通过这种方式，我们确保 unitKey 变量始终是一个有效的字符串（要么是 item.unit 的值，要么是空字符串 ''），从而可以安全地用作 conversionFactorArr 的索引。
3. 完整的代码示例与注意事项
将上述技术应用于原始问题，我们可以构建一个更健壮的解决方案：
const conversionFactorArr = {
'kg': { conversionFactor: 2.2 },
'g': { conversionFactor: 0.0022 },
'': { conversionFactor: 1 } // 重要：为备用值（空字符串）提供一个默认的转换因子
};
let point = { sum: 100 };
function processConversion(itemData) {
// 1. 安全获取 unit 属性，并提供空字符串作为备用值
const unitKey = itemData?.unit ? itemData.unit : '';
// 2. 检查 conversionFactorArr 中是否存在该 unitKey
if (conversionFactorArr.hasOwnProperty(unitKey)) {
point.sum = point.sum * conversionFactorArr[unitKey].conversionFactor;
console.log(`处理成功：当前总和为 ${point.sum}，使用的单位是 '${unitKey}'。`);
} else {
console.warn(`警告：未找到单位 '${unitKey}' 的转换因子。总和保持不变：${point.sum}。`);
}
}
// 测试用例
console.log(`初始总和：${point.sum}`);
// 正常情况
processConversion({ unit: 'kg' }); // point.sum = 100 * 2.2 = 220
// item.unit 为 null
processConversion({ unit: null }); // unitKey 为 ''，point.sum = 220 * 1 = 220
// item.unit 为 undefined
processConversion({ unit: undefined }); // unitKey 为 ''，point.sum = 220 * 1 = 220
// item 没有 unit 属性
processConversion({}); // unitKey 为 ''，point.sum = 220 * 1 = 220
// item 本身是 null
processConversion(null); // unitKey 为 ''，point.sum = 220 * 1 = 220
// item 本身是 undefined
processConversion(undefined); // unitKey 为 ''，point.sum = 220 * 1 = 220
// 假设有一个不存在的单位
processConversion({ unit: 'lb' }); // unitKey 为 'lb'，触发警告，point.sum 保持 220注意事项：
- 备用键处理： 当使用三元运算符提供备用值（如 ''）时，务必确保你的查找对象 (conversionFactorArr) 能够处理这个备用键。在上面的例子中，我们为 conversionFactorArr 添加了 '' 键，并为其分配了一个默认的转换因子（例如 1），这通常意味着不进行转换。
- 显式检查： 在访问 conversionFactorArr[unitKey] 之前，添加 conversionFactorArr.hasOwnProperty(unitKey) 或 unitKey in conversionFactorArr 这样的检查是一个良好的实践。这可以防止在 unitKey 确实是一个有效字符串，但 conversionFactorArr 中没有对应的键时，再次尝试访问 undefined.conversionFactor 导致错误。
- 语义选择： 并非所有情况下都需要三元运算符提供备用值。如果 undefined 作为结果是可接受的（例如，后续逻辑会检查 undefined 并跳过操作），那么单独使用可选链 (item?.unit) 就足够了。只有当你需要一个特定的、非 undefined 的默认值时，才结合三元运算符。
4. 总结
在处理可能存在 null 或 undefined 值的对象属性时，防御性编程至关重要。通过巧妙地结合使用可选链操作符 (?.) 和三元运算符，我们能够：
- 避免运行时错误： 防止因尝试访问 null 或 undefined 的属性而导致的 TypeError。
- 提供健壮性： 确保代码在面对不完整或预期之外的数据时仍能正常运行，而不是崩溃。
- 增强可读性： 相比于冗长的 if (item && item.unit) 检查，可选链使代码更简洁、更易读。
掌握这些技术是编写高质量、可维护JavaScript代码的关键一步。在实际开发中，根据具体需求选择合适的策略（仅可选链，或结合三元运算符提供备用值），将大大提升应用程序的稳定性和用户体验。
