关于前端:关于-TypeScript-的变量声明和解构赋值Destructuring-Assignment

43次阅读

共计 1219 个字符，预计需要花费 4 分钟才能阅读完成。

看上面这段代码：

const {queryParams, fragment} = this.router.parseUrl(url);
const [, path] = url.match(this.URL_SPLIT) ?? [, ''];

这段 TypeScript 代码尽管较短，但依然展现了许多 TypeScript 的个性和语法。以下是对这段代码的剖析，涵盖了相干的 TypeScript 个性和语法。

变量申明和解构赋值（Destructuring Assignment）: 这段代码中应用了解构赋值，它是一种不便的从对象或数组中提取值并赋值给变量的办法。在这里，queryParams 和 fragment 是从 this.router.parseUrl(url) 返回的对象中解构进去的属性。

示例：
```
const {queryParams, fragment} = this.router.parseUrl(url);
```
对象属性拜访（Object Property Access）: 代码中应用了对象属性拜访，通过 . 操作符来拜访对象的属性。在这里，this.router 是一个对象，它具备 parseUrl 办法。

示例：
```
this.router.parseUrl(url);
```
办法调用（Function and Method Calls）: 在这段代码中，调用了 this.router.parseUrl 办法，该办法接管一个参数 url。此外，还调用了 url.match 办法，该办法接管一个参数 this.URL_SPLIT。

示例：
```
this.router.parseUrl(url);
url.match(this.URL_SPLIT);
```
可选链操作符（Optional Chaining）: 可选链操作符 ?. 容许在对象属性可能为 null 或 undefined 的状况下编写更简洁的代码。在这段代码中，应用了可选链操作符 ?? 来解决 url.match(this.URL_SPLIT) 的返回值，以防它为 null。

示例：
```
url.match(this.URL_SPLIT) ?? [, ''];
```
数组解构赋值（Array Destructuring Assignment）: 在这段代码中，通过解构赋值从 url.match(this.URL_SPLIT) ?? [, ''] 的后果中提取了第二个元素（索引为 1 的元素）并将其赋值给变量 path。

示例：
```
const [, path] = url.match(this.URL_SPLIT) ?? [, ''];
```
模板字符串（Template Strings）: 在这段代码中，没有间接应用模板字符串，但给定的默认值 ' ' 是一个模板字符串。模板字符串是一种应用反引号（ ` ）示意的字符串，它容许在字符串中插入表达式。