img src 的三进制，返回值或默认值

Posted 2023-02-23

【中文标题】img src 的三进制，返回值或默认值

【英文标题】：Ternary for img src, returned value or default value

【发布时间】：2022-01-13 17:06:46

【问题描述】：

我是一名学生，正在构建一个用于与 Google Books API 交互的简单网络应用。我生成了一个随机词作为 Google 图书搜索参数，它以 JSON 格式正确返回。

问题是，有些书没有“作者”/“描述”/“图像”参数来返回。对于 Author/Desc，我已经使用三元组轻松解决了这一问题，但是对于图像源来说，三元组的效果并不好。

我想要实现的目标 - 如果 Google 图书查询具有 Image 值，则返回该图像：ELSE，返回我选择的默认值，在本例中为“http://clipart-library.com/ newimages/clip-art-books-15.png'。我宁愿不编辑 html 来实现这一点。

也许有比通过三进制更好的方法来做到这一点。谁能给点建议？

const testBookImg2 是三重焦点。

fetch (randomWord)
    .then (res => res.json())
    .then (obj => 
        console.log(obj)
        fetch (gbooks + obj[0])
        .then (res => res.json())
        .then (obj2 => 
            const testdesc1 = obj2.items[0].volumeInfo.description
            const testdesc2 = typeof(testdesc1) !== 'undefined' ? testdesc1 : 'No Description Provided'
            const testAuthor1 = obj2.items[0].volumeInfo.authors
            const testAuthor2 = typeof(testAuthor1) !== 'undefined' ? testAuthor1 : 'No Author'
            selectedBookDescription.innerText = testdesc2
            selectedBookAuthor.innerText = testAuthor2
            selectedBookTitle.innerText = obj2.items[0].volumeInfo.title

            const testBookImg1 = obj2.items[0].volumeInfo.imageLinks.thumbnail
            const testBookLink = 'http://clipart-library.com/newimages/clip-art-books-15.png'
            const testBookImg2 = typeof(testBookImg1) !== 'undefined' ? testBookImg1 : `$testBookLink`

            selectedBookImage.src = testBookImg2
        )
    )

【问题讨论】：

用Object.hasOwnProperty怎么样？

你能帮我拼一下吗？我是一名使用辅助轮的学生。

我对图片的看法不是改变src元素，而是加载所有图片并隐藏不应该看到的图片

给你：developer.mozilla.org/en-US/docs/Web/javascript/Reference/….

@WaisKamal 为什么你认为这会比测试类型更好？

【参考方案1】：

问题是没有imageLinks 属性，因此尝试读取undefined 的thumbnail 属性时会出错。

使用optional chaining 运算符来防止出现此错误。如果存在，它将分配属性的值，如果不存在或任何中间属性不存在，则分配 undefined。

const testBookImg1 = obj2.items[0]?.volumeInfo?.imageLinks?.thumbnail;
const testBookLink = 'http://clipart-library.com/newimages/clip-art-books-15.png';
const testBookImg2 = typeof testBookImg1 !== 'undefined' ? testBookImg1 : || testBookLink;

没有必要在testBookLink 周围使用模板文字，因为它已经是一个字符串。

如果任何中间属性不存在，这会将testBookImg1 设置为undefined。

【讨论】：

不幸的是，该属性不存在，例如这里 googleapis.com/books/v1/volumes?q=peridot 如果您查看 [0]/volumeInfo 则没有 'imageLinks.thumbnail' 键。

根本没有imageLinks 属性，因此您在尝试读取未定义属性时遇到错误。

没错，我知道。所以，我的问题是，如果值返回未定义，我如何返回默认的 img src？

我已经更新了答案。

我不想将 testBookImg1 设置为未定义。如果未定义 testBookImg1，则它已经返回未定义。如果它返回 undefined 我想将其设置为默认 URL。

【参考方案2】：

有几种方法可以处理对象上的可选键：

const obj = 
  key1: "val1",


const keyIn = (key, obj) => key in obj
const hasOwnProperty = (key, obj) => obj.hasOwnProperty(key)

console.log('key1 in obj', keyIn('key1', obj))
console.log('key2 in obj', keyIn('key2', obj))
console.log('key1 hasOwnProperty with obj', hasOwnProperty('key1', obj))
console.log('key2 hasOwnProperty with obj', hasOwnProperty('key2', obj))

另外，您可以使用nullish coalescing operator - ??：

(function() 
  const testBookImg1 = 'valid string'
  const testBookLink = 'http://clipart-library.com/newimages/clip-art-books-15.png'
  const testBookImg2 = testBookImg1 ?? testBookLink
  console.log('testBookImg2', testBookImg2)
)();

(function() 
  const testBookImg1 = undefined
  const testBookLink = 'http://clipart-library.com/newimages/clip-art-books-15.png'
  const testBookImg2 = testBookImg1 ?? testBookLink
  console.log('testBookImg2', testBookImg2)
)();

---

编辑：

// mock object
const obj2 = 
  items: [
    volumeInfo: 
      imageLinks: 
        thumbnail: 'valid thumbnail src'
      
    
  ]


const testBookImg1 = obj2?.items[0]?.volumeInfo?.imageLinks?.thumbnail
const testBookLink = 'http://clipart-library.com/newimages/clip-art-books-15.png'
const testBookImg2 = testBookImg1 ?? testBookLink

console.log('testBookImg2', testBookImg2)

// the same, just a suffix added, so it doesn't crash:

const obj2_undefined = 
  items: [
    volumeInfo: 
  ]


const testBookImg1_undefined = obj2_undefined?.items[0]?.volumeInfo?.imageLinks?.thumbnail
const testBookLink_undefined = 'http://clipart-library.com/newimages/clip-art-books-15.png'
const testBookImg2_undefined = testBookImg1_undefined ?? testBookLink_undefined

console.log('testBookImg2_undefined', testBookImg2_undefined)

【讨论】：

我是 JS 新手，不明白如何将您的答案转化为解决方案，但还是谢谢您。

@Michael 添加了一个编辑，所以你可以看到确切的方式