巧妙避免JavaScript对象空值引发的错误
在JavaScript中，安全地访问对象数据至关重要，这能确保应用在数据不完整的情况下也能正常运行。核心在于避免空值引发的错误。
为了更好地理解本文，您需要了解JavaScript中truthy和falsy值的概念。
编写代码时，我们经常需要访问对象中的数据。假设我们有一个员工对象，需要获取其状态信息。
如果状态信息存在，则显示该状态；如果不存在，则显示“实习”。
示例代码如下：
<code class="language-javascript">const pegawai = {
nama: 'Alex Under',
status: 'tetap',
};
console.log(pegawai.nama, 'adalah pegawai', pegawai.status);</code>输出结果：
<code>Alex Under adalah pegawai tetap</code>
现在，我们减少对象的属性：
<code class="language-javascript">const pegawai = {
};
console.log(pegawai.nama, 'adalah pegawai', pegawai.status);</code>输出结果：
<code>undefined adalah pegawai undefined</code>
这里虽然没有报错，但数据显示为undefined，看起来不太美观。
为了解决这个问题，我们可以添加if-else语句：
<code class="language-javascript">const pegawai = {
};
if (!pegawai.nama) {
pegawai.nama = 'Seorang Pegawai';
}
if (!pegawai.status) {
pegawai.status = 'magang';
}
console.log(pegawai.nama, 'adalah pegawai', pegawai.status);</code>输出结果：
<code>Seorang Pegawai adalah pegawai magang</code>
我们为数据提供了默认值，如果数据不存在，则使用默认值。
为了简化代码，可以使用如下方式：
<code class="language-javascript">const pegawai = {
};
pegawai.nama = pegawai.nama || 'Seorang Pegawai';
pegawai.status = pegawai.status || 'magang';
console.log(pegawai.nama, 'adalah pegawai', pegawai.status);</code>如果对象本身不存在（为null）会怎样？
<code class="language-javascript">const pegawai = null; console.log(pegawai.nama, 'adalah pegawai', pegawai.status);</code>
这将导致如下错误：
<code>Uncaught TypeError: Cannot read properties of null (reading 'nama')</code>
应用程序因错误而崩溃。
为了解决这个问题，我们可以使用以下方法：
<code class="language-javascript">const pegawai = null;
const pegawaiSafe = pegawai || {};
if (!pegawaiSafe.nama) {
pegawaiSafe.nama = 'Seorang Pegawai';
}
if (!pegawaiSafe.status) {
pegawaiSafe.status = 'magang';
}
console.log(pegawaiSafe.nama, 'adalah pegawai', pegawaiSafe.status);</code>这样就不会报错，输出结果为：
<code>Seorang Pegawai adalah pegawai magang</code>
同样，为了简化代码，可以使用以下方式：
<code class="language-javascript">const pegawai = null;
const pegawaiSafe = {};
pegawaiSafe.nama = (pegawai || {}).nama || 'Seorang Pegawai';
pegawaiSafe.status = (pegawai || {}).status || 'magang';
console.log(pegawaiSafe.nama, 'adalah pegawai', pegawaiSafe.status);</code>或者：
<code class="language-javascript">const pegawai = null;
const pegawaiSafe = pegawai || {};
pegawaiSafe.nama = pegawaiSafe.nama || 'Seorang Pegawai';
pegawaiSafe.status = pegawaiSafe.status || 'magang';
console.log(pegawaiSafe.nama, 'adalah pegawai', pegawaiSafe.status);</code>通过以上方法，我们可以有效避免对象空值问题，尤其是在处理来自外部输入（例如用户输入、数据库、第三方服务等）的对象时。
感谢您的阅读！
欢迎讨论和交流，也欢迎交友 ?
以上是访问对象数据的安全方法的详细内容。更多信息请关注PHP中文网其他相关文章！
