淘先锋技术网

首页 1 2 3 4 5 6 7

Map 对象

创建Map对象及初始化

TypeScript 使用 Map 类型和 new 关键字来创建 Map:

初始化 Map,可以以数组的格式来传入键值对:

let myMap = new Map([
   ["key1", "value1"],
   ["key2", "value2"]
]); 

Map 相关的函数与属性

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对象中每个元素的值 。

上案例

// 创建 Map
let myMap = new Map();
// 设置 Map 对象
myMap.set('name','张三')
myMap.set('age',22)
myMap.set('sex','男')
console.log(myMap.get('name')) // 张三
console.log(myMap.has('sex')) // true
console.log(myMap.delete('age')) // true
console.log(myMap.size) // 2
console.log(myMap.keys()) // {"name", "sex"}
console.log(myMap.values()) // {"张三", "男"}
// 迭代 Map 中的 key
for (let key of myMap.keys()) {
    console.log(key);   // name   sex               
}
// 迭代 Map 中的 value
for (let value of myMap.values()) {
    console.log(value);    // 张三  男             
}
// 迭代 Map 中的 key => value  entries()方法ie11之前不可用
for (let entry of nameSiteMapping.entries()) {
    console.log(entry[0], entry[1]);   // name 张三    sex 男
}
myMap.clear(); //清除 Map
console.log(myMap); // Map {}

联合类型

联合类型(Union Types)可以通过管道(|)将变量设置多种类型,赋值时可以根据设置的类型来赋值。
只能赋值指定的类型,如果赋值其它类型就会报错。

格式: Type1|Type2|Type3 

声明式 联合类型

var data:string|number 
data = 12 
console.log("数字为 "+ data)  // 12
data = "Runoob" 
console.log("字符串为 " + data) // Runoob

函数参数使用 联合类型

function myFun(name:string|string[]) { 
   if(typeof name == "string") { 
      console.log(name) 
   } else { 
      var i; 
      for(i = 0;i<name.length;i++) { 
      console.log(name[i])
      } 
   } 
} 
myFun("Runoob") 
console.log("输出数组....") 
myFun(["Runoob","Google","Taobao","Facebook"])

联合类型数组

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]) 
}

接口

接口定义如下:

interface 自定义接口名字 { 
}

示例

我们定义了一个接口 IPerson,接着定义了一个变量 customer,它的类型是 IPerson。customer 实现了接口 IPerson 的属性和方法。

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)  // Tom
console.log(customer.lastName)    // Hanks
console.log(customer.sayHi())     // Hi there

联合类型和接口

interface myOptions { 
    program:string; 
    commandline:string[]|string|(()=>string); // 字符串型数组 | 字符串 | 函数表达式
} 
 
// commandline 是字符串
var options:myOptions  = {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());

接口和数组

接口中我们可以将数组的索引值和元素设置为不同类型,索引值可以是数字或字符串。

interface namelist { 
   [index:number]:string 
} 
 
var list2:namelist = ["John",1,"Bran"] // 错误元素 1 不是 string 类型
interface ages { 
   [index:string]:number 
} 
 
var agelist:ages; 
agelist["John"] = 15   // 正确 
agelist[2] = "nine"   // 错误

接口继承

接口继承就是说接口可以通过其他接口来扩展自己。
Typescript 允许接口继承多个接口。
继承使用关键字 extends
语法格式:

单个继承:子接口 extends 父接口
多个继承:子接口 extends 父接口1,父接口2,父接口3,......,父接口n
单个继承
interface Person { 
   age:number 
} 
 
interface Musician extends Person { 
   instrument:string 
} 
 
var drummer = <Musician>{};   // 等价于 var drummer = {};
drummer.age = 27 
drummer.instrument = "Drums" 
console.log("年龄:  "+drummer.age)  // 年龄:  27
console.log("喜欢的乐器:  "+drummer.instrument)   // 喜欢的乐器:  Drums

多个继承
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)  // value 1: 12 value 2: 23