处理 JavaScript 值为 undefined 的 7 个小技巧

如果你在 JavaScript 开发中遇到了 undefined 值，可以考虑以下七个小技巧来解决。

1. 使用条件语句检测 undefined 值

使用 if 语句检测 JavaScript 的一个数据是否为 undefined 可以避免发生未定义（undefined）错误。

let x;
if (typeof x === 'undefined') {
  // 处理未定义值
}

2. 使用默认值

当变量为 undefined 值时，可以使用 OR 运算符（||）来设置默认值。

let x;
const y = x || '默认值';

在这个例子中，如果 x 的值是 undefined，则 y 将被设置为 '默认值'。

3. 使用对象默认值

可以使用解构语法设置函数中参数的默认值：

function myFunction({x = 0, y = 0} = {}) {
  // 函数代码
}

默认情况下，如果 myFunction 没有参数传递，它将创建一个默认值为 {x: 0, y: 0} 的对象。如果传递了参数，将会使用参数的值替换默认值，例如：

myFunction({x: 1, y: 2}); // x 等于 1，y 等于 2
myFunction({x: 1}); // x 等于 1，y 等于 0
myFunction({y: 2}); // x 等于 0，y 等于 2
myFunction(); // x 等于 0，y 等于 0

4. 安全地访问对象属性

当访问对象的属性时，可以使用 && 运算符来检查对象是否存在。

const obj = {val: 42};
if (obj && obj.val) {
  // 处理数据
}

如果我们这样写：

const obj2;
if (obj2.val) { // 抛出错误，因为 obj2 是 undefined
  // 处理数据
}

代码会崩溃，并出现一个 "TypeError: Cannot read property 'val' of undefined" 的错误。

因为没有检查 obj2 是否具有 val 属性，所以代码会崩溃。

5. 使用nullish coalescing运算符

在 JavaScript 中，有时我们需要判断一个变量是否为 undefined 或 null，然后再决定使用默认值还是实际的值。这时可以使用 nullish coalescing 运算符(??)。

例如：

const x = null;
const y = x ?? '默认值';

console.log(y); // 'null'

在这个例子中，y 的值为 null，因为 x 是 null，且 void 0(undefined) 不等于 null。

6. 使用 optional chaining 运算符

在 JavaScript 中，我们经常需要在连续的对象或属性链上访问对象属性，如果其中有一个值为 undefined 的话，代码又会出现异常。

例如：

const data = {a: {b: {c: 1}}};
console.log(data?.a?.b?.c); // 1

const data2 = {a: {b: null}};
console.log(data2?.a?.b?.c); // undefined

optional chaining 运算符(?.)可以解决以上问题，它可以在属性链上检查 undefined 值，并返回 undefined 而不是抛出错误。

7. 使用解构赋值判断 undefined

还可以通过解构赋值的方式判断一个变量是否为 undefined。

const {x, y, z} = data ?? {};
console.log([x, y, z]); // [undefined, undefined, undefined]

在这个例子中，如果 data 没有定义，就会返回一个空对象 {}。如果定义了，则会根据 data 中的属性解构对象。

如果一个变量没被解构成功，则其值为 undefined。

以上就是处理 JavaScript undefined 值的 7 个技巧，希望能对你有所帮助！