试图理解这段代码： map((data: SearchResponse) => data && data.items || [])答案

【问题标题】：Trying to understand this code: map((data: SearchResponse) => data && data.items || [])试图理解这段代码： map((data: SearchResponse) => data && data.items || [])
【发布时间】：2021-06-09 03:46:52
【问题描述】：

我是 Angular 的新手，正在尝试通过检查代码示例来学习。我为 ngx-Typeahead 提取了一些示例代码，并试图理解这些代码。

interface SearchResponse {
  total_count: number;
  incomplete_results: boolean;
  items: Owner[];
}

然后

this.suggestions$ = new Observable((observer: Observer<string>) => {
      observer.next(this.search);
    }).pipe(
      switchMap((query: string) => {
        if (query) {
          return this.http.get<SearchResponse>('https://localhost:5001/api/GetOwners', {
            params: { q: query }
          }).pipe(
            map((data: SearchResponse) => data && data.items || []),
            tap(() => noop, err => { this.errorMessage = err && err.message || 'Something goes wrong'; })
          );
        }

        return of([]);
      })
    );

代码行：

map((data: SearchResponse) => data && data.items || [])

读取类似“将响应映射到此函数并将其称为“数据”。然后将其与项目（SearchResponse 的一个元素）进行 AND。如果 AND 为空，则返回一个空数组。”那么如果不是什么都没有呢？ "data && data.items 产生什么？或者我想太多了，data && data.items 将返回 true，因此返回整个数据项？

【问题讨论】：

如果数据不为空，data && data.items 将返回 data.items。使用data && data.items || [] 时，如果data 为空或data.items 为空/不存在，则返回一个空数组。

标签： angular typescript angular11

【解决方案1】：

像这样使用&& 和|| 是if/else 的简写，用于检查值或获取默认值。

data && data.items || [] 与 if (data && data.items) data.items else [] 相同（或 (data && data.items) ? data.items : []。也就是说，如果定义了 data 并且 data.items 不是假的（例如非空数组），您将得到 @987654330 @. 否则，你会得到一个空数组。

这是因为在 Typescript 中，&& 和 || 运算符总是返回它们的参数之一：

如果a 是假的，则a && b 是a，或者b
a || b 是 a 如果 a 是真实的，或者 b

而且由于它们会短路（仅在需要时评估操作数），您可以使用它们在访问值之前检查它。

这意味着如果data.items 存在且非空，则data && data.items 将是该值。否则，它将是一个假值，(that value) || [] 将成为空数组 --- 一个默认值。

【讨论】：

【解决方案2】：

这是确保您使用正确定义的值（在本例中为数组）的简写。当使用一个对象作为这样的条件时，如果对象存在，它的行为就好像它是True，如果它不存在，它的行为就好像它是False（即空、未定义、0 等）。如果data 是一个非空的、已定义的事物，那么语言会处理 AND 的另一端。如果data.items 是非空的已定义事物，则表达式短路。 true && true || ??? 不需要处理第三个元素即可知道表达式的计算结果为真。但是表达式不返回true，它返回最后一个评估条件，所以如果data 和data.items 都是非空的，定义的东西，它会返回data.item。

如果data 是一个东西而data.item 不是呢？然后我们有true && false || ???，可以短接为false || ???。短路还没有开始，所以我们必须评估第三个条件：一个空数组。一个空数组是一个非空的、已定义的事物，因此它表现为真。这也是评估的最后一个表达式，因此返回空数组。

如果data 和data.items 都没有值，则返回空数组。

我认为data 不可能为空或未定义，data.items 不可能不抛出错误。

实际上，所有这些都相当于说“我想要data.items，但如果它没有定义，给我一个空数组。”这是利用 JS 引擎的花式类型强制。

【讨论】：

【解决方案3】：

正确 - 假设 'data' 存在并且 data.items 存在，它将返回 data.items 的值（我假设它是一个数组） - 否则它返回一个空数组。

【讨论】：

【解决方案4】：

我构建了一个基本测试来看看它是如何工作的，map((data: SearchResponse) => data && data.items || []) 在 map data (truthy) 和 data 之后，items (truthy) 将通过 { } 在其他情况下将通过 [] 进行链接。

// let data = {"items": null } // []

let data = {"items": {} } // {}

//data = null // []

// let data = undefined  // []
 
console.log( data && data.items || [])

【讨论】：