迹忆客 专注技术分享

使用 typeof 运算符检查对象属性是否 undefined，例如 if (typeof obj.age === 'undefined') {}。

如果对象属性 undefined 或尚未设置，则 typeof 运算符将返回字符串“undefined”。

const obj = {name: 'Tom'};

// ✅ check if an object property is undefined (typeof)
if (typeof obj.age === 'undefined') {
  // 👇️ this runs
  console.log('⛔️ age property is undefined');
} else {
  console.log('✅ age property is defined');
}

// ----------------------------------

// ✅ check if a variable (possibly undeclared) is undefined

if (typeof abc === 'undefined') {
  // 👇️ this runs
  console.log('The variable is undefined or has not been declared');
}

// ----------------------------------

// ✅ check if an object property is undefined (directly)
if (obj.age === undefined) {
  // 👇️ this runs
  console.log('⛔️ age property is undefined');
} else {
  console.log('✅ age property is defined');
}

我们使用 typeof 运算符来检查对象的 age 属性是否未定义。

typeof 运算符返回一个字符串，指示值的类型。

这里有些例子。

console.log(typeof ''); // 👉️ 'string'
console.log(typeof undefined); // 👉️ 'undefined'
console.log(typeof 5); // 👉️ 'number'
console.log(typeof {}); // 👉️ 'object'
console.log(typeof []); // 👉️ 'object'

typeof 运算符通常用于检查可能未声明而不会出错的变量的类型。

if (typeof abc === 'undefined') {
  // 👇️ this runs
  console.log('The variable is undefined or has not been declared');
}

请注意 ，我们没有在代码示例中声明 abc 变量。 typeof 运算符为未声明的变量返回 undefined 并且不会抛出错误。

如果对象包含值设置为未定义的 age 属性，我们的 if 语句中的条件也会得到满足。

const obj = {name: 'Tom', age: undefined};

if (typeof obj.age === 'undefined') {
  // this runs
  console.log('⛔️ age property is undefined');
} else {
  console.log('✅ age property is defined');
}

大多数时候这应该没问题。 但是，如果我们想检查对象上是否根本不存在该属性，请使用 Object.hasOwnProperty() 方法。

const obj = {name: 'Tom', age: undefined};

if (!obj.hasOwnProperty('age')) {
  console.log("⛔️ object doesn't have age property");
} else {
  // 👉️ this runs
  console.log("✅ object has age property");
}

如果对象具有该属性，则 hasOwnProperty() 方法返回 true，否则返回 false。

else 块运行是因为对象上存在 age 属性，即使它的值未定义。

我们很少（如果有的话）在应用程序中看到 hasOwnProperty() 方法。 对于大多数用例，第一种方法非常有效。

如果需要检查对象中是否存在某个属性，请使用 in 运算符。

const obj = {name: 'Tom'};

console.log('name' in obj); // 👉️ true
console.log('age' in obj); // 👉️ false

如果属性存在于对象中，则 in 运算符返回 true，否则返回 false。

如果我们必须经常检查对象属性是否未定义，请将逻辑提取到可重用的函数中。

function isUndefined(object, property) {
  return typeof object[property] === 'undefined';
}

const obj = {name: 'Tom'};

console.log(isUndefined(obj, 'age')); // 👉️ true
console.log(isUndefined(obj, 'name')); // 👉️ false

isUndefined() 函数将对象和属性名称作为参数，如果属性未定义则返回 true，否则返回 false。

有另一种更简洁的方法。

使用严格相等检查对象属性是否未定义

使用严格相等 === 运算符检查对象属性是否未定义，例如 if (obj.age === undefined) {}。

如果属性未定义，则严格相等运算符将返回 true，否则返回 false。

const obj = {name: 'Tom'};

if (obj.age === undefined) {
  console.log('⛔️ age property is undefined');
} else {
  console.log('✅ age property is defined');
}

我们直接检查属性是否等于 undefined，而不是检查它的类型是什么。

严格相等 === 运算符检查左侧和右侧的值是否相等且类型相同。

这里有些例子。

console.log(undefined === undefined); // 👉️ true
console.log(null === undefined); // 👉️ false
console.log('' === undefined); // 👉️ false
console.log('5' === 5); // 👉️ false

使用严格相等 === 运算符时，任何不同类型的值都不相等。

如果我们必须经常检查对象属性是否未定义，请将逻辑提取到可重用的函数中。

function isUndefined(object, property) {
  return object[property] === undefined;
}

const obj = {name: 'Tom'};

console.log(isUndefined(obj, 'age')); // 👉️ true
console.log(isUndefined(obj, 'name')); // 👉️ false

该函数将对象和属性名称作为参数，如果属性未定义，则返回 true。

使用可选链接 (?.) 检查对象属性是否未定义

使用可选的 ?. 链接运算符检查对象属性是否未定义。

如果属性未定义，可选的链接运算符将短路而不是抛出错误。

const obj = {name: 'Tom'};

const ageProp = obj?.age;
console.log(ageProp); // 👉️ undefined

const nameProp = obj?.name;
console.log(nameProp); // 👉️ Tom

// 👇️ undefined
console.log(obj?.address?.country);

可选的链接 ?. 运算符允许我们短路而不是抛出错误。

如果引用等于 undefined 或 null，则运算符返回 undefined，否则返回属性/方法的值。

如果引用不是空的，则运算符返回属性的值。

我们可以在同一语句中多次使用可选链接 ?. 运算符。

const obj = {name: 'Tom'};

if (obj?.address?.country) {
  // 👇️ can safely access the property here
  console.log(obj.address.country);
} else {
  console.log('The property is undefined');
}

我们使用可选的链接运算符来访问对象的嵌套属性。

如果 if 语句中的表达式计算结果为真，我们可以安全地访问 if 块中的对象属性，因为该属性不是 undefined 的。如果 else 块运行，则该属性 undefined。