ES2017 引入了对象解构，可以快速提取对象中的属性值，它是一种使代码更易于理解和维护的技术。然而，在处理对象解构的过程中，遇到未定义的属性时可能会导致意外的行为。这篇文章将讨论在 JavaScript 中如何处理对象解构未定义属性的情况，并展示如何避免出现 undefined。
对象解构简介
对象解构可以让我们从对象中提取属性，然后将它们分配给本地变量。下面是一个简单的例子：
const person = { name: "Alice", age: 25 };
const { name, age } = person;
console.log(name); // "Alice"
console.log(age); // 25这里，我们从 person 对象中提取了 name 和 age 属性，并将它们分配给本地变量 name 和 age。这使得我们可以稍后更轻松地使用这些属性值。
处理未定义属性
然而，当对象中不存在我们尝试提取的属性时，会导致变量未定义。例如，考虑以下代码：
const person = { name: "Alice" };
const { name, age } = person;
console.log(name); // "Alice"
console.log(age); // undefined这里，我们尝试提取变量 age，但是 person 对象中不存在 age 属性，所以它的值是未定义的。出现未定义属性值的问题可能会导致代码出现错误或意外结果。
避免出现 undefined
为了避免出现未定义属性值，我们可以使用默认值来初始化本地变量。这样，如果对象中不存在属性，我们将获得一个合理的默认值。
const person = { name: "Alice" };
const { name, age = 18 } = person;
console.log(name); // "Alice"
console.log(age); // 18这里，我们提取了 person 对象的 age 属性，并将默认值设置为 18。如果 person 对象中不存在 age 属性，则 age 将默认设置为 18。
进一步的探索
除了默认值之外，我们还可以处理未定义属性的其他方法。这包括使用 Object.assign() 函数来合并默认值和提取的对象值，以及使用对象展开运算符来快速初始化对象。
结论
对象解构是一种方便而强大的技术，可以使代码更易于理解和维护。然而，在处理对象解构时，可能会遇到由不存在属性引起的未定义行为。使用默认值是一种避免这种问题的简单方法，但我们还应该探索其他处理这种情况的方法。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/673959f2317fbffedf165a86