函数

JavaScript

1. 命名函数

function say1(name){
  console.log(name)
}

1. 匿名函数

let say2 = function (name){
  console.log(name)
}

1. 箭头函数

let say1 = (name) => {
  console.log(name)
}

TypeScript

1. 命名函数

function say1(name:string):void{
  console.log(name)
}

1. 匿名函数

let say2 = function (name:string):void{
  console.log(name)
}

1. 箭头函数

let say1 = (name:string):void => {
  console.log(name)
}

函数声明和重载

1.TS函数完整格式

• 在TS中函数的完整格式应该是由函数的定义和实现两个部分组成的
  • 定义一个函数：let AddFun:(a:number,b:number)=>number
  • 根据定义实现函数 AddFun = function (x:number,y:number):number{return x + y}

// 根据函数的定义自动推导对应的数据类型
let AddFun:(a:number,b:number)=>number = 
    function (x,y){
      return x + y
    }

2.TS函数声明

• 声明一个函数：

// 先声明一个函数
type AddFun = (a:number,b:number)=>number
// 再根据声明去实现这个函数
let add:AddFun = function (x,y) {
  return x + y
}

3.TS函数重载

• 函数的重载就是同名的函数可以根据不同的参数实现不同的功能

// 定义函数重载
function getArray(x:number):number[]
function getArray(x:string):string[]
// 实现函数重载
function getArray(value:any):any[]{
  if(typeof value === 'sting'){
    return value.split('')
  }else{
    let arr = []
    for (let i = 0; i <= value; i++){
      arr.push(i)
    }
    return arr
  }
}
let res1 = getArray(3) // res1 = [0,1,2,3]
let res2 = getArray('magic') // res2 = ['m','a','g','i','c']

可选-默认-剩余参数

1.可选参数

// 定义一个函数实现2个数或者3个数相加
function add(x:number,y:number,z?:number){
  return x + y + (z ? z : 0)
}
let res1 = add(10,20) // res1 = 30
let res2 = add(10,20,30) // res2 = 60

• 可选参数可以配合函数重载一起使用，这样可以让函数重载变得更加强大

function add(x:number,y:number):number
function add(x:number,y:number,z:number):number
function add(x:number,y:number,z?:number){
  return x + y + (z ? z : 0)
}

• 可选参数后面只能跟可选参数

function add(x:number,y?:number,z?:number){ // 不报错
  // function add(x:number,y?:number,z:number){ // 报错
  return x + (y ? y : 0) + (z ? z : 0)
}

2.默认参数

• 从ES6开始，可以直接在形参后面通过=指定默认值

function getSum(a:number = 1, b:number = 2):number {
  console.log(a,b)
}
let res1 = getSum() // res1 = 3
let res2 = getSum(10,20) // res2 = 30

• ES6开始的默认值还可以从其他函数中获取

function getSum(a:number, b:number = getDefault()):number {
  return a + b
}
let res1= getSum(1) // res1 = 3
let res2 = getSum(10,20) // res2 = 30
function getDefault():number {
  return 2
}

3.剩余参数

1. 扩展运算符在左边：将剩余数据打包到一个新的数组（注意：扩展运算符只能写在最后）

let [a,...b] = [1,3,5];
//a = 1;
//b = [3,5];

1. 扩展运算符在右边：将数组中数据解开

let arr1 = [1,3,5]
let arr2 = [2,4,6]
let arr = [...arr1,...arr2]
// arr = [1,3,5,2,4,6]

1. 扩展运算符在函数的形参列表中：将传递给函数的所有实参打包到一个数组中(注意：扩展运算符只能写在最后)

function getSum(...values:number):number{
  // values = [10,20]
  let sum = 0;
  for(let i = 0; i < values.length; i++){
    let num = values[i]
    sum += num
  }
  return sum
}
let res = getSum(10,20) // res = 30