当值为空时使用扩展运算符答案

【问题标题】：Using spread operator when the value is null当值为空时使用扩展运算符
【发布时间】：2020-10-13 04:46:12
【问题描述】：

有没有办法在展开运算符中处理 null 而不指定 if 和 else？

在以下场景中，我只想在 assignedStudents 未定义时传播它。

如果我在不使用 if else 的情况下执行此操作，则会收到错误消息：

TypeError: 传播不可迭代实例的尝试无效

为了处理这个问题，我使用 if else，但认为有更好/优雅的方式来做这件事。

let questions;
if (assignedStudents) {
    questions = [
        ...assignedStudents,
        {
            questionId: randomId,
            question: ''
        }
    ];
} else {
    questions = [
        {
            questionId: randomId,
            question: ''
        }
    ];
}

【问题讨论】：

例如，您可以将assignedStundents 初始化为一个空数组。
ECMASrcipt2020 具有 null 合并运算符 (??)，它检查 null 和 undefined 并在这种情况下返回右手运算符。你可以去看看

标签： javascript reactjs typescript ecmascript-6

【解决方案1】：

你是不是用nullish coalescing operator这个意思

const questions = [
  ...(assignedStudents ?? []),
  {
    questionId: randomId,
    question: ""
  }
]

当然，如果assignedStudents 是不可迭代的（如Number 或Object），这不会保护您。它没有那么花哨，但如果您只想对数组进行操作，请使用Array.isArray() 进行检查

const questions = [
  ...(Array.isArray(assignedStudents) ? assignedStudents : []),
  {
    questionId: randomId,
    question: ""
  }
]

由于您已使用 typescript 标记此问题，因此您应该将 assignedStudents 标记为可空数组，例如

assignedStudents?: Something[]

在这种情况下，上述情况不再是问题。

【讨论】：

【解决方案2】：

有很多方法可以做到这一点。

您当前的方法有一个缺陷，假设当assignedStudents 不是无效但不可迭代时，您仍然会收到错误。

例如，assignedStudents 为 -1，if-statement 会通过，会报错。

最安全的方法应该是检查assignedStudents是否为数组，如果不是，则展开一个空数组。

questions = [
  ...(assignedStudents instanceof Array ? assignedStudents : []),
  {
    questionId: randomId,
    question: ""
  }
]

【讨论】：

【解决方案3】：

你可以使用这个表达式 [...(this.options || [])]，其中 options 是数组

【讨论】：