Type Script学習ノートの六関数(ポイント矢印関数)

一、使用環境

Macパソコン

WebStorm

TypeScript3.xバージョン

二、基本関数
2.1、関数宣言定義

function sum(x : number, y : number) : number {
 return x + y;
}
 console.log(sum(2,4));

2.2、関数式の定義

 let mySum = function (x: number, y: number): number {
return x + y;
  };

2.3、インタフェースで関数を定義する

interface ISearchFunc {
(source : string, substring : string):boolean;
};

 let  searchfunc : ISearchFunc;
 searchfunc = function (source : string, substring : string) {
 return source.search(substring) != -1;
 };
 console.log(searchfunc("2334455",'45'));

2.4、関数パラメータ:オプションパラメータとデフォルトパラメータ

 //                  
 //     ：             
 // ...rest                    
 function buildName( firstName:string, lastName?:string, age : number = 10,...items:string[]) {

  console.log(items);

  if(lastName){
      return firstName + '  ' + lastName + '  ' + age.toString();
  }else {
      return firstName + age.toString();
  }
}
 console.log((buildName("tom","455",23,'5',"45","      ")));

三、矢印関数
3.1、基本文法
ES 6では、矢印(=>)を使用して関数矢印関数を匿名関数に相当するように定義できます.関数定義の表現を簡略化します.returnも省略しました

    x => x * x  //       ， { ... } return     
   
    function (v) {
      return v;
   };

表示形式2:複数の文が含まれているので、その場合は省略できません.およびreturn

x => {    //       ，        { ... } return
if (x > 0) {
    return x * x;
}
else {
    return - x * x;
}
}

基礎文法
A、(パラメータ1,パラメータ2,...,パラメータN)=>{関数宣言}
B、(パラメータ1,パラメータ2,...,パラメータN)=>式(単一)//相当:(パラメータ1,パラメータ2,...,パラメータN)=>{return式;}
//パラメータが1つしかない場合、カッコはオプション:C、(単一パラメータ)=>{関数宣言}
D、単一パラメータ=>{関数宣言}//パラメータのない関数は括弧で書くべきです.
E、()=>{関数宣言}
3.2、高級文法
A、括弧付きの関数体は、オブジェクトの字面表現を返します.

   => ({foo: bar})

B、残りのパラメータとデフォルトパラメータをサポートする

 (  1,   2, ...rest) => {    }
 (  1 =    1,  2, …,   N =    N) => {    }

C、同様にパラメータリストの解体をサポートする

 let f = ([a, b] = [1, 2], {x: c} = {x: a + b}) => a + b + c;
 f();  // 6

3.3、矢印関数のthis
矢印関数の導入には2つの側面があります.1つは、より短い関数の書き方、2つはthisの文法解析です.
一般関数:thisは呼び出したオブジェクトの矢印関数を指します:thisをバインドしないと、そのコンテキストのthis値がキャプチャされます.自分のthis値として、call()、bind()、apply()などの方法では、その指向は変更されません.

var obj = {
a: 10,
b: () => {
console.log(this.a); // undefined
console.log(this); // Window {postMessage: ƒ, blur: ƒ, focus: ƒ,    close: ƒ, frames: Window, …}
 },
 c: function() {
console.log(this.a); // 10
console.log(this); // {a: 10, b: ƒ, c: ƒ}
}
 }
obj.b(); 
obj.c();

矢印関数には自分のthisがないので、もちろんcall()やapply()やbind()などの方法でthisの指向を変えることはできません
3.3、矢印関数のその他の属性方法
一般関数のarguments、super、new、target、yield、prototypeは矢印関数には存在しません

function foo() {
 setTimeout(() => {
console.log('args:', arguments);
 }, 100);
}
foo(2, 4, 6, 8)

上のコードでは、矢印関数内部の変数argumentsは、実は関数fooのarguments変数です.
矢印関数にはいくつかの使用上の注意点があります.
(1)関数内のthisオブジェクトは、定義時に存在するオブジェクトであって、使用時に存在するオブジェクトではない.(2)コンストラクション関数として使用することはできない.すなわちnewコマンドを使用してはいけない.そうしないと、エラーが投げ出される.(3)argumentsオブジェクトを使用することはできない.このオブジェクトは関数内に存在しない.使用する場合はrestパラメータで代用することができる.(4)yieldコマンドは使用できませんので、矢印関数はGenerator関数として使用できません.
TypeScript学習ノートの5種類(Class)TypeScript学習ノートの4インタフェース(Inferfaces)TypeScript学習ノートの3非元データ型TypeScript学習ノートの2基本データ型TypeScript学習ノートの1つTypeScript初見