【零基础入门TypeScript】函数

目录

可选参数

示例:可选参数

其余参数

示例:剩余参数

默认参数

句法

示例:默认参数

匿名函数

句法

示例 ─ 一个简单的匿名函数

示例 ─ 带参数的匿名函数

函数表达式和函数声明 ─ 它们是同义词吗?

函数构造器

句法

例子

递归和 TypeScript 函数

示例 – 递归

示例:匿名递归函数

拉姆达函数

Lambda 函数 - 剖析

拉姆达表达式

示例:Lambda 表达式

拉姆达声明

示例:Lambda 语句

句法变化

参数类型推断

单个参数的可选括号

单个语句的可选大括号,无参数的空括号

函数重载

例子


函数是可读、可维护和可重用代码的构建块。函数是执行特定任务的一组语句。函数将程序组织成逻辑代码块。一旦定义,就可以调用函数来访问代码。这使得代码可以重用。此外,函数使程序代码的阅读和维护变得容易。

函数声明告诉编译器函数的名称、返回类型和参数。函数定义提供了函数的实际主体。

先生编号功能及说明
1.定义函数

函数定义指定特定任务的完成内容和方式。

2.调用函数

必须调用函数才能执行它。

3.返回函数

函数还可以将值与控制一起返回给调用者。

4.参数化函数

参数是一种将值传递给函数的机制。

可选参数

当函数执行不需要强制传递参数时,可以使用可选参数。可以通过在参数名称后附加问号来将参数标记为可选。可选参数应设置为函数中的最后一个参数。声明带有可选参数的函数的语法如下 -

function function_name (param1[:type], param2[:type], param3[:type])

示例:可选参数

function disp_details(id:number,name:string,mail_id?:string) { console.log("ID:", id); console.log("Name",name); if(mail_id!=undefined)  console.log("Email Id",mail_id); 
}
disp_details(123,"John");
disp_details(111,"mary","mary@xyz.com");
  • 上面的示例声明了一个参数化函数。这里,第三个参数mail_id是可选参数。

  • 如果在函数调用期间未向可选参数传递值,则该参数的值将设置为未定义。

  • 仅当向参数传递值时,该函数才会打印 mail_id 的值。

编译时,它将生成以下 JavaScript 代码 -


//Generated by typescript 1.8.10
function disp_details(id, name, mail_id) {console.log("ID:", id);console.log("Name", name);if (mail_id != undefined)console.log("Email Id", mail_id);
}
disp_details(123, "John");
disp_details(111, "mary", "mary@xyz.com");

上面的代码将产生以下输出 -

ID:123 
Name John 
ID: 111 
Name  mary 
Email Id mary@xyz.com

其余参数

剩余参数类似于 Java 中的变量参数。剩余参数不限制可以传递给函数的值的数量。但是,传递的值必须全部属于同一类型。换句话说,剩余参数充当相同类型的多个参数的占位符。

要声明剩余参数,参数名称以三个句点为前缀。任何非休息参数都应位于休息参数之前。

示例:剩余参数


function addNumbers(...nums:number[]) {  var i;   var sum:number = 0; for(i = 0;i<nums.length;i++) { sum = sum + nums[i]; } console.log("sum of the numbers",sum) 
} 
addNumbers(1,2,3) 
addNumbers(10,10,10,10,10)
  • 函数 addNumbers() 声明接受剩余参数nums。其余参数的数据类型必须设置为数组。此外,一个函数最多可以有一个剩余参数。

  • 该函数被调用两次,分别传递三个和六个值。

  • for 循环遍历参数列表,传递给函数并计算它们的总和。

编译时,它将生成以下 JavaScript 代码 -


function addNumbers() {var nums = [];for (var _i = 0; _i < arguments.length; _i++) {nums[_i - 0] = arguments[_i];}var i;var sum = 0;for (i = 0; i < nums.length; i++) {sum = sum + nums[i];}console.log("sum of the numbers", sum);
}
addNumbers(1, 2, 3);
addNumbers(10, 10, 10, 10, 10);

上述代码的输出如下 -

sum of numbers 6 
sum of numbers 50

默认参数

函数参数也可以默认赋值。但是,此类参数也可以显式传递值。

句法

function function_name(param1[:type],param2[:type] = default_value) { 
}

注意- 参数不能同时声明为可选和默认。

示例:默认参数


function calculate_discount(price:number,rate:number = 0.50) { var discount = price * rate; console.log("Discount Amount: ",discount); 
} 
calculate_discount(1000) 
calculate_discount(1000,0.30)

编译时,它将生成以下 JavaScript 代码 -


//Generated by typescript 1.8.10
function calculate_discount(price, rate) {if (rate === void 0) { rate = 0.50; }var discount = price * rate;console.log("Discount Amount: ", discount);
}
calculate_discount(1000);
calculate_discount(1000, 0.30);

其输出如下 -

Discount amount : 500 
Discount amount : 300
  • 该示例声明了函数calculate_discount。该函数有两个参数 - 价格和费率。

  • 参数rate的值默认设置为0.50 。

  • 程序调用该函数,仅向其传递参数价格的值。这里, rate值为0.50 (默认)

  • 调用相同的函数,但有两个参数。速率的默认值被覆盖并设置为显式传递的值。

匿名函数

未绑定到标识符(函数名)的函数称为匿名函数。这些函数在运行时动态声明。匿名函数可以接受输入并返回输出,就像标准函数一样。匿名函数在初始创建后通常无法访问。

可以为变量分配匿名函数。这样的表达式称为函数表达式。

句法

var res = function( [arguments] ) { ... }

示例 ─ 一个简单的匿名函数


var msg = function() { return "hello world";  
} 
console.log(msg())

编译时,它将在 JavaScript 中生成相同的代码。

它将产生以下输出 -

hello world

示例 ─ 带参数的匿名函数


var res = function(a:number,b:number) { return a*b;  
}; 
console.log(res(12,2)) 

匿名函数返回传递给它的值的乘积。

编译时,它将生成以下 JavaScript 代码 -


//Generated by typescript 1.8.10
var res = function (a, b) {return a * b;
};
console.log(res(12, 2));

上述代码的输出如下 -

24

函数表达式和函数声明 ─ 它们是同义词吗?

函数表达式和函数声明不是同义词。与函数表达式不同,函数声明由函数名称绑定。

两者之间的根本区别在于,函数声明在执行之前被解析。另一方面,只有当脚本引擎在执行过程中遇到函数表达式时才会对其进行解析。

当 JavaScript 解析器在主代码流中看到函数时,它会假定函数声明。当函数作为语句的一部分出现时,它就是函数表达式。

函数构造器

TypeScript 还支持使用名为 Function () 的内置 JavaScript 构造函数定义函数。

句法

var res = new Function( [arguments] ) { ... }.

例子

var myFunction = new Function("a", "b", "return a * b"); var x = myFunction(4, 3); console.log(x);

new Function() 是对构造函数的调用,构造函数又创建并返回函数引用。

编译时,它将在 JavaScript 中生成相同的代码。

上述示例代码的输出如下 -

12

递归和 TypeScript 函数

递归是一种通过让函数重复调用自身直到得出结果来迭代操作的技术。当您需要在循环内使用不同参数重复调用同一函数时,最好应用递归。

示例 – 递归


function factorial(number) { if (number <= 0) { // termination case return 1; } else { return (number * factorial(number - 1)); // function invokes itself } }; console.log(factorial(6)); // outputs 720

编译时,它将在 JavaScript 中生成相同的代码。

这是它的输出 -

720

示例:匿名递归函数

(function () { var x = "Hello!!"; console.log(x) })() // the function invokes itself using a pair of parentheses ()

编译时,它将在 JavaScript 中生成相同的代码。

其输出如下 -

Hello!!

拉姆达函数

Lambda指的是编程中的匿名函数。Lambda 函数是一种表示匿名函数的简洁机制。这些函数也称为箭头函数

Lambda 函数 - 剖析

Lambda 函数由 3 个部分组成 -

  • 参数- 函数可以选择具有参数

  • 粗箭头表示法/lambda 表示法 (=>) - 也称为 go to 运算符

  • 语句- 代表函数的指令集

提示- 按照惯例,鼓励使用单字母参数来实现紧凑而精确的函数声明。

拉姆达表达式

它是一个指向单行代码的匿名函数表达式。其语法如下 -

( [param1, parma2,…param n] )=>statement;

示例:Lambda 表达式

var foo = (x:number)=>10 + x console.log(foo(100)) //outputs 110

该程序声明了一个 lambda 表达式函数。该函数返回 10 和传递的参数之和。

编译时,它将生成以下 JavaScript 代码。

//Generated by typescript 1.8.10 var foo = function (x) { return 10 + x; }; console.log(foo(100)); //outputs 110

这是上面代码的输出 -

110

拉姆达声明

Lambda 语句是指向代码块的匿名函数声明。当函数体跨越多行时使用此语法。其语法如下 -

( [param1, parma2,…param n] )=> {//code block
}

示例:Lambda 语句

var foo = (x:number)=> { x = 10 + x console.log(x) } foo(100)

返回函数的引用并将其存储在变量foo中。

编译时,它将生成以下 JavaScript 代码 -

//Generated by typescript 1.8.10 var foo = function (x) { x = 10 + x; console.log(x); }; foo(100);

上述程序的输出如下 -

110

句法变化

参数类型推断

不强制指定参数的数据类型。在这种情况下,参数的数据类型是any。让我们看一下下面的代码片段 -

var func = (x)=> { if(typeof x=="number") { console.log(x+" is numeric") } else if(typeof x=="string") { console.log(x+" is a string") } } func(12) func("Tom")

编译时,它将生成以下 JavaScript 代码 -

//Generated by typescript 1.8.10 var func = function (x) { if (typeof x == "number") { console.log(x + " is numeric"); } else if (typeof x == "string") { console.log(x + " is a string"); } }; func(12); func("Tom");

其输出如下 -

12 is numeric 
Tom is a string

单个参数的可选括号

var display = x=> { console.log("The function got "+x) } display(12)

编译时,它将生成以下 JavaScript 代码 -

//Generated by typescript 1.8.10 var display = function (x) { console.log("The function got " + x); }; display(12);

其输出如下 -

The function got 12

单个语句的可选大括号,无参数的空括号

以下示例显示了这两种语法变体。

var disp =()=> { console.log("Function invoked"); } disp();

编译时,它将生成以下 JavaScript 代码 -

//Generated by typescript 1.8.10 var disp = function () { console.log("Function invoked"); }; disp();

其输出如下 -

Function invoked

函数重载

函数能够根据提供给它们的输入进行不同的操作。换句话说,一个程序可以有多个同名但不同实现的方法。这种机制称为函数重载。TypeScript 提供对函数重载的支持。

要重载 TypeScript 中的函数,您需要按照以下步骤操作 -

步骤 1 - 声明具有相同名称但不同函数签名的多个函数。函数签名包括以下内容。

  • 参数的数据类型

function disp(string):void; 
function disp(number):void;
  • 参数个数

function disp(n1:number):void; 
function disp(x:number,y:number):void;
  • 参数顺序

function disp(n1:number,s1:string):void; 
function disp(s:string,n:number):void;

注意- 函数签名不包括函数的返回类型。

步骤 2 - 声明后面必须跟有函数定义。如果重载时参数类型不同,则参数类型应设置为any。此外,对于上面解释的情况 b,您可以考虑在函数定义期间将一个或多个参数标记为可选。

步骤 3 - 最后,您必须调用该函数才能使其正常工作。

例子

现在让我们看一下以下示例代码 -

function disp(s1:string):void; function disp(n1:number,s1:string):void; function disp(x:any,y?:any):void { console.log(x); console.log(y); } disp("abc") disp(1,"xyz");
  • 前两行描述了函数重载声明。该函数有两个重载 -

    • 接受单个字符串参数的函数。

    • 分别接受数字和字符串类型的两个值的函数。

  • 第三行定义了函数。参数的数据类型设置为any。而且,这里第二个参数是可选的。

  • 重载函数由最后两条语句调用。

编译时,它将生成以下 JavaScript 代码 -

//Generated by typescript 1.8.10 function disp(x, y) { console.log(x); console.log(y); } disp("abc"); disp(1, "xyz");

上面的代码将产生以下输出 -

abc 
1 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/599081.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

python封装接口自动化测试套件

在Python中&#xff0c;我们可以使用requests库来实现接口自动化测试&#xff0c;并使用unittest或pytest等测试框架来组织和运行测试套件。以下是一个基本的接口自动化测试套件封装示例&#xff1a; 首先&#xff0c;我们需要安装所需的库&#xff1a; pip install requests …

《MySQL系列-InnoDB引擎04》MySQL表相关介绍

文章目录 第四章 表1 索引组织表2 InnoDB逻辑存储结构2.1 表空间2.2 段2.3 区2.4 页2.5 行2.6 拓展&#xff1a;MySQL的varchar(n)能存储几个字符&#xff1f;占多少字节&#xff1f; 3 InnoDB行记录格式4 文件格式5 约束5.1 数据完整性5.2 约束的创建和查找5.3 约束和索引的区…

2023-2024学年上学期算法设计与分析题期末考试模拟卷

2023-2024学年上学期算法设计与分析题期末考试模拟卷 文章目录 2023-2024学年上学期算法设计与分析题期末考试模拟卷单选题程序填空题输入格式:输出格式:输入样例1:输出样例1: 主观题 注意&#xff1a;该题集非标准答案&#xff0c;仅供参考&#xff0c;如果异议&#xff0c;请…

鸿蒙学习笔记

DevEco Studio, ArkTS, ArkUI, ArkCompiler, DevEco Testing是啥 DevEco Studio是华为开发的一款集成开发环境&#xff08;IDE&#xff09;&#xff0c;用于开发基于华为鸿蒙操作系统&#xff08;HarmonyOS&#xff09;的应用程序。它提供了丰富的开发工具和功能&#xff0c;包…

vue3 实现关于 el-table 表格组件的封装以及调用

一、示例图&#xff1a; 二、组件 <template><div class"sn-table" :class"props.colorType 1 ? : bg-scroll"><el-table :data"tableData" :row-class-name"tableRowClassName" height"500" style"…

DevOps(8)

目录 36.当发出的命令与上次使用时产生的结果不同时&#xff0c;会出现什么问题&#xff1f; 37./usr /local的内容是什么&#xff1f; 38.你如何终止正在进行的流程&#xff1f; 39.如何在命令行提示符中插入注释&#xff1f; 40.什么是命令分组以及他是如何工作的&…

istio 灰度发布部署(包括 deploy、svc、gw、vs 和 dr)

创建 deployment 分别部署两个版本的 deployment。在灰度发布的过程中&#xff0c;注意 pod 标签的设置&#xff0c;后续 svc 和 dr 就是根据标签来划分 pod apiVersion: apps/v1 kind: Deployment metadata:labels:app: bbjcxtversion: v1name: bbjcxtnamespace: mm-nbxt-hu…

云卷云舒:【实战篇】Redis迁移

1. 简介 Remote Dictionary Server(Redis)是一个由Salvatore Sanfilippo写的key-value存储系统&#xff0c;是一个开源的使用ANSIC语言编写、遵守BSD协议、支持网络、可基于内存亦可持久化的日志型、Key-Value数据库&#xff0c;并提供多种语言的API。 2. 迁移原理 redis-sh…

什么是 RFID 及其工作原理?

一、自动识别技术 自1999年麻省理工学院研究人员的首创开始&#xff0c;自动识别技术&#xff08;简称auto-ID&#xff09;的领域不断扩大。自动识别技术形成了多种技术路线&#xff0c;使我们能够自动、精确地捕获、识别和存储与物体、物品或个人相关的数据&#xff0c;从而减…

Selenium-java 定位元素时切换iFrame时的方法

具体方法如下图所示&#xff0c;如果iFrame中嵌套多层iFrame需要逐层定位到需要的那一层iFrame,完成操作后&#xff0c;执行该代码&#xff1a;driver.switchTo() .defaultContent() ; 是返回最顶部的frame

hyperf 二十 数据库 三 创建脚本

教程&#xff1a;Hyperf 根据之前文章&#xff1a;hyperf 十九 数据库 二 模型-CSDN博客 应该能了解到visitors参数。 根据教程&#xff0c;使用visitors参数创建脚本。在配置在设置visitors参数&#xff0c;格式为数据。 一、可选脚本说明 Hyperf\Database\Commands\Ast…

理解二叉树的遍历(算法村第七关白银挑战)

二叉树的前序遍历 144. 二叉树的前序遍历 - 力扣&#xff08;LeetCode&#xff09; 给你二叉树的根节点 root &#xff0c;返回它节点值的 前序 遍历。 示例 1&#xff1a; 输入&#xff1a;root [1,null,2,3] 输出&#xff1a;[1,2,3]解 LeetCode以及面试中提供的方法可能…

科普:嵌入式多核并行仿真

自信息技术革命以来&#xff0c;计算机一直被应用在各种复杂的数据处理中&#xff0c;如火箭弹道&#xff0c;高能物理和生物学数据等。随着嵌入式领域的多样化需求的不断丰富&#xff0c;多核CPU的应用也越来越广泛&#xff1a;嵌入式系统通常需要同时处理多个任务和实时数据&…

【C语言】6-3 分别实现单个“图书”类型变量的输入和输出。分数 10

6-3 分别实现单个“图书”类型变量的输入和输出。 分数 10 全屏浏览题目 切换布局 作者 赵静静 单位 浙江工贸职业技术学院 编写2个函数&#xff0c;分别实现单个“图书”类型变量的输入和输出。其中“图书”的成员包括书名、ISBN、单价、作者、出版社。 函数接口定义&…

ChatGPT是什么,海鲸AI软件功能有哪些

ChatGPT是一种基于人工智能的对话生成技术&#xff0c;它利用深度学习模型来理解和生成自然语言对话。ChatGPT的核心是一种称为生成式预训练模型(GPT)的技术&#xff0c;它能够根据输入的对话内容生成连贯、自然的回答&#xff0c;实现智能对话的目的。这种技术的出现&#xff…

高级鉴权验签方式的实践,技术方案为注解+ASCII排序+多类型多层级动态拼接+RSA加密(或国密SM2)+Base64+Redis滑动窗口限流

背景 虽然大多数企业的流量没有那么大&#xff0c;不过限流还是要有的&#xff0c;毕竟还有外部调用我方系统接口&#xff0c;需要验证访问权限进行&#xff0c;同时防止万一接口并发量大影响我方系统&#xff0c; 所以要增加流控处理&#xff1b;不同的来源在独立配置&#x…

嵌入式工程师有什么热门的发展方向?

随着5G的普及和物联网时代的到来&#xff0c;各种技术不断融合创新&#xff0c;嵌入式技术已成为互联网行业中具有前景的职业之一。 嵌入式工程师在当今数字化时代拥有广泛的就业前景&#xff0c;新技术的发展也为嵌入式工程师提供了更多机会&#xff0c;给大家列举了四个嵌入…

【JAVA】实验二 类与对象

实验名称 实验二 类与对象 实验目的 1. 深刻理解类的封装与继承&#xff1b; 2. 熟练掌握类的定义、包与路径、对象的创建、方法的调用、类的继承、方法的重写、运行时多态、访问权限修饰符的使用等&#xff1b; 3. 熟练运用JDK提供的常用类及API。 实验内容&…

文件二维码能下载文件吗?扫码看文件效率更高

为了让文件更快的传递&#xff0c;现在将文件制作二维码图片后&#xff0c;让其他人通过扫码查看或者下载文件的方式&#xff0c;被越来越多的人应用。一般想要制作文件二维码&#xff0c;大多会使用文件二维码生成器&#xff08;文件二维码生成器_word、excel、ppt、pdf文档制…

linux下安装Nginx及其常用命令

安装Nginx 接下来在Linux服务器进行操作就可以了 安装插件 yum -y install gcc pcre-devel zlib-devel openssl openssl-devel直接使用wget进行安装(如果没有wget需要先安装wget) yum install wgetwget https://nginx.org/download/nginx-1.24.0.tar.gz解压 tar -zxvf nginx..…