一、TypeScript-Rest and Spread操作符

用来声明任意数量的方法参数

 ...args中的...就是Rest and Spread操作符。

例1:

声明一个可以传任意数量的参数进来的方法

function func(...args:Array<number>) {
args.forEach((arg) => {
console.log(arg)
})
} func(1,2,3)
func(1,2,3,4)

例2: 反过来的用法

把任意长度的数组转化成固定数量的参数调用 【ts会报错不支持,但是编译出来的js可以正常运行】

function func1(a,b,c) {
console.log(a);
console.log(b);
console.log(c);
} var args = [1, 2]; func1(...args); //1 2 undefined
var args2 = [7, 8, 9, 10, 11]; //7,8,9
func1(...args2);

二、TypeScript-Generator函数

babel在线编辑器

控制函数的执行过程,手动暂停和恢复代码执行。

es6关键字yeild可以让代码执行一半停下来。

generator函数声明:function* 【很简单,在function后面加个*就声明了】

例1:简单的例子

通过yield控制generator函数的暂停和执行。

function* doSomething(){
console.log("start");
yield; console.log("finish");
} //doSomething();//这样调用generator函数不起作用 ,必须声明为一个变量
var fun1=doSomething();
fun1.next();
fun1.next();

调用一次next(),走到一个yield;停下,再次调用next()走下一个yield;

例2:复杂的例子

自动买股票,在股票价格低于某个价格自动买股票。

//获取股票的价格
function* getStockPrice(stock){
while(true){//无限循环
yield Math.random()*100; //每次循环都会停住,返回0-100的一个数字
} }
var priceGenerator=getStockPrice("IBM"); //买IBM的股票,声明成一个变量
var limitPrice=15;//价格低于15元才去买 var price=100;//起始的价格是100 while(price>limitPrice){//当价格大于限制的价格时 //价格小于15时跳出循环
price=priceGenerator.next().value;//再去取一次价格
console.log(`the generator return ${price}`); //打印一下取到的价格
} console.log(`buying at ${price}`); //跳出循环时的price,即购买时的价格

while(true)并没有无限执行,只有条件满足时才执行。 

了解更多参考:generator函数

三、TypeScript-解构表达式

通过表达式将对象(大括号声明)或数组(中括号声明)拆解成任意数量的变量

用对象或者数组的属性或值初始化本地变量的时候,写更少的代码。

把对象的属性值拆出来放到本地变量里边去 。

typescript在线编辑器

例子1 对象的解构:

function getStock() {
return {
code: "IBM",
price:100
}
} var { code, price } = getStock();
console.log(code);
console.log(price);

es6到es5的转换

var { code, price } = getStock();//被转换为如下3句代码
var _a = getStock(), code = _a.code, price = _a.price;

注意的点:

function getStock() {
return {
code: "IBM",
price: {
price1: 200,
price2:400
}
}
} var { code: codeX, price:{price2} } = getStock();
console.log(codeX);//重命名
console.log(price2);//嵌套的值 析构里再写个析构

例子2 数组的解构:

解构和rest操作符使用

var array1 = [1, 2, 3, 4,];
var [num1, num2,...others] = array1;
console.log(num1);
console.log(num2);
console.log(others);

析构表达式作为方法的参数

var array1 = [1, 2, 3, 4,];
var [num1, num2, ...others] = array1;
function doSomething([num1, num2, ...others]) {
console.log(num1);
console.log(num2);
console.log(others);
} doSomething(array1);

本文作者starof,因知识本身在变化,作者也在不断学习成长,文章内容也不定时更新,为避免误导读者,方便追根溯源,请诸位转载注明出处:http://www.cnblogs.com/starof/p/6961783.html 有问题欢迎与我讨论,共同进步。

2017-06-08

TypeScript入门(二)函数新特性的更多相关文章

  1. 简单理解ECMAScript2015中的箭头函数新特性

    箭头函数(Arrow functions),是ECMAScript2015中新加的特性,它的产生,主要有以下两个原因:一是使得函数表达式(匿名函数)有更简洁的语法,二是它拥有词法作用域的this值,也 ...

  2. 前端笔记之ES678&Webpack&Babel(中)对象|字符串|数组的扩展&函数新特性&类

    一.对象的扩展 1.1对象属性名表达式 ES6可以在JSON中使用[]包裹一个key的名字.此时这个key将用表达式作为属性名(被当做变量求值),这个key值必须是字符串. var a = 'name ...

  3. TypeScript入门知识三(函数新特性)

    一,Rest and Spread操作符: 用来声明任意数量的方法参数也就是"..."操作符 输出结果: 18 jajj 89 function test (a, b, c) { ...

  4. TypeScript入门二:基本数据类型

    浅析基本数据类型 TypeScript类型解析 一.浅析基本数据类型 首先有一个问题TypeScript是一门编译型语言?还是解释性语言?显然已经不能被这两个分类来区分,TypeScript的并不是为 ...

  5. 函数新特性、内联函数、const详解

    一.函数回顾与后置返回类型 函数定义中,形参如果在函数体内用不到的话,则可以不给形参变量名字,只给其类型. 函数声明时,可以只有形参类型,没有形参名 把函数返回类型放到函数名字之前,这种写法,叫前置返 ...

  6. ES6语法:函数新特性(一)

    ES6 函数 引言: 函数在任何语言中偶读很重要,java里面的函数通常叫做方法,其实是一个东西,使用函数可以简化更多的代码,代码结构看着更加清晰.今天我们来学学ES6语法中,函数有什么变化. 虽然现 ...

  7. 【React】345- React v16.9 新特性[译]

    今天我们发布了 React 16.9.它包含了一些新特性.bug修复以及新的弃用警告,以便与筹备接下来的主要版本. 一.新弃用 重命名 Unsafe 生命周期方法 一年前,我们宣布 unsafe 生命 ...

  8. typescript入门基础

    1.typescript介绍 微软开发的一门编程语言,javascript的一个超集,遵循最新的ES6脚本语言规范(2015年发布),它扩展了Javascript的语法,任何已经写好的javascri ...

  9. jdk1.8新特性总结

    一.引言 jdk1.8出来已经一段时间了,现在1.9也已经出来了,但是很多公司(我们公司也一样)不太愿意升级到高版本的jdk,主要是有老的项目要维护,还有升级的话配套的框架也要升级,要考虑的细节事情太 ...

随机推荐

  1. Markdown语法你都会了吗?

    关于Markdown,它可以说是程序员公认最好的文档语言了,没有之一!我相信经常写文章或者开发文档的大佬们都对其能生成简洁.大方.雅观的文档都深有体会,它的强大是毋庸置疑的.它编写的文档不但能生成ht ...

  2. Docker系统五:Docker仓库

    创建Docker Hub账户 登录和上传镜像到Hub.docker.com docker login //登陆hub.docker.com docker tag ubutun1404-baseimag ...

  3. 老司机教你在windows不用软件隐藏重要文件

    每个人电脑里面都有些秘密,但是别人需要使用你的电脑时,有可能会看到,但是我们又不想让别人发现时,我们可以将其隐藏,那么别人就不会看到了.360文件保险柜.腾讯电脑管家等等.使用软件繁琐软件过大还会拖慢 ...

  4. ELK 经典用法—企业自定义日志手机切割和mysql模块

    本文收录在Linux运维企业架构实战系列 一.收集切割公司自定义的日志 很多公司的日志并不是和服务默认的日志格式一致,因此,就需要我们来进行切割了. 1.需切割的日志示例 2018-02-24 11: ...

  5. linux远程控制

    linux远程控制 SSH协议:为客户机提供安全的shell环境,默认端口22OpenSSH服务服务名称:sshd主程序:/usr/sbin/sshd ,/usr/bin/ssh配置文件:/etc/s ...

  6. 网络基础tcp/ip协议二

    物理层解析: 物理层是TCP/IP模型的最低层,物理层为数据提供数据传输可靠通路. 物理层关心的介质: 信号 接口 传输介质 信号的分类:(信号是信息传递的媒介.) 模拟信号:连续变化的物理量 数字信 ...

  7. HI3531的DDR3配置流程

    DDR3 初始化配置流程 系统上电之后,必须先完成DDR3 SDRAM 的初始化操作,系统才能访问DDR3 SDRAM.在进行初始化之前需要注意以下几点: 对DDR3 SDRAM 进行上电操作时,需要 ...

  8. linux命令之 ifconfig

    许多windows非常熟悉ipconfig命令行工具,它被用来获取网络接口配置信息并对此进行修改.Linux系统拥有一个类似的工具,也就是ifconfig(interfaces config).通常需 ...

  9. Servlet配置

    1.在Servlet中,Servlet的配置 @WebServlet(name="csvExportServlet",urlPatterns="/servlet/CsvE ...

  10. Java使用foreach遍历集合元素

    Java使用foreach遍历集合元素 1.实例源码 /** * @Title:ForEach.java * @Package:com.you.model * @Description:使用forea ...