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

Question

我是 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 什么都不是，那么 return一个空数组。”那如果什么都不是呢？ “data && data.items 会产生什么？还是我想多了，data && data.items 会 return 为真，所以整个数据项是 returned？

Answer 1

像这样使用 && 和 || 是 shorthand for if/else 检查值或获取默认值。

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

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

a && b 是 a 如果 a 是假的，或者 b

a

a || b 为 a，或者 b

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

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

Answer 2

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

Answer 3

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

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

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

我认为 data 不可能为 null 或未定义，并且 data.items 不会引发错误。

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

Answer 4

我构建了一个基本测试以查看其工作原理，map((data: SearchResponse) => data && data.items || []) 在地图数据 (truthy) 和数据、项目 (truthy) 将通过 { } 之后，在其他情况下将通过 [] 进行链接。

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

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

//data = null // []

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

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

Trying to understand this code: map((data: SearchResponse) => data && data.items || [])

angular

typescript

angular11