在数组中解构可能的空值

Question

是否有更好的方法在下面的例子中处理null值?在条目5、7和10中;null值存在

取值为null或undefined时，报错如下。

#5  - Uncaught TypeError: Cannot read property 'id' of null
#7  - Uncaught TypeError: object null is not iterable (cannot read property Symbol(Symbol.iterator))
#10 - Uncaught TypeError: Cannot read property 'id' of null

const data = [
{ id: 1, children: [{ id: 'A' }] }, /*  1 */
{ id: 2, children: [{ id: 'B' }] }, /*  2 */
{ id: 3, children: [{ id: 'C' }] }, /*  3 */
{ id: 4, children: [{ }] },         /*  4 */
//{ id: 5, children: [null] },      /*  5 */
{ id: 6, children: [] },            /*  6 */
//{ id: 7, children: null },        /*  7 */
{ id: 8 },                          /*  8 */
{ },                                /*  9 */
//null                              /* 10 */
];
const ids = data.map(
({
id = -1,
children: [
{
id: childId = -1
} = {}
] = []
} = {}) =>
({ id, childId })
);
console.log(ids);

.as-console-wrapper { top: 0; max-height: 100% !important; }

下面的工作，但它不那么优雅。它需要使用null -coalescing操作符(或逻辑or操作符)、可选的链接和多个赋值。

const data = [
{ id: 1, children: [{ id: 'A' }] }, /*  1 */
{ id: 2, children: [{ id: 'B' }] }, /*  2 */
{ id: 3, children: [{ id: 'C' }] }, /*  3 */
{ id: 4, children: [{}] },          /*  4 */
{ id: 5, children: [null] },        /*  5 */
{ id: 6, children: [] },            /*  6 */
{ id: 7, children: null },          /*  7 */
{ id: 8 },                          /*  8 */
{ },                                /*  9 */
null                                /* 10 */
];
const ids = data.map(item => {
const
ref = item ?? {},
children = ref.children ?? [],
child = children[0] ?? {};
return {
id: ref?.id ?? -1,
childId: child?.id ?? -1
};
});
console.log(ids);

.as-console-wrapper { top: 0; max-height: 100% !important; }

我可以将其重写为嵌套的IIFE，但它更难以遵循…如您所见，我避免使用默认参数值，因为您只能解构undefined值。值null是有效的，因此我必须使用逻辑或(null -coalescing操作也可以工作)来确定替代选项。

const data = [
{ id: 1, children: [{ id: 'A' }] },  /*  1       */
{ id: 2, children: [{ id: 'B' }] },  /*  2       */
{ id: 3, children: [{ id: 'C' }] },  /*  3       */
{ id: 4, children: [{ id: null }] }, /*  4 (NEW) */
{ id: 5, children: [{}] },           /*  5       */
{ id: 6, children: [null] },         /*  6       */
{ id: 7, children: [] },             /*  7       */
{ id: 8, children: null },           /*  8       */
{ id: 9 },                           /*  9       */
{ },                                 /* 10       */
null                                 /* 11       */
];
const ids = data.map(item =>
(ref =>
((id, children) =>
(child =>
((childId) =>
({ id, childId }))
(child.id || -1))
(children[0] || {}))
(ref.id || -1, ref.children || []))
(item || {}));
console.log(ids);

.as-console-wrapper { top: 0; max-height: 100% !important; }

Answer 1

您可以取消多重赋值。我不认为使用空合并和可选链接有任何问题。

const data = [
{ id: 1, children: [{ id: 'A' }] },  /*  1       */
{ id: 2, children: [{ id: 'B' }] },  /*  2       */
{ id: 3, children: [{ id: 'C' }] },  /*  3       */
{ id: 4, children: [{ id: null }] }, /*  4 (NEW) */
{ id: 5, children: [{}] },           /*  5       */
{ id: 6, children: [null] },         /*  6       */
{ id: 7, children: [] },             /*  7       */
{ id: 8, children: null },           /*  8       */
{ id: 9 },                           /*  9       */
{ },                                 /* 10       */
null                                 /* 11       */
];
const ids = data.map(item => ({
id: item?.id ?? -1,
childId: item?.children?.[0]?.id ?? -1
}));
console.log(ids);

.as-console-wrapper { top: 0; max-height: 100% !important; }