Javascript 从API向数组添加多个值并避免；“未定义”；错误

我正在使用GoogleBooks API进行一个小项目，遇到了一个小问题。问题是，有时数据并不统一——因为缩略图图像会丢失，或者作者信息会丢失。当脚本运行以将搜索到的元素“添加”到数据库时，它将返回一个错误，因为其中一个值将返回未定义。也许举个例子可以更清楚地说明这一点：

let volumeInfo = response.items[i].volumeInfo
    var book = {
        title: volumeInfo.title, 
        authors: volumeInfo.authors[0], 
        selfLink: response.items[i].selfLink
        cover: volumeInfo.imageLinks.thumbnail
    }

例如，我偶尔遇到的一个错误是“TypeError:无法读取其中一个结果的undefined:的属性“0”。我发现一个解决方案如下所示：

var book = {
     title: volumeInfo.title, 
     authors: volumeInfo.authors[0], 
     selfLink: response.items[i].selfLink
     }
  if(volumeInfo.authors === undefined){
     book.authors = "null"
  }
  else{
     book.authors = volumeInfo.authors[0]
  }
  if(volumeInfo.imageLinks === undefined){
     book.cover = "null" 
  } else {
     book.cover = volumeInfo.imageLinks.thumbnail
  }

有没有一种更优雅的方法可以做到这一点，而不必为我要从中生成对象的所有元素编写“if”语句？

您可以使用：

如果您不需要确切的

'null'

字符串，只想在其中输入一个表示未找到任何内容的值，则可以删除

？？

，在没有此类属性时，将默认值设置为

未定义的

，这样会使代码稍微短一些：

var book = {
  title: volumeInfo.title,
  authors: volumeInfo.authors?[0],
  selfLink: response.items[i].selfLink,
  cover: volumeInfo.imageLinks?.thumbnail,
}

请注意，这是一种非常新的语法。如果您打算将此代码放在公共网站上供一般用户使用，并且您有一个规模适中、相当专业的项目，请确保将您的代码传输到ES5（或ES6）进行生产，以便旧的浏览器能够理解

否则，您可以手动执行未定义的测试。要将最后一个代码段转换为ES5：

var book = {
  title: volumeInfo.title,
  authors: volumeInfo.authors ? volumeInfo.authors[0] : undefined,
  selfLink: response.items[i].selfLink,
  cover: volumeInfo.imageLinks ? volumeInfo.imageLinks.thumbnail : undefined
}

---

这有点冗长-我更喜欢Babel，希望您已经在使用它。

谢谢！可选链接非常漂亮。

var book = {
  title: volumeInfo.title,
  authors: volumeInfo.authors ? volumeInfo.authors[0] : undefined,
  selfLink: response.items[i].selfLink,
  cover: volumeInfo.imageLinks ? volumeInfo.imageLinks.thumbnail : undefined
}