乐趣区

关于typescript:关于-TypeScript-展开运算符在-Angular-应用开发中的应用一例

jiezi

笔者最近始终在 SAP 中国研究院从事 Angular 开发，我所在的团队负责应用 Angular 开发 SAP Commerce Cloud 这款产品的界面，我的项目代号为 Spartacus.

这是一个开源我的项目，咱们我的项目的 Github 地址如下。

最近我解决了一个 bug，我的代码改变放在这个 Pull Request 里。

上面是这个 Pull Request 里蕴含的代码改变，能够看到我应用了 TypeScript 的开展运算符(三个句点)：

代码里应用的 stringifyWithContext 办法，接管一个字符串类型的变量和一个 Context 对象作为输出参数，返回一个序列化之后的 JSON 字符串。这个输入的 JSON 字符串能够写入 kibana 等 Trace 工具内。

  protected stringifyWithContext(
    message: string,
    context: ExpressServerLoggerContext
  ): string {const logObject = { message, context: this.mapContext(context) };

    return isDevMode()
      ? JSON.stringify(logObject, null, 2)
      : JSON.stringify(logObject);
  }

而 transform 办法的输入是一个数组。为了把数组里的元素顺次开展成 String 和 Context 对象，故咱们对该数组应用开展运算符。

实际上，在 Angular 技术畛域，特地是在解决组件通信、数据传递以及函数参数开展方面，开展运算符（Spread Operator）是一种重要的语法个性。该运算符次要用于将数组、对象或者函数参数在特定的上下文中进行开展，以实现更灵便的数据传递和函数调用。

笔者利用修复这个 bug 的机会，系统地学习了 TypeScript 里开展运算符的应用形式。

在下面我提供的代码中，波及到开展运算符的中央是：

...this.transform(message, context, this._transformers, this)

这行代码应用开展运算符将函数 this.transform() 的返回值开展作为参数传递给 this.stringifyWithContext() 函数。

开展运算符的基本概念

开展运算符 ... 容许将一个可迭代对象（比方数组、字符串或类数组对象等）拆分成独立的元素，或者将多个元素合并为一个数组或对象。这种个性在函数调用时尤其有用，能够将数组或对象的元素扩散为函数的参数。

数组开展

const arr = [1, 2, 3];
console.log(...arr); // 输入：1 2 3

函数参数开展

function add(a, b, c) {return a + b + c;}

const values = [1, 2, 3];
console.log(add(...values)); // 输入：6

开展运算符在提供的代码中的利用

回到我修复 bug 的上下文代码：

  1. this.transform(message, context, this._transformers, this)：这是一个函数调用，返回一个数组或可迭代对象，其中蕴含了要传递给 this.stringifyWithContext() 函数的参数。
  2. ...this.transform(message, context, this._transformers, this)：在这里，开展运算符 ... 将函数调用的后果拆分成独立的参数，以便将它们传递给 this.stringifyWithContext() 函数。
  3. this.stringifyWithContext(...)：当初，拆分的参数会作为独立的值传递给 this.stringifyWithContext() 函数，使得函数可能正确接管和解决这些参数。

示例

为了更好地了解，咱们来看一个示例，假如有如下的函数：

function concatenateStrings(...args) {return args.join(' ');
}

const strings = ['Hello', 'world', 'from', 'Angular'];
const result = concatenateStrings(...strings);
console.log(result); // 输入：Hello world from Angular

在这个示例中，concatenateStrings() 函数应用开展运算符将传入的字符串数组开展为独立的参数，而后将它们连接起来并返回后果。

残余运算符

留神，在 TypeScript 代码中，残余运算符 (Rest Operator) 也用 ... 示意，但它的应用场景是在函数参数、数组解构和对象解构中，代表残余的元素。

看一个残余运算符用在函数参数中的例子：

function sum(...nums: number[]): number {return nums.reduce((a, b) => a + b, 0);
}

console.log(sum(1, 2, 3, 4, 5));  // 输入 15

在这个例子中，...nums 示意 sum 函数能够承受任意数量的参数，并将它们作为一个数组解决。

数组解构的例子：

let arr = [1, 2, 3, 4, 5];
let [first, ...rest] = arr;
console.log(first);  // 输入 1
console.log(rest);   // 输入 [2, 3, 4, 5]

在这个例子中，...rest 示意除了第一个元素之外的所有元素。

对象解构的例子：

let obj = {a: 1, b: 2, c: 3, d: 4};
let {a, ...rest} = obj;
console.log(a);  // 输入 1
console.log(rest);  // 输入 {b: 2, c: 3, d: 4}

在这个例子中，...rest 示意除了属性 a 之外的所有属性。

总结

开展运算符在 Angular 开发中常常用于组件通信、函数调用和参数传递的场景，可能减少代码的灵活性和可读性。它的应用有助于简化函数调用、数组合并等操作，进步代码的可维护性和可扩展性。

退出移动版