• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

Typescript学习总结1

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

Typescript字符串处理

首先打开运行Typescript的编辑器

http://www.typescriptlang.org/play/index.html

1. 调用变量和方法

var myname = "zhangsan";
var getName = function () { 
    return "zhangsan";
}
console.log(`hello ${myname}`)
console.log(`hello ${getName()}`)

 

2. 自动拆分字符串

function test(template, name, age) { 
    console.log(template);
    console.log(name);
    console.log(age);
}

var myname = "zhangsan";
var getAge = function () { 
    return 18;
}

test`hello, my name is ${myname}, age is ${getAge()}`

运行结果

 

 3. 函数默认参数

如下图,定义了三个string类型的参数的函数test

如果只传两个参数,编译器就会报错

此时可以将第三个参数设置默认值,或者调用test方法时传递三个参数。

注意: 带默认值参数要放在函数最后面

 

4. 可选参数

function test(id:string, name?:string, age:string = '18') { 
    console.log(id);
    console.log(name);
    console.log(age);
}

test("1");

可选参数只需要在参数名后面加一个问号

此时test函数只需要传递一个参数

  

5. 任意参数

function test(...args) { 
    args.forEach(function (arg) { 
        console.log(arg);
    })
}

test('zhangsan');
test('zhangsan', '男');
test('zhangsan','男', 18)

 三个点形式的参数代表可以传任意个参数

 

6. 析构函数

6.1 针对对象的析构表达式

function getStudent() { 
    return {
        stuName: "zhangsan",
        age:24
    }
}

var { stuName, age } = getStudent();
console.log(stuName);
console.log(age);

stuName和age要和对象里的名称对应,如果要修改名称,可以改成stuName:sName

function getStudent() { 
    return {
        stuName: "zhangsan",
        age:24
    }
}

var { stuName:sName, age } = getStudent();
console.log(sName);

  对象里还有对象,如下面的nickName

function getStudent() { 
    return {
        stuName: "zhangsan",
        age: 24,
        nickName: {
            nickName1:"z1",
            nickName2:"z2"
        }
    }
}

var { stuName: sName, age, nickName: { nickName1}} = getStudent();
console.log(sName);
console.log(age);
console.log(nickName1);

  

6.2 针对数组的析构表达式

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

如果要打印第一个数字和第四个数字

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

 

打印出其他数组

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

  结果如下 other代表第三个和第四个参数的数组

 

6.3 函数参数的析构

var array1 = [1, 2, 3, 4];

function test([number1, number2, ...other] ) { 
  console.log(number1);
  console.log(number2);
  console.log(other);
}

test(array1);

  

  

7. 箭头表达式:

  用来声明匿名函数,消除传统匿名函数的this指针

var sum = (arg1, arg2) => arg1 + arg2;

如果是多行,还是要加{}的

var sum = (arg1, arg2) => {
    if (arg1 < 0) { 
        arg1 = 0;
    }
   return arg1 + arg2;
}

 

如果方法只有一个参数,可以直接写参数

var sum = arg1 => { 
    console.log(arg1);
}

  

例如

var array1 = [1, 2, 3, 4, 5];

console.log(array1.filter(value => value % 2 == 0));

定义了一个数组,并过滤数组里的数字是2的整数倍,打印结果如下

 

  

 8. 循环表达式

forEach循环(JS本身支持)

var array1 = [1, 2, 3, 4];
array1.info = "for info";

array1.forEach(value => console.log(value));

打印结果

 

forEach不能跳出循环,break是不支持的

并且忽略info属性,也就是不打印info值

 

for in 循环 (JS本身支持) 

var array1 = [1, 2, 3, 4];
array1.info = "for info";

for (var i in array1) { 
    console.log(array1[i]);
}

效果图

不忽略info属性

 

for of 循环

可以打断循环 

var array1 = [1, 2, 3, 4];
array1.info = "for info";

for (var i of array1) { 
    console.log(i);
}

 忽略info属性,也就是不打印info值

for of 支持break

var array1 = [1, 2, 3, 4];
array1.info = "for info";

for (var i of array1) { 
    if (i > 2) { 
        break;
    }
    console.log(i);
}

  

 

 


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
TypeScript学习之WebStorm(1)发布时间:2022-07-18
下一篇:
TypeScript发布时间:2022-07-18
热门推荐
热门话题
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap