从 API 向数组添加多个值并避免 "undefined" 错误

Question

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

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：无法读取未定义的属性 '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”语句？

Answer 1

您可以使用 optional chaining with nullish coalescing:

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

如果您并不完全需要 'null' 字符串，而只想在其中放置一个值以指示未找到任何内容，您可以删除 ?? 以使值默认为 undefined 当没有属性时，它会使代码更短一些：

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

请注意，这是非常新的语法。如果您要将此代码放在 public 网站上供一般用户使用，并且您有一个 decently-sized 相当专业的项目，请确保 Babel 将您的代码转译为 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，希望你已经在使用它了。

从 API 向数组添加多个值并避免 "undefined" 错误

Adding multiple values to array from an API and avoiding "undefined" error

javascript

undefined

javascript-objects