访问对象数据的安全方法

巧妙避免JavaScript对象空值引发的错误

在JavaScript中，安全地访问对象数据至关重要，这能确保应用在数据不完整的情况下也能正常运行。核心在于避免空值引发的错误。

注意！

为了更好地理解本文，您需要了解JavaScript中truthy和falsy值的概念。

案例

编写代码时，我们经常需要访问对象中的数据。假设我们有一个员工对象，需要获取其状态信息。

如果状态信息存在，则显示该状态；如果不存在，则显示“实习”。

示例代码如下：

const pegawai = {
  nama: 'Alex Under',
  status: 'tetap',
};

console.log(pegawai.nama, 'adalah pegawai', pegawai.status);

输出结果：

<code>Alex Under adalah pegawai tetap</code>

问题及解决方案一

现在，我们减少对象的属性：

const pegawai = {
};

console.log(pegawai.nama, 'adalah pegawai', pegawai.status);

输出结果：

<code>undefined adalah pegawai undefined</code>

这里虽然没有报错，但数据显示为undefined，看起来不太美观。

为了解决这个问题，我们可以添加if-else语句：

const pegawai = {
};

if (!pegawai.nama) {
  pegawai.nama = 'Seorang Pegawai';
}

if (!pegawai.status) {
  pegawai.status = 'magang';
}

console.log(pegawai.nama, 'adalah pegawai', pegawai.status);

输出结果：

<code>Seorang Pegawai adalah pegawai magang</code>

我们为数据提供了默认值，如果数据不存在，则使用默认值。

附加技巧

为了简化代码，可以使用如下方式：

const pegawai = {
};

pegawai.nama = pegawai.nama || 'Seorang Pegawai';
pegawai.status = pegawai.status || 'magang';

console.log(pegawai.nama, 'adalah pegawai', pegawai.status);

问题及解决方案二

如果对象本身不存在（为null）会怎样？

const pegawai = null;
console.log(pegawai.nama, 'adalah pegawai', pegawai.status);

这将导致如下错误：

<code>Uncaught TypeError: Cannot read properties of null (reading 'nama')</code>

应用程序因错误而崩溃。

为了解决这个问题，我们可以使用以下方法：

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>Seorang Pegawai adalah pegawai magang</code>

附加技巧

同样，为了简化代码，可以使用以下方式：

const pegawai = null;

const pegawaiSafe = {};
pegawaiSafe.nama = (pegawai || {}).nama || 'Seorang Pegawai';
pegawaiSafe.status = (pegawai || {}).status || 'magang';

console.log(pegawaiSafe.nama, 'adalah pegawai', pegawaiSafe.status);

或者：

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);

总结

通过以上方法，我们可以有效避免对象空值问题，尤其是在处理来自外部输入（例如用户输入、数据库、第三方服务等）的对象时。

感谢您的阅读！

欢迎讨论和交流，也欢迎交友 ?

以上是访问对象数据的安全方法的详细内容。更多信息请关注PHP中文网其他相关文章！