Typescript 第四章 函数新特性

1.Rest and Spread操作符

##1声明任意数量的方法参数

function func1(...args){
    args.forEach(function (arg) {
        console.log(arg);  //将每个参数打印
    })
}

func1(1,2,2,3,3);  //打印出 1,2,2,3，3
func1(1,1); //打印出 1，1

##2 逆向应用,任意长度的数组转化为固定参数的函数调用

//逆向应用,任意长度的数组转化为固定参数的函数调用
function func2(a,b,c){
    console.log(a);
    console.log(b);
    console.log(c);
}
var args=[1,2];
func2(..args);  //打印出 1,2,undefined，目前typescript不支持这种语法，但是转为javascript可以运行

var args2=[7,8,9,10,11];
func2(...args2);  //打印出 7,8,9

2.generator函数：控制函数的执行过程，手工暂停和恢复代码执行

##1声明generator函数，在function加*

//声明generator函数，在function加*
function* doSomeThing(){
    console.log("start");
    yield ; //
    console.log("finish");
}

var func12=doSomeThing(); //必须将generator函数声明成一个变量,才能调用
func12.next(); //start，停在了yield处
func12.next();  //finish 从yield开始执行

##2

function* getStokePrice(stoke){
    while (true){
        yield Math.random()*100;
    }
}
var priceGenerator=getStokePrice("IBM");
var limitPrice=15;
var price=100;
while (price>limitPrice){
    price=priceGenerator.next().value;
    console.log(`the generator return ${price}`);
}
console.log(`buying at ${price}`);

3.析构表达式

【1】通过表达式将对象或数组拆解成任意数量的变量

##1，对象属性不嵌套

function getStoke(){
    return{
        code:'IBM',
        price:100

    }
}

//ES5写法
var stoke=getStoke();
var code=stoke.code;
var price=stoke.price;

 //ES6写法
var {code,price}=getStoke();  //析构表达式，注意：{}里面的变量必须要与=函数中的变量相同
var {code:codex,price}=getStoke();//给变量起别名

##2，对象属性嵌套

//1
function getStoke1(){
    return{
        code:'IBM',
        price:{
            price1:100,
            price2:200
        }

    }
}
var {code:codex,price:{price2}}=getStoke1();
//2
function getStoke2(){
    return{
        code:'IBM',
        price:{
            price1:100,
            price2:200
        },
        aaa:"xxx",
        bbb:"haha"

    }
}
var {code:codex,price:{price2}}=getStoke2();
console.log(codex); //IBM
console.log(price2);//200

【2】针对数组的析构表达式

##1，简单情况

var array1=[1,2,3,4];
var [number1,number2]=array1;
console.log(number1); //1
console.log(number2); //2

var [,,number1,number2]=array1;
console.log(number1);//3
console.log(number2);//4

var [number1,,,number2]=array1;
console.log(number1);//1
console.log(number2);//4

##2，复杂情况

var array1=[1,2,3,4];
var [number1,number2,...others]=array1;
console.log(number1);//1
console.log(number2);//2
console.log(others);  //[3,4]

【3】把析构表达式当做方法参数

var array1=[1,2,3,4];
function doSomeThing([number1,number2,...others]){
    console.log(number1);//1
    console.log(number2);//2
    console.log(others);  //[3,4]
}

doSomeThing(array1);

4.箭头表达式：用来声明匿名函数，消除传统匿名函数中的this指针问题

【1】最简单的匿名表达式

##1，基础

var sum=(arg1,arg2)=>arg1+arg2;  //返回两数之和，一行不用写{}，多行要写{}
var sum=(arg1,arg2)=>{
    return arg1+arg2;
}

var sum=()=>{//无参数

}

var sum=arg1=>{//一个参数
    console.log(arg1);
}

##2，举例

//挑出偶数
var myArray=[1,2,3,4,5];
console.log(myArray.filter(value => value%2==0))  //2,4  数组

##3，箭头表达式解决了js中this的问题

//【1】js方式
function  getStoke3(name:string){
    this.name=name;
    setInterval(function () {
        console.log("name is"+this.name);
    },1000)
}
var stoke3=getStoke3('IBM'); //oupput : 空,

//【2】ts方式
function  getStoke4(name:string){
    this.name=name;
    setInterval(()=>{
        console.log("name is"+this.name);
    },1000)
}
var stoke4=getStoke3('IBM'); //oupput : IBM