小窥TypeScript:函数新特性

1、Rest and Spread操作符

...用来申明任意数量的参数。

function func1(...args) {
    args.forEach(function (arg) {
        console.log(arg);
    })
}
func1(1, 2, 3, 4);
func1(5, 6, 7);

也可以反过来使用:

function func1(a,b,c) {
    console.log(a);
    console.log(b);
    console.log(c);
}
var args1 = [1, 2, 3, 4, 5];
func1(...args1);
var args2 = [7, 8];
func1(...args2);

这时会自动将数组前三个元素,赋给方法func1的三个元素,如果不满三个,则给出undefined。

2、generator函数

控制函数的执行过程,手工暂停和恢复代码执行。在function后面加一个*号,并在函数中加上yield关键字。

function* func1() {
    console.log("开始开始!");
    yield;
    console.log("中间中间!");
    yield;
    console.log("结束结束!");
}
var func2 = func1();
func2.next();
func2.next();

在每次执行next()的时候,就会在一个yield前面停下,所以执行后控制台的结果为:

开始开始!
中间中间!

再来一个复杂的例子:

function* func1() {
    while (true) {
        yield Math.random() * 100;
    }
}
var func2 = func1();
var di = 30;
var zhi = 31;
while (zhi > di) {
    zhi = func2.next().value;
    console.log(`${zhi}没有大于大于${di},程序继续执行!`)
}

只要随机数大于变量di,就会继续执行到低于di结束。

3、destructuring析构表达式

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

function getPerson() {
    return {
        names:"haha",
        age:30
    }
}
var { names, age } = getPerson();
console.log(names);
console.log(age);

由例子可以看出,析构表达式里面的变量,一定要跟函数里的变量名称要相同。如果想改变名称,则需要在后面加一个析构表达式,如:

var { names :xingming, age } = getPerson();

如果age变量里面嵌套了其他的变量,如:

function getPerson() {
    return {
        names:"haha",
        ages: {
            age1: 30,
            age2:18
        }
    }
}

可以在取出数据的时候,获取指定的嵌套数据,如:

var { names :xingming, ages:{age2} } = getPerson();
console.log(xingming);
console.log(age2);

这样就可以直接获取到年龄18岁的数据。

还有针对数组的析构表达式:

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

这样就能取得数组arr1的前两个元素,如果想取得第二个及第四个元素,则需要将代码改成:

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

还能将...args引入析构表达式:

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

最后来个方法中参数使用的析构表达式例子:

var arr1 = [1, 2, 3, 4];
function func1([number1, number2, ...args]) {
    console.log(number1);
    console.log(number2);
    console.log(args);
}
func1(arr1);

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值