1

在下面的示例中是否有更好的方法来处理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; }

以下工作，但它不太优雅。它需要使用nullish-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是有效的，因此我必须使用逻辑 OR（空值合并操作也可以）来确定替代方案。

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

4

1 回答 1

2

您可以取消多项任务。我认为使用无效合并和可选链接没有任何问题。

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

于 2021-08-19T13:51:52.307 回答