TypeScript 容器类型

TypeScript 简易教程
一、TypeScript前导
二、TypeScript基础语法
三、TypeScript变量
四、TypeScript Number+String类型
五、TypeScript运算符
六、TypeScript语句
七、TypeScript函数
八、TypeScript 容器类型
九、TypeScript 接口、类、对象
十、TypeScript 命名空间、模块、声明文件
十一、Promise：JavaScript 异步编程的基石
十二、TypeScript：Async Functions

一、Array(数组)

1. 声明和初始化

数组声明：

var array_name[:datatype];        //声明

数组初始化：

array_name = [val1,val2,valn..]   //初始化

示例：

var numlist:number[] = [2,4,6,8]

2. Array对象

使用 Array 对象创建数组，接受以下两种值：

  • 数组大小。
  • 初始化的数组列表，元素使用逗号分隔值。

直接new：

var arr_names:number[] = new Array(4)  
 
for(var i = 0; i<arr_names.length; i++) { 
    arr_names[i] = i * 2 
    console.log(arr_names[i]) 
}

带初始化的数组列表的new：

var sites:string[] = new Array("one", "two", "three", "four") 
 
for(var i = 0;i<sites.length;i++) { 
     console.log(sites[i]) 
}

3. 数组解构

通过数组的形式把数组元素赋值给变量：

var arr:number[] = [12,13] 
var[x,y] = arr // 将数组的两个元素赋值给变量 x 和 y
console.log(x) 
console.log(y)

4. 数组迭代

使用for语句迭代：

var j:any; 
var nums:number[] = [1001,1002,1003,1004] 
 
for(j in nums) { 
    console.log(nums[j]) 
}

5. 多维数组

数组的数组...

var arr_name:datatype[][]=[ [val1,val2,val3],[v1,v2,v3] ]

示例：

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

6. 数组与函数

数组作为参数：

var sites:string[] = new Array("one", "two", "three", "four") 
 
function disp(arr_sites:string[]) {
    for(var i = 0;i<arr_sites.length;i++) { 
        console.log(arr_sites[i]) 
    }  
}  
disp(sites);

数组作为返回值：

function disp():string[] { 
    return new Array("one", "two", "three", "four");
} 
 
var sites:string[] = disp() 
for(var i in sites) { 
        console.log(sites[i]) 
}

7. 数组方法

方法 描述 示例
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
every() 检测数值元素的每个元素是否都符合条件。 

function isBigEnough(element, index, array) { 
        return (element >= 10); 
} 
var passed = [12, 5, 8, 130, 44].every(isBigEnough); 
console.log("Test Value : " + passed ); // false
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
forEach() 数组每个元素都执行一次回调函数。 

let num = [7, 8, 9];
num.forEach(function (value) {
    console.log(value);
});
indexOf() 搜索数组中的元素，并返回它所在的位置。 如果搜索不到，返回值 -1，代表没有此项。 

var index = [12, 5, 8, 130, 44].indexOf(8); 
console.log("index is : " + index );  // 2
join() 把数组的所有元素放入一个字符串。 

var arr = new Array("one", "two", "three"); 
          
var str = arr.join(); 
console.log("str : " + str );  // one,two,three
          
var str = arr.join(", "); 
console.log("str : " + str );  // one, two, three
          
var str = arr.join(" + "); 
console.log("str : " + str );  // one + two + three
lastIndexOf() 返回一个指定的字符串值最后出现的位置，在一个字符串中的指定位置从后向前搜索。 

var index = [12, 5, 8, 130, 44].lastIndexOf(8); 
console.log("index is : " + index );  // 2
map() 通过指定函数处理数组的每个元素，并返回处理后的数组。 

var numbers = [1, 4, 9]; 
var roots = numbers.map(Math.sqrt); 
console.log("roots is : " + roots );  // 1,2,3
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
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
reduce() 将数组元素计算为一个值（从左到右）。 

var total = [0, 1, 2, 3].reduce(function(a, b){ return a + b; }); 
console.log("total is : " + total );  // 6
reduceRight() 将数组元素计算为一个值（从右到左）。 

var total = [0, 1, 2, 3].reduceRight(function(a, b){ return a + b; }); 
console.log("total is : " + total );  // 6
reverse() 反转数组的元素顺序。 

var arr = [0, 1, 2, 3].reverse(); 
console.log("Reversed array is : " + arr );  // 3,2,1,0
shift() 删除并返回数组的第一个元素。 

var arr = [10, 1, 2, 3].shift(); 
console.log("Shifted value is : " + arr );  // 10
shift() 删除并返回数组的第一个元素。 

var arr = [10, 1, 2, 3].shift(); 
console.log("Shifted value is : " + arr );  // 10
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
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
sort() 对数组的元素进行排序。 

var arr = new Array("orange", "mango", "banana", "sugar"); 
var sorted = arr.sort(); 
console.log("Returned string is : " + sorted );  // banana,mango,orange,sugar
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
toString() 把数组转换为字符串，并返回结果。 

var arr = new Array("orange", "mango", "banana", "sugar");         
var str = arr.toString(); 
console.log("Returned string is : " + str );  // orange,mango,banana,sugar
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

  • Map 对象保存键值对，并且能够记住键的原始插入顺序。
  • 任何值(对象或者原始值) 都可以作为一个键或一个值。

1. 编译

Map 是 ES6 中引入的一种新的数据结构，所以编译时需要指定ES6版本。

tsc --target es6 test.ts

2. 初始化

使用 new 关键字来创建 Map：

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

3. 方法

方法描述
clear()移除 Map 对象的所有键/值对 。
set()设置键值对，返回该 Map 对象。
get()返回键对应的值，如果不存在，则返回 undefined。
has()返回一个布尔值，用于判断 Map 中是否包含键对应的值。
size返回 Map 对象键/值对的数量。
keys()返回一个 Iterator 对象， 包含了 Map 对象中每个元素的键 。
values()返回一个新的Iterator对象，包含了Map对象中每个元素的值 。

4. 迭代

创建初始化Map：

let map = new Map([
    ["key1", "value1"],
    ["key2", "value2"],
    ["key3", "value3"]
]);

迭代Map中的key:

for (let key of map.keys()) {
    console.log(key);                  
}

迭代Map中的value:

for (let value of map.values()) {
    console.log(value);                 
}

迭代Map中的元素：

for (let entry of map.entries()) {
    console.log(entry[0], entry[1]);   
}

使用对象结构：

for (let [key, value] of map) {
    console.log(key, value);            
}

三、元祖

  • 数组中元素的数据类型都一般是相同的。
  • 存储的元素数据类型不同，需要使用元组

1. 初始化

var tuple_name = [value1,value2,value3,…value n]

示例：

var tuple = [10, "Tuple"];

可以声明一个空元组，然后再初始化：

var tuple = []; 
tuple[0] = 120 
tuple[1] = 234

2. 访问

元组中元素使用索引来访问，第一个元素的索引值为 0，第二个为 1，以此类推第 n 个为 n-1，语法格式如下:

tuple_name[index]

3. 更新元组

tuple_name[index = value

4. 增加或者移除元素

方法描述
push()向元组添加元素，添加在最后面。
pop()从元组中移除元素（最后一个），并返回移除的元素。

5. 结构

var a =[10,"Name"];
var [b,c] = a;
console.log( b );  // 10    
console.log( c );  // Name

三、联合类型

联合类型（Union Types）可以通过(|)将变量设置多种类型，赋值时可以根据设置的类型来赋值。

1. 声明和初始化

Type1|Type2|Type3

示例：

var val:string|number 
val = 12 
console.log("数字为 "+ val) 
val = "Hello World!" 
console.log("字符串为 " + val)

输出：

数字为 12
字符串为 Hello World!

2. 作为函数参数

示例：

function disp(name:string|string[]) { 
    if(typeof name == "string") { 
            console.log(name) 
    } else { 
        var i; 
        for(i = 0;i<name.length;i++) { 
            console.log(name[i])
        } 
    } 
} 

disp("One") 
console.log("输出数组....") 
disp(["One","Two","Three","Four"])

3. 联合类型数组

示例：

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 = ["One","Two","Four"] 
console.log("**字符串数组**")  
 
for(i = 0;i<arr.length;i++) { 
   console.log(arr[i]) 
}
分类： 前端扫盲 标签： TypeScriptJavaScriptarray
版权申明

本文系作者 @何健源 原创发布在思维代码站点。未经许可，禁止转载。

评论

表情
暂无评论数据

暂无评论数据

相关推荐

TypeScript：Async Functions

何健源 1368 0 3
TypeScript Promise Async

Promise：JavaScript 异步编程的基石

何健源 958 0 0
TypeScript 异步 Promise

TypeScript 命名空间、模块、声明文件

何健源 950 0 0
TypeScript JavaScript

TypeScript 接口、类、对象

何健源 959 0 0
TypeScript JavaScript Class

TypeScript函数

何健源 914 0 1
TypeScript JavaScript

TypeScript语句

何健源 884 0 0
TypeScript JavaScript

TypeScript运算符

何健源 620 0 0
TypeScript JavaScript

TypeScript Number+String类型

何健源 624 0 0
TypeScript JavaScript

TypeScript变量

何健源 588 0 0
TypeScript JavaScript

TypeScript基础语法

何健源 653 0 0
TypeScript JavaScript
获得点赞 0
文章被阅读 976
最后更新 24-05-23 13:34:54

目录

目录