一个常见的 JavaScript 解构陷阱

刚辉模型

在日常的 JavaScript 编码中，我们经常使用解构语法来提取对象中的属性。假设我们有一个名为 fetchResult 的对象，代表从接口返回的数据，其中包含一个字段名为 data。

1. const fetchResult = {
2.   data: null
3. };

复制代码

在提取 data 字段时，为了避免接口未返回该字段而导致的问题，我们常常会使用解构语法，并给予该字段一个默认值，比如 []。代码看起来可能会像这样：

1. const { data: confList = [] } = fetchResult;

复制代码

这个操作的意图是将 fetchResult 中的 data 字段解构并赋值给变量 confList，同时，若 data 字段未被返回，我们期望将其默认值设置为空数组 []。
然而，这里隐藏了一个容易忽略的陷阱。尽管我们为 confList 指定了默认值为 []，但是当 data 字段的值为 null 时，解构语法并不会触发默认值的赋值，而是保留了 null 的值。这导致了一个潜在的问题：
即使我们尝试使用 confList 作为数组来调用一些数组方法，由于其实际值是 null，这样的操作将会触发错误。
为了解决这个问题，我们需要在解构后手动检查并将 null 值转换为默认的空数组，以确保 confList 始终是一个数组，从而避免可能出现的错误：

1. const fetchResult = {
2.   data: null
3. };const { data } = fetchResult;const confList = Array.isArray(data) ? data : [];

复制代码

这种方式通过直接检查 data 字段是否为数组，然后手动设定 confList 变量，确保了即使 data 字段的值为 null 或者未定义，confList 也会被正确地设定为一个空数组，避免了因为 null 值导致的错误。这样我们可以放心地使用 confList 并调用其中的数组方法，而不会触发意外的异常。

来源:https://www.cnblogs.com/azoux/p/17832485.html
免责声明：由于采集信息均来自互联网，如果侵犯了您的权益，请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容，谢谢合作！