TypeScript笔记
typeScript可以编译成纯JavaScript,是一种对JavaScript添加特性的语言扩展
基本语法
安装
可以直接使用npm
进行安装
npm config set registry https://registry.npmmirror.com #使用国内镜像
npm install -g typescript #安装typeScript
之后便可以使用ts
命令
tsc app.ts #转换为JavaScript代码
node app.js #执行js文件
基础语法
-
TypeScript会忽略程序中的空格、换行符和制表符,通常用它们来缩进代码
-
TypeScript区分大小写
-
和
js
一样分号是可选的,除非两行语句在同一行 -
注释和
Java
相同-
//单行注释 /* 多行注释 */
-
-
面向对象
实例
class Site {
name():void {
console.log("Runoob")
}
}
var obj = new Site();
obj.name();
基础类型
数据类型 | 关键字 | 描述 |
---|---|---|
任意类型 | any | 声明为 any 的变量可以赋予任意类型的值。 |
数字类型 | number | 双精度 64 位浮点值。它可以用来表示整数和分数。let binaryLiteral: number = 0b1010; // 二进制 let octalLiteral: number = 0o744; // 八进制 let decLiteral: number = 6; // 十进制 let hexLiteral: number = 0xf00d; // 十六进制 |
字符串类型 | string | 一个字符系列,使用单引号(')或双引号(")来表示字符串类型。反引号(****)来定义多行文本和内嵌表达式。 let name: string = “Runoob”; let years: number = 5; let words: string = 您好,今年是 ${ name } 发布 ${ years + 1} 周年 ;` |
布尔类型 | boolean | 表示逻辑值:true 和 false。let flag: boolean = true; |
数组类型 | 无 | 声明变量为数组。// 在元素类型后面加上[] let arr: number[] = [1, 2]; // 或者使用数组泛型 let arr: Array<number> = [1, 2]; |
元组 | 无 | 元组类型用来表示已知元素数量和类型的数组,各元素的类型不必相同,对应位置的类型需要相同。let x: [string, number]; x = ['Runoob', 1]; // 运行正常 x = [1, 'Runoob']; // 报错 console.log(x[0]); // 输出 Runoob |
枚举 | enum | 枚举类型用于定义数值集合。enum Color {Red, Green, Blue}; let c: Color = Color.Blue; console.log(c); // 输出 2 |
void | void | 用于标识方法返回值的类型,表示该方法没有返回值。function hello(): void { alert("Hello Runoob"); } |
null | null | 表示对象值缺失。 |
undefined | undefined | 用于初始化变量为一个未定义的值 |
never | never | never 是其它类型(包括 null 和 undefined)的子类型,代表从不会出现的值。 |
Any类型
any类型的变量会随着值动态改变
let x: any = 1; // 数字类型
x = 'I am who I am'; // 字符串类型
x = false; // 布尔类型
let arrayList: any[] = [1, false, 'fine'];
arrayList[1] = 100;
Null和Undefined
null表示“什么都没有”,undefined表示以一个没有设置值的变量
let x: number;
x = 1; // 编译正确
x = undefined; // 编译错误
x = null; // 编译错误
let x: number | null | undefined;
x = 1; // 编译正确
x = undefined; // 编译正确
x = null; // 编译正确
never类型
never类型代表从不会出现的值,在函数中它通常表现为抛出异常或无法执行到终止点(例如无限循环)
let x: never;
let y: number;
// 编译错误,数字类型不能转为 never 类型
x = 123;
// 运行正确,never 类型可以赋值给 never类型
x = (()=>{ throw new Error('exception')})();
// 运行正确,never 类型可以赋值给 数字类型
y = (()=>{ throw new Error('exception')})();
// 返回值为 never 的函数可以是抛出异常的情况
function error(message: string): never {
throw new Error(message);
}
// 返回值为 never 的函数可以是无法被执行到的终止点的情况
function loop(): never {
while (true) {}
}
变量声明
TypeScript变量的命名规则:
- 变量名称可以包含数字和字母
- 除了下划线_和美元$符号外,不能包含其他特殊字符,包括空格
- 变量名不能以数字开头
四种方式声明变量
var uname:string = "Runoob";
var uname:string;
var uname = "Runoob";
var uname;
类型断言
手动指定一个值的类型,允许一个变量从一种类型更改为另一种类型,只是一个判断
var str = '1';
var str2 = str; //str、str2 是 string 类型
console.log(str2);
类型推断
当类型没有给出时,TypeScript编译器会根据类型推断,赋予类型,下次赋值另一种类型则会报错
var num = 2; // 类型推断为 number
console.log("num 变量的值为 "+num);
num = "12"; // 编译错误
console.log(num);
变量作用域
- 全局作用域
- 类作用域
- 局部作用域
不用多说
运算符
感觉也没什么好说的,粘贴一下吧
算数运算符
运算符 | 描述 | 例子 | x 运算结果 | y 运算结果 |
---|---|---|---|---|
+ | 加法 | x=y+2 | 7 | 5 |
- | 减法 | x=y-2 | 3 | 5 |
* | 乘法 | x=y*2 | 10 | 5 |
/ | 除法 | x=y/2 | 2.5 | 5 |
% | 取模(余数) | x=y%2 | 1 | 5 |
++ | 自增 | x=++y | 6 | 6 |
– | 自减 | x=–y | 4 | 4 |
关系运算符
运算符 | 描述 | 比较 | 返回值 |
---|---|---|---|
== | 等于 | x==8 | false |
!= | 不等于 | x!=8 | true |
> | 大于 | x>8 | false |
< | 小于 | x<8 | true |
>= | 大于或等于 | x>=8 | false |
<= | 小于或等于 | x<=8 | true |
逻辑运算符
运算符 | 描述 | 例子 |
---|---|---|
&& | and | (x < 10 && y > 1) 为 true |
|| | or | (x5 || y5) 为 false |
! | not | !(x==y) 为 true |
&&和||为短路运算符,只要前一个值得到结果则不执行后边
位运算符
运算符 | 描述 | 例子 | 类似于 | 结果 | 十进制 |
---|---|---|---|---|---|
& | AND,按位与处理两个长度相同的二进制数,两个相应的二进位都为 1,该位的结果值才为 1,否则为 0。 | x = 5 & 1 | 0101 & 0001 | 0001 | 1 |
| | OR,按位或处理两个长度相同的二进制数,两个相应的二进位中只要有一个为 1,该位的结果值为 1。 | x = 5 | 1 | 0101 | 0001 | 0101 | 5 |
~ | 取反,取反是一元运算符,对一个二进制数的每一位执行逻辑反操作。使数字 1 成为 0,0 成为 1。 | x = ~ 5 | ~0101 | 1010 | -6 |
^ | 异或,按位异或运算,对等长二进制模式按位或二进制数的每一位执行逻辑异按位或操作。操作的结果是如果某位不同则该位为 1,否则该位为 0。 | x = 5 ^ 1 | 0101 ^ 0001 | 0100 | 4 |
<< | 左移,把 << 左边的运算数的各二进位全部左移若干位,由 << 右边的数指定移动的位数,高位丢弃,低位补 0。 | x = 5 << 1 | 0101 << 1 | 1010 | 10 |
>> | 右移,把 >> 左边的运算数的各二进位全部右移若干位,>> 右边的数指定移动的位数。 | x = 5 >> 1 | 0101 >> 1 | 0010 | 2 |
>>> | 无符号右移,与有符号右移位类似,除了左边一律使用0 补位。 | x = 2 >>> 1 | 0010 >>> 1 | 0001 | 1 |
赋值运算符
运算符 | 例子 | 实例 | x 值 |
---|---|---|---|
= (赋值) | x = y | x = y | x = 5 |
+= (先进行加运算后赋值) | x += y | x = x + y | x = 15 |
-= (先进行减运算后赋值) | x -= y | x = x - y | x = 5 |
*= (先进行乘运算后赋值) | x *= y | x = x * y | x = 50 |
/= (先进行除运算后赋值) | x /= y | x = x / y | x = 2 |
三元运算符
Test ? expr1 : expr2
类型运算符
typeof运算符,返回操作数据类型
var num = 12
console.log(typeof num); //输出结果: number
其他运算符
负号运算符(-):改变操作数符号
字符串运算符:连接运算符(+)
流程控制
条件语句
其实TypeScript和Java差不了太多
if(boolean_expression 1) {
# 在布尔表达式 boolean_expression 1 为 true 执行
} else if( boolean_expression 2) {
# 在布尔表达式 boolean_expression 2 为 true 执行
} else if( boolean_expression 3) {
# 在布尔表达式 boolean_expression 3 为 true 执行
} else {
# 布尔表达式的条件都为 false 时执行
}
switch语句
switch(expression){
case constant-expression :
statement(s);
break; /* 可选的 */
case constant-expression :
statement(s);
break; /* 可选的 */
/* 您可以有任意数量的 case 语句 */
default : /* 可选的 */
statement(s);
}
循环
for ( init; condition; increment ){
statement(s);
}
for-in循环
for (var val in list) {
//语句
}
var j:any;
var n:any = "a b c"
for(j in n) {
console.log(n[j])
}
val 需要为 string 或 any 类型。
for-of循环
let someArray = [1, "string", false];
for (let entry of someArray) {
console.log(entry); // 1, "string", false
}
forEach循环
let list = [4, 5, 6];
list.forEach((val, idx, array) => {
// val: 当前值
// idx:当前index
// array: Array
});
every循环
let list = [4, 5, 6];
list.every((val, idx, array) => {
// val: 当前值
// idx:当前index
// array: Array
return true; // Continues
// Return false will quit the iteration
});
while循环
while(condition)
{
statement(s);
}
do…while循环
do
{
statement(s);
}while( condition );
break
循环会立即终止
continue
结束本次循环继续
函数
构造函数,调用函数
function test() { // 函数定义
console.log("调用函数")
}
test() // 调用函数
函数返回
function function_name():return_type {
// 语句
return value;
}
- return_type是返回值类型
- return关键词后要跟着返回的结果
- 一般情况下,一个函数只有一个return语句
- 返回值类型需要和return_type一致
带参函数
function add(x: number, y: number): number {
return x + y;
}
console.log(add(1,2))
可选参数
function buildName(firstName: string, lastName?: string) {
if (lastName)
return firstName + " " + lastName;
else
return firstName;
}
let result1 = buildName("Bob"); // 正确
let result2 = buildName("Bob", "Adams", "Sr."); // 错误,参数太多了
let result3 = buildName("Bob", "Adams"); // 正确
默认参数
function calculate_discount(price:number,rate:number = 0.50) {
var discount = price * rate;
console.log("计算结果: ",discount);
}
calculate_discount(1000)
calculate_discount(1000,0.30)
剩余参数
function buildName(firstName: string, ...restOfName: string[]) {
return firstName + " " + restOfName.join(" ");
}
let employeeName = buildName("Joseph", "Samuel", "Lucas", "MacKinzie");
匿名函数
var msg = function() {
return "hello world";
}
console.log(msg())
函数自调用
在自调用函数后使用()即可。
(function () {
var x = "Hello!!";
console.log(x)
})()
构造函数,支持内置构造函数Function()来定义函数
var myFunction = new Function("a", "b", "return a * b");
var x = myFunction(4, 3);
console.log(x);
递归函数
function factorial(number) {
if (number <= 0) { // 停止执行
return 1;
} else {
return (number * factorial(number - 1)); // 调用自身
}
};
console.log(factorial(6)); // 输出 720
Lambda函数
Lambda函数也称为箭头函数。
var foo = (x:number)=>10 + x
console.log(foo(100)) //输出结果为 110
var foo = (x:number)=> {
x = 10 + x
console.log(x)
}
foo(100)
//单个参数括号可选
var display = x => {
console.log("输出为 "+x)
}
display(12)
函数重载
function disp(s1:string):void;
function disp(n1:number,s1:string):void;
function disp(x:any,y?:any):void {
console.log(x);
console.log(y);
}
disp("abc")
disp(1,"xyz");
Number
序号 | 属性 & 描述 |
---|---|
1. | MAX_VALUE可表示的最大的数,MAX_VALUE 属性值接近于 1.79E+308。大于 MAX_VALUE 的值代表 “Infinity”。 |
2. | MIN_VALUE可表示的最小的数,即最接近 0 的正数 (实际上不会变成 0)。最大的负数是 -MIN_VALUE,MIN_VALUE 的值约为 5e-324。小于 MIN_VALUE (“underflow values”) 的值将会转换为 0。 |
3. | NaN非数字值(Not-A-Number)。 |
4. | NEGATIVE_INFINITY负无穷大,溢出时返回该值。该值小于 MIN_VALUE。 |
5. | POSITIVE_INFINITY正无穷大,溢出时返回该值。该值大于 MAX_VALUE。 |
6. | prototypeNumber 对象的静态属性。使您有能力向对象添加属性和方法。 |
7. | constructor返回对创建此对象的 Number 函数的引用。 |
NaN实例
var month = 0
if( month<=0 || month >12) {
month = Number.NaN
console.log("月份是:"+ month)
} else {
console.log("输入月份数值正确。")
}
prototype实例
function employee(id:number,name:string) {
this.id = id
this.name = name
}
var emp = new employee(123,"admin")
employee.prototype.email = "admin@runoob.com"
console.log("员工号: "+emp.id)
console.log("员工姓名: "+emp.name)
console.log("员工邮箱: "+emp.email)
序号 | 方法 & 描述 | 实例 |
---|---|---|
1. | toExponential()把对象的值转换为指数计数法。 | //toExponential() var num1 = 1225.30 var val = num1.toExponential(); console.log(val) // 输出: 1.2253e+3 |
2. | toFixed()把数字转换为字符串,并对小数点指定位数。 | var num3 = 177.234 console.log("num3.toFixed() 为 "+num3.toFixed()) // 输出:177 console.log("num3.toFixed(2) 为 "+num3.toFixed(2)) // 输出:177.23 console.log("num3.toFixed(6) 为 "+num3.toFixed(6)) // 输出:177.234000 |
3. | toLocaleString()把数字转换为字符串,使用本地数字格式顺序。 | var num = new Number(177.1234); console.log( num.toLocaleString()); // 输出:177.1234 |
4. | toPrecision()把数字格式化为指定的长度。 | var num = new Number(7.123456); console.log(num.toPrecision()); // 输出:7.123456 console.log(num.toPrecision(1)); // 输出:7 console.log(num.toPrecision(2)); // 输出:7.1 |
5. | toString()把数字转换为字符串,使用指定的基数。数字的基数是 2 ~ 36 之间的整数。若省略该参数,则使用基数 10。 | var num = new Number(10); console.log(num.toString()); // 输出10进制:10 console.log(num.toString(2)); // 输出2进制:1010 console.log(num.toString(8)); // 输出8进制:12 |
6. | valueOf()返回一个 Number 对象的原始数字值。 | var num = new Number(10); console.log(num.valueOf()); // 输出:10 |
String
var txt = "string";
String的对象属性
序号 | 属性 & 描述 | 实例 |
---|---|---|
1. | constructor对创建该对象的函数的引用。 | var str = new String( "This is string" ); console.log("str.constructor is:" + str.constructor) 输出结果:str.constructor is:function String() { [native code] } |
2. | length返回字符串的长度。 | var uname = new String("Hello World") console.log("Length "+uname.length) // 输出 11 |
3. | prototype允许您向对象添加属性和方法。 | function employee(id:number,name:string) { this.id = id this.name = name } var emp = new employee(123,"admin") employee.prototype.email="admin@runoob.com" // 添加属性 email console.log("员工号: "+emp.id) console.log("员工姓名: "+emp.name) console.log("员工邮箱: "+emp.email) |
String方法
序号 | 方法 & 描述 | 实例 |
---|---|---|
1. | charAt()返回在指定位置的字符。 | var str = new String("RUNOOB"); console.log("str.charAt(0) 为:" + str.charAt(0)); // R console.log("str.charAt(1) 为:" + str.charAt(1)); // U console.log("str.charAt(2) 为:" + str.charAt(2)); // N console.log("str.charAt(3) 为:" + str.charAt(3)); // O console.log("str.charAt(4) 为:" + str.charAt(4)); // O console.log("str.charAt(5) 为:" + str.charAt(5)); // B |
2. | charCodeAt()返回在指定的位置的字符的 Unicode 编码。 | var str = new String("RUNOOB"); console.log("str.charCodeAt(0) 为:" + str.charCodeAt(0)); // 82 console.log("str.charCodeAt(1) 为:" + str.charCodeAt(1)); // 85 console.log("str.charCodeAt(2) 为:" + str.charCodeAt(2)); // 78 console.log("str.charCodeAt(3) 为:" + str.charCodeAt(3)); // 79 console.log("str.charCodeAt(4) 为:" + str.charCodeAt(4)); // 79 console.log("str.charCodeAt(5) 为:" + str.charCodeAt(5)); // 66 |
3. | concat()连接两个或更多字符串,并返回新的字符串。 | var str1 = new String( "RUNOOB" ); var str2 = new String( "GOOGLE" ); var str3 = str1.concat( str2 ); console.log("str1 + str2 : "+str3) // RUNOOBGOOGLE |
4. | indexOf()返回某个指定的字符串值在字符串中首次出现的位置。 | var str1 = new String( "RUNOOB" ); var index = str1.indexOf( "OO" ); console.log("查找的字符串位置 :" + index ); // 3 |
5. | lastIndexOf()从后向前搜索字符串,并从起始位置(0)开始计算返回字符串最后出现的位置。 | var str1 = new String( "This is string one and again string" ); var index = str1.lastIndexOf( "string" ); console.log("lastIndexOf 查找到的最后字符串位置 :" + index ); // 29 index = str1.lastIndexOf( "one" ); console.log("lastIndexOf 查找到的最后字符串位置 :" + index ); // 15 |
6. | localeCompare()用本地特定的顺序来比较两个字符串。 | var str1 = new String( "This is beautiful string" ); var index = str1.localeCompare( "This is beautiful string"); console.log("localeCompare first :" + index ); // 0 |
7. | **match()**查找找到一个或多个正则表达式的匹配。 | var str="The rain in SPAIN stays mainly in the plain"; var n=str.match(/ain/g); // ain,ain,ain |
8. | replace()替换与正则表达式匹配的子串 | var re = /(\w+)\s(\w+)/; var str = "zara ali"; var newstr = str.replace(re, "$2, $1"); console.log(newstr); // ali, zara |
9. | search()检索与正则表达式相匹配的值 | var re = /apples/gi; var str = "Apples are round, and apples are juicy."; if (str.search(re) == -1 ) { console.log("Does not contain Apples" ); } else { console.log("Contains Apples" ); } |
10. | slice()提取字符串的片断,并在新的字符串中返回被提取的部分。 | |
11. | split()把字符串分割为子字符串数组。 | var str = "Apples are round, and apples are juicy."; var splitted = str.split(" ", 3); console.log(splitted) // [ 'Apples', 'are', 'round,' ] |
12. | substr()从起始索引号提取字符串中指定数目的字符。 | |
13. | substring()提取字符串中两个指定的索引号之间的字符。 | var str = "RUNOOB GOOGLE TAOBAO FACEBOOK"; console.log("(1,2): " + str.substring(1,2)); // U console.log("(0,10): " + str.substring(0, 10)); // RUNOOB GOO console.log("(5): " + str.substring(5)); // B GOOGLE TAOBAO FACEBOOK |
14. | toLocaleLowerCase()根据主机的语言环境把字符串转换为小写,只有几种语言(如土耳其语)具有地方特有的大小写映射。 | var str = "Runoob Google"; console.log(str.toLocaleLowerCase( )); // runoob google |
15. | toLocaleUpperCase()据主机的语言环境把字符串转换为大写,只有几种语言(如土耳其语)具有地方特有的大小写映射。 | var str = "Runoob Google"; console.log(str.toLocaleUpperCase( )); // RUNOOB GOOGLE |
16. | toLowerCase()把字符串转换为小写。 | var str = "Runoob Google"; console.log(str.toLowerCase( )); // runoob google |
17. | toString()返回字符串。 | var str = "Runoob"; console.log(str.toString( )); // Runoob |
18. | toUpperCase()把字符串转换为大写。 | var str = "Runoob Google"; console.log(str.toUpperCase( )); // RUNOOB GOOGLE |
19. | valueOf()返回指定字符串对象的原始值。 | var str = new String("Runoob"); console.log(str.valueOf( )); // Runoob |
Array
var numlist:number[] = [2,4,6,8]
Array对象的构造函数:
- 表示数组大小的数值
- 初始化的数组列表,元素使用逗号分隔值
var arr_names:number[] = new Array(4)
var sites:string[] = new Array("Google","Runoob","Taobao","Facebook")
for(var i = 0;i<sites.length;i++) {
console.log(sites[i])
}
for(var i = 0; i<arr_names.length; i++) {
arr_names[i] = i * 2
console.log(arr_names[i])
}
数组解构
var arr:number[] = [12,13]
var[x,y] = arr // 将数组的两个元素赋值给变量 x 和 y
console.log(x)
console.log(y)
数组迭代
var j:any;
var nums:number[] = [1001,1002,1003,1004]
for(j in nums) {
console.log(nums[j])
}
多维数组
var multi:number[][] = [[1,2,3],[23,24,25]]
console.log(multi[0][0])
console.log(multi[0][1])
console.log(multi[0][2])
console.log(multi[1][0])
console.log(multi[1][1])
console.log(multi[1][2])
方法
序号 | 方法 & 描述 | 实例 |
---|---|---|
1. | concat()连接两个或更多的数组,并返回结果。 | var alpha = ["a", "b", "c"]; var numeric = [1, 2, 3]; var alphaNumeric = alpha.concat(numeric); console.log("alphaNumeric : " + alphaNumeric ); // a,b,c,1,2,3 |
2. | every()检测数值元素的每个元素是否都符合条件。 | function isBigEnough(element, index, array) { return (element >= 10); } var passed = [12, 5, 8, 130, 44].every(isBigEnough); console.log("Test Value : " + passed ); // false |
3. | filter()检测数值元素,并返回符合条件所有元素的数组。 | function isBigEnough(element, index, array) { return (element >= 10); } var passed = [12, 5, 8, 130, 44].filter(isBigEnough); console.log("Test Value : " + passed ); // 12,130,44 |
4. | forEach()数组每个元素都执行一次回调函数。 | let num = [7, 8, 9]; num.forEach(function (value) { console.log(value); }); 编译成 JavaScript 代码:var num = [7, 8, 9]; num.forEach(function (value) { console.log(value); // 7 8 9 }); |
5. | indexOf()搜索数组中的元素,并返回它所在的位置。如果搜索不到,返回值 -1,代表没有此项。 | var index = [12, 5, 8, 130, 44].indexOf(8); console.log("index is : " + index ); // 2 |
6. | join()把数组的所有元素放入一个字符串。 | var arr = new Array("Google","Runoob","Taobao"); var str = arr.join(); console.log("str : " + str ); // Google,Runoob,Taobao var str = arr.join(", "); console.log("str : " + str ); // Google, Runoob, Taobao var str = arr.join(" + "); console.log("str : " + str ); // Google + Runoob + Taobao |
7. | lastIndexOf()返回一个指定的字符串值最后出现的位置,在一个字符串中的指定位置从后向前搜索。 | var index = [12, 5, 8, 130, 44].lastIndexOf(8); console.log("index is : " + index ); // 2 |
8. | map()通过指定函数处理数组的每个元素,并返回处理后的数组。 | var numbers = [1, 4, 9]; var roots = numbers.map(Math.sqrt); console.log("roots is : " + roots ); // 1,2,3 |
9. | pop()删除数组的最后一个元素并返回删除的元素。 | var numbers = [1, 4, 9]; var element = numbers.pop(); console.log("element is : " + element ); // 9 var element = numbers.pop(); console.log("element is : " + element ); // 4 |
10. | push()向数组的末尾添加一个或更多元素,并返回新的长度。 | var numbers = new Array(1, 4, 9); var length = numbers.push(10); console.log("new numbers is : " + numbers ); // 1,4,9,10 length = numbers.push(20); console.log("new numbers is : " + numbers ); // 1,4,9,10,20 |
11. | reduce()将数组元素计算为一个值(从左到右)。 | var total = [0, 1, 2, 3].reduce(function(a, b){ return a + b; }); console.log("total is : " + total ); // 6 |
12. | reduceRight()将数组元素计算为一个值(从右到左)。 | var total = [0, 1, 2, 3].reduceRight(function(a, b){ return a + b; }); console.log("total is : " + total ); // 6 |
13. | reverse()反转数组的元素顺序。 | var arr = [0, 1, 2, 3].reverse(); console.log("Reversed array is : " + arr ); // 3,2,1,0 |
14. | shift()删除并返回数组的第一个元素。 | var arr = [10, 1, 2, 3].shift(); console.log("Shifted value is : " + arr ); // 10 |
15. | slice()选取数组的的一部分,并返回一个新数组。 | var arr = ["orange", "mango", "banana", "sugar", "tea"]; console.log("arr.slice( 1, 2) : " + arr.slice( 1, 2) ); // mango console.log("arr.slice( 1, 3) : " + arr.slice( 1, 3) ); // mango,banana |
16. | some()检测数组元素中是否有元素符合指定条件。 | function isBigEnough(element, index, array) { return (element >= 10); } var retval = [2, 5, 8, 1, 4].some(isBigEnough); console.log("Returned value is : " + retval ); // false var retval = [12, 5, 8, 1, 4].some(isBigEnough); console.log("Returned value is : " + retval ); // true |
17. | sort()对数组的元素进行排序。 | var arr = new Array("orange", "mango", "banana", "sugar"); var sorted = arr.sort(); console.log("Returned string is : " + sorted ); // banana,mango,orange,sugar |
18. | splice()从数组中添加或删除元素。 | var arr = ["orange", "mango", "banana", "sugar", "tea"]; var removed = arr.splice(2, 0, "water"); console.log("After adding 1: " + arr ); // orange,mango,water,banana,sugar,tea console.log("removed is: " + removed); removed = arr.splice(3, 1); console.log("After removing 1: " + arr ); // orange,mango,water,sugar,tea console.log("removed is: " + removed); // banana |
19. | toString()把数组转换为字符串,并返回结果。 | var arr = new Array("orange", "mango", "banana", "sugar"); var str = arr.toString(); console.log("Returned string is : " + str ); // orange,mango,banana,sugar |
20. | unshift()向数组的开头添加一个或更多元素,并返回新的长度。 | var arr = new Array("orange", "mango", "banana", "sugar"); var length = arr.unshift("water"); console.log("Returned array is : " + arr ); // water,orange,mango,banana,sugar console.log("Length of the array is : " + length ); // 5 |
Map对象
创建对象
let myMap = new Map();
let myMap = new Map([
["key1", "value1"],
["key2", "value2"]
]);
- map.clear() – 移除 Map 对象的所有键/值对 。
- map.set() – 设置键值对,返回该 Map 对象。
- map.get() – 返回键对应的值,如果不存在,则返回 undefined。
- map.has() – 返回一个布尔值,用于判断 Map 中是否包含键对应的值。
- map.delete() – 删除 Map 中的元素,删除成功返回 true,失败返回 false。
- map.size – 返回 Map 对象键/值对的数量。
- map.keys() - 返回一个 Iterator 对象, 包含了 Map 对象中每个元素的键 。
- map.values() – 返回一个新的Iterator对象,包含了Map对象中每个元素的值 。
let nameSiteMapping = new Map();
// 设置 Map 对象
nameSiteMapping.set("Google", 1);
nameSiteMapping.set("Runoob", 2);
nameSiteMapping.set("Taobao", 3);
// 获取键对应的值
console.log(nameSiteMapping.get("Runoob")); // 2
// 判断 Map 中是否包含键对应的值
console.log(nameSiteMapping.has("Taobao")); // true
console.log(nameSiteMapping.has("Zhihu")); // false
// 返回 Map 对象键/值对的数量
console.log(nameSiteMapping.size); // 3
// 删除 Runoob
console.log(nameSiteMapping.delete("Runoob")); // true
console.log(nameSiteMapping);
// 移除 Map 对象的所有键/值对
nameSiteMapping.clear(); // 清除 Map
console.log(nameSiteMapping);
迭代Map
let nameSiteMapping = new Map();
nameSiteMapping.set("Google", 1);
nameSiteMapping.set("Runoob", 2);
nameSiteMapping.set("Taobao", 3);
// 迭代 Map 中的 key
for (let key of nameSiteMapping.keys()) {
console.log(key);
}
// 迭代 Map 中的 value
for (let value of nameSiteMapping.values()) {
console.log(value);
}
// 迭代 Map 中的 key => value
for (let entry of nameSiteMapping.entries()) {
console.log(entry[0], entry[1]);
}
// 使用对象解析
for (let [key, value] of nameSiteMapping) {
console.log(key, value);
}
元组
var mytuple = [10,"Runoob"]; // 创建元组
console.log(mytuple[0])
console.log(mytuple[1])
- push()向元组添加元素,添加在最后面
- pop()从元组中移除元素(最后一个),返回移除元素
var mytuple = [10,"Hello","World","typeScript"];
console.log("添加前元素个数:"+mytuple.length) // 返回元组的大小
mytuple.push(12) // 添加到元组中
console.log("添加后元素个数:"+mytuple.length)
console.log("删除前元素个数:"+mytuple.length)
console.log(mytuple.pop()+" 元素从元组中删除") // 删除并返回删除的元素
console.log("删除后元素个数:"+mytuple.length)
更新元组
元组是可变的
var mytuple = [10, "Runoob", "Taobao", "Google"]; // 创建一个元组
console.log("元组的第一个元素为:" + mytuple[0])
// 更新元组元素
mytuple[0] = 121
console.log("元组中的第一个元素更新为:"+ mytuple[0])
元组解构
var mytuple = [10, "Runoob", "Taobao", "Google"]; // 创建一个元组
console.log("元组的第一个元素为:" + mytuple[0])
// 更新元组元素
mytuple[0] = 121
console.log("元组中的第一个元素更新为:"+ mytuple[0])
联合类型
通过管道(|)将变量设置多种类型,赋值根据设置的类型进行赋值
var val:string|number
val = 12
console.log("数字为 "+ val)
val = "Runoob"
console.log("字符串为 " + val)
也可以将联合类型作为函数参数使用
联合类型数组
var arr:number[]|string[];
var i:number;
arr = [1,2,4]
console.log("**数字数组**")
for(i = 0;i<arr.length;i++) {
console.log(arr[i])
}
arr = ["Runoob","Google","Taobao"]
console.log("**字符串数组**")
for(i = 0;i<arr.length;i++) {
console.log(arr[i])
}
面向对象
TypeScript接口
interface IPerson {
firstName:string,
lastName:string,
sayHi: ()=>string
}
var customer:IPerson = {
firstName:"Tom",
lastName:"Hanks",
sayHi: ():string =>{return "Hi there"}
}
console.log("Customer 对象 ")
console.log(customer.firstName)
console.log(customer.lastName)
console.log(customer.sayHi())
var employee:IPerson = {
firstName:"Jim",
lastName:"Blakes",
sayHi: ():string =>{return "Hello!!!"}
}
console.log("Employee 对象 ")
console.log(employee.firstName)
console.log(employee.lastName)
需要注意接口不能转换为 JavaScript。 它只是 TypeScript 的一部分。
联合类型和接口
interface RunOptions {
program:string;
commandline:string[]|string|(()=>string);
}
// commandline 是字符串
var options:RunOptions = {program:"test1",commandline:"Hello"};
console.log(options.commandline)
// commandline 是字符串数组
options = {program:"test1",commandline:["Hello","World"]};
console.log(options.commandline[0]);
console.log(options.commandline[1]);
// commandline 是一个函数表达式
options = {program:"test1",commandline:()=>{return "**Hello World**";}};
var fn:any = options.commandline;
console.log(fn());
输出结果为:
Hello
Hello
World
**Hello World**
接口和数组
interface namelist {
[index:number]:string
}
// 类型一致,正确
var list2:namelist = ["Google","Runoob","Taobao"]
// 错误元素 1 不是 string 类型
// var list2:namelist = ["Runoob",1,"Taobao"]
接口继承
单继承
interface Person {
age:number
}
interface Musician extends Person {
instrument:string
}
var drummer = <Musician>{};
drummer.age = 27
drummer.instrument = "Drums"
console.log("年龄: "+drummer.age)
console.log("喜欢的乐器: "+drummer.instrument)
多继承,用逗号分隔
interface IParent1 {
v1:number
}
interface IParent2 {
v2:number
}
interface Child extends IParent1, IParent2 { }
var Iobj:Child = { v1:12, v2:23}
console.log("value 1: "+Iobj.v1+" value 2: "+Iobj.v2)
类
创建类成员
class Car {
// 字段
engine:string;
// 构造函数
constructor(engine:string) {
this.engine = engine
}
// 方法
disp():void {
console.log("发动机为 : "+this.engine)
}
}
var obj = new Car("Engine 1")
类的继承
class Shape {
Area:number
constructor(a:number) {
this.Area = a
}
}
class Circle extends Shape {
disp():void {
console.log("圆的面积: "+this.Area)
}
}
var obj = new Circle(223);
obj.disp()
也可以进行方法重写
static关键字
static 关键字用于定义类的数据成员(属性和方法)为静态的,静态成员可以直接通过类名调用。
class StaticMem {
static num:number;
static disp():void {
console.log("num 值为 "+ StaticMem.num)
}
}
StaticMem.num = 12 // 初始化静态变量
StaticMem.disp() // 调用静态方法
instanceof运算符
class Person{ }
var obj = new Person()
var isPerson = obj instanceof Person;
console.log("obj 对象是 Person 类实例化来的吗? " + isPerson);
访问控制修饰符
- public(默认):共有,可以在任何地方被访问
- protected:可以被自身及其子类访问
- private:私有,智能被其定义所在的类访问
类实现接口
interface ILoan {
interest:number
}
class AgriLoan implements ILoan {
interest:number
rebate:number
constructor(interest:number,rebate:number) {
this.interest = interest
this.rebate = rebate
}
}
var obj = new AgriLoan(10,1)
console.log("利润为 : "+obj.interest+",抽成为 : "+obj.rebate )
对象
对象可以是包含一组键值对的实例
var object_name = {
key1: "value1", // 标量
key2: "value",
key3: function() {
// 函数
},
key4:["content1", "content2"] //集合
}
# 在对象中添加方法
object_name.sayHello = function(){ return "hello";}
将对象作为参数传递函数
var sites = {
site1:"Runoob",
site2:"Google",
};
var invokesites = function(obj: { site1:string, site2 :string }) {
console.log("site1 :"+obj.site1)
console.log("site2 :"+obj.site2)
}
invokesites(sites)
鸭子类型
在使用鸭子类型的语言中,这样的一个函数可以接受一个任意类型的对象,并调用它的"走"和"叫"方法。如果这些需要被调用的方法不存在,那么将引发一个运行时错误。任何拥有这样的正确的"走"和"叫"方法的对象都可被函数接受的这种行为引出了以上表述,这种决定类型的方式因此得名。
interface IPoint {
x:number
y:number
}
function addPoints(p1:IPoint,p2:IPoint):IPoint {
var x = p1.x + p2.x
var y = p1.y + p2.y
return {x:x,y:y}
}
// 正确
var newPoint = addPoints({x:3,y:4},{x:5,y:1})
// 错误
var newPoint2 = addPoints({x:1},{x:4,y:3})