前言:学友写【TypeScript】的第二篇文章，TypeScript数组和元组，适合学TypeScript的一些同学及有JavaScript的同学，之前学的Javascript的同学都了解过数组，都有一些基础，今天给大家看的是TypeScript中的数组，以及TypeScript中的元组，分别介绍他们的读取和操作方法，好，码了差不多7600多字，充实的一天，不愧是我，真棒！
好了，话不多说，肝着！
数组
数组概念： 数组即一组数据，它把一系列具有相同类型的数据组织在一起，成为一个可操作的对象。
举例：菜单 即可看做一个数组，里面的菜品就是数组里面的数据
- 菜单：
- 宫保鸡丁
- 西湖醋鱼
- 佛跳墙
插一句：
安装typescript的方法: npm install -g typescript
查看TypeScript版本:tsc -v
编译ts文件: tsc 文件名
代码语言：javascript复制*** 声明数组,创建数组
var 或 let 数组名:元素类型[] = [值1,值2,值3...]<访问数组
*** 1.访问数组下标元素
array[下标数字]
下面的是Typescript访问数组
代码语言：javascript复制/**
* 声明数组 array[]
* js创建数组
* let arrlist = [1,2,3,4,5]
*
* typescript创建数组
* let arrlist:number[] = [6,7,8,9,10]
*
* */
let arrlistA = [1,2,3,4,5] //js写法
let arrlistB:number[] = [6,7,8,9,10] //typescript写法
let arrlistC:string[] = ["uzi","The shy","小明","小虎"]
console.log(arrlistA.length); // 5
console.log(arrlistB.length); // 5
document.getElementById("btn1").onclick = function(){
for(let i=0;i<arrlistA.length;i ){
alert(arrlistA[i])
}
}
document.getElementById("btn2").onclick = function(){
arrlistB.push(11,12,13) //追加数组arrlistB
for(let i=0;i<arrlistB.length;i ){
console.log(arrlistB[i])
}
console.log(arrlistB.length)
}
document.getElementById("btn3").onclick = function(){
for(let i in arrlistB){
console.log("访问数组下所有下标:" arrlistB[i]) //访问arrlistB 数组下所有下标
console.log("访问数组下第四个下标:" arrlistB[4]) //访问arrlistB 数组下标第四个
}
}
console.log("arrlistC:" arrlistC)
delete arrlistC[0];//删除uzi
console.log("arrlistC:" arrlistC)
//点击删除数组元素
// document.getElementById("btn4").onclick = function(){
// for(let i of arrlistC){
// delete arrlistC[1]; //、 删除uzi
// }
// console.log("arrlistC:" arrlistC)
// }下面的是TypeScript转译后生成的js
代码语言：javascript复制/**
* 声明数组 array[]
* js创建数组
* let arrlist = [1,2,3,4,5]
*
* typescript创建数组
* let arrlist:number[] = [6,7,8,9,10]
*
* */
var arrlistA = [1, 2, 3, 4, 5]; //js写法
var arrlistB = [6, 7, 8, 9, 10]; //typescript写法
var arrlistC = ["uzi", "The shy", "小明", "小虎"];
console.log(arrlistA.length); // 5
console.log(arrlistB.length); // 5
document.getElementById("btn1").onclick = function () {
for (var i = 0; i < arrlistA.length; i ) {
alert(arrlistA[i]);
}
};
document.getElementById("btn2").onclick = function () {
arrlistB.push(11, 12, 13); //追加数组arrlistB
for (var i = 0; i < arrlistB.length; i ) {
console.log(arrlistB[i]);
}
console.log(arrlistB.length);
};
document.getElementById("btn3").onclick = function () {
for (var i in arrlistB) {
console.log("访问数组下所有下标:" arrlistB[i]); //访问arrlistB 数组下所有下标
console.log("访问数组下第四个下标:" arrlistB[4]); //访问arrlistB 数组下标第四个
}
};
console.log("arrlistC:" arrlistC);
delete arrlistC[0]; //删除uzi
console.log("arrlistC:" arrlistC);
//点击删除数组元素
// document.getElementById("btn4").onclick = function () {
// for (var _i = 0, arrlistC_1 = arrlistC; _i < arrlistC_1.length; _i ) {
// var i = arrlistC_1[_i];
// delete arrlistC[1]; //、 删除uzi
// }
// console.log("arrlistC:" arrlistC);
// };*** 2.通过循环访问数组元素
删除数组 delete array[数组下标]
点击删除数组下标
*** 数组方法
数组方法 表4-1
***数组遍历方法
数组遍历方法
代码语言：javascript复制for for(let i=0;i
for of for(let item of array)
for in for(let item in array)
forEach 遍历
map遍历多维数组
多维数组为二维数组和三位数组，常用二维数组进行介绍
javascript中没有二维数组(实现方法：向数组中插入数组)
typescript中二维数组:第一个维度为行,第二个维度为列
语法：[][]
代码语言：javascript复制let twoarrs : string[][]let twoarrs : Array<Array<string>>元组
元组概念：
元组(tuple) 是关系数据库中的基本概念，关系是一张表，表中的每行(数据库中的每条记录)就是一个元组，每列就是一个属性。
***元组的特点: 6点
- 1.数据类型可以是任何类型
- 2.在元组中可以包含其他元组
- 3.元组可以是空元组
- 4.元组复制必须元素类型兼容
- 5.元组的取值通数组的取值，标号从0开始
- 6.元组可以作为参数传递给函数
***访问元组中的值 数组返回类型只有一个,而元组返回可以是不同的类型
1.通过下标访问 console.log(row[下标数字])
2.循环遍历访问
TypeScript元组文件代码：
代码语言：javascript复制/**
*
* 1.元组声明和数组类似
*
* 数组 声明 datatype[]
* let arraylist:number:[] = []
* 元组 声明 [datatype1,datatype2,datatype3,.....] 可以跟多个
* 写法: let row:[number,string,number] = [1,"jack",99]
*
* 2.访问元组中的值
*
* 和数组访问一样
* 通过 console.log() 访问，
* 通过 循环遍历 进行访问
*
*
* */
//访问元组中的值 数组返回类型只有一个,而元组返回可以是不同的类型
//元组的取值通数组的取值，标号从0开始
let row:[number,string,number] = [20220323,"星期三",1429]
console.log(row[0]);// 20220323
for(let i of row){
console.log("循环遍历元组:" i);
}
//push 追加 page 112页
row.push(1,"typescript",2)
console.log(row)
//pop 删除 移除元组中最后一个元素 长度减1
let del = row.pop();
console.log("移除的元素:" del);
console.log("元组的长度:" row.length);
/**
* 元组更新
* 初始化元组后,通过元组下标进行赋值并完成更新
*
* */
let newlist:[number,string,number] = [2022,"时间",1513];
console.log("初始化的元组:" newlist);
newlist[1] = "当前时间";
console.log("更新后的元组:" newlist);
/**
*
* 元组解构
*
* 元组解构和数组类似
*
* 数组解构出来的元素是相同的
* 可以把元组元素赋值多个变量，解构出来各个元素类型可能是不同的
*
* */
let yuanzujiegou:[string,string,number,number] = ["你好","世界",1525,2022]
//元组解构 不能超出元组元素数量，也就是越界解构，否则会报错
let [a,b,c,d] = yuanzujiegou;
console.log(b); //"世界"
/**
*
* 生成器,迭代器
*
* 生成器是一个种返回迭代器的函数，通过function关键字后的（*）星号来表示
*
* 迭代器对象都有一个next()方法
*
*
* */
function genIterator(items){
let i = 0;
return{
next:function(){
var done = (i >= items.length);
var value =!done ? items[i ] : undefined;
return{
done:done,
value:value
}
}
}
}
let iterator = genIterator([1,2,3]);
console.log(iterator.next()); //{value: 1, done: false}
console.log(iterator.next()); //{value: 2, done: false}
console.log(iterator.next()); //{value: 3, done: false}
function *genIterator(){
yield 1;
yield 2;
yield 3;
}
//调用生成器,返回迭代器
let iterator = genIterator();
console.log(iterator.next()); //打印迭代器的next()方法 //{value: 1, done: false}下面是TypeScript 编译后生成的Js代码
代码语言：javascript复制/**
*
* 1.元组声明和数组类似
*
* 数组 声明 datatype[]
* let arraylist:number:[] = []
* 元组 声明 [datatype1,datatype2,datatype3,.....] 可以跟多个
* 写法: let row:[number,string,number] = [1,"jack",99]
*
* 2.访问元组中的值
*
* 和数组访问一样
* 通过 console.log() 访问，
* 通过 循环遍历 进行访问
*
*
* */
var __generator = (this && this.__generator) || function (thisArg, body) {
var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
function verb(n) { return function (v) { return step([n, v]); }; }
function step(op) {
if (f) throw new TypeError("Generator is already executing.");
while (_) try {
if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
if (y = 0, t) op = [op[0] & 2, t.value];
switch (op[0]) {
case 0: case 1: t = op; break;
case 4: _.label ; return { value: op[1], done: false };
case 5: _.label ; y = op[1]; op = [0]; continue;
case 7: op = _.ops.pop(); _.trys.pop(); continue;
default:
if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
if (t[2]) _.ops.pop();
_.trys.pop(); continue;
}
op = body.call(thisArg, _);
} catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
}
};
//访问元组中的值 数组返回类型只有一个,而元组返回可以是不同的类型
//元组的取值通数组的取值，标号从0开始
var row = [20220323, "星期三", 1429];
console.log(row[0]); // 20220323
for (var _i = 0, row_1 = row; _i < row_1.length; _i ) {
var i = row_1[_i];
console.log("循环遍历元组:" i);
}
//push 追加 page 112页
row.push(1, "typescript", 2);
console.log(row);
//pop 删除 移除元组中最后一个元素 长度减1
var del = row.pop();
console.log("移除的元素:" del);
console.log("元组的长度:" row.length);
/**
* 元组更新
* 初始化元组后,通过元组下标进行赋值并完成更新
*
* */
var newlist = [2022, "时间", 1513];
console.log("初始化的元组:" newlist);
newlist[1] = "当前时间";
console.log("更新后的元组:" newlist);
/**
*
* 元组解构
*
* 元组解构和数组类似
*
* 数组解构出来的元素是相同的
* 可以把元组元素赋值多个变量，解构出来各个元素类型可能是不同的
*
* */
var yuanzujiegou = ["你好", "世界", 1525, 2022];
//元组解构 不能超出元组元素数量，也就是越界解构，否则会报错
var a = yuanzujiegou[0], b = yuanzujiegou[1], c = yuanzujiegou[2], d = yuanzujiegou[3];
console.log(b); //"世界"
/**
*
* 生成器,迭代器
*
* 生成器是一个种返回迭代器的函数，通过function关键字后的（*）星号来表示
*
* 迭代器对象都有一个next()方法
*
*
* */
function genIterator(items) {
var i = 0;
return {
next: function () {
var done = (i >= items.length);
var value = !done ? items[i ] : undefined;
return {
done: done,
value: value
};
}
};
}
var iterator = genIterator([1, 2, 3]);
console.log(iterator.next()); //{value: 1, done: false}
console.log(iterator.next()); //{value: 2, done: false}
console.log(iterator.next()); //{value: 3, done: false}
function genIterator() {
return __generator(this, function (_a) {
switch (_a.label) {
case 0: return [4 /*yield*/, 1];
case 1:
_a.sent();
return [4 /*yield*/, 2];
case 2:
_a.sent();
return [4 /*yield*/, 3];
case 3:
_a.sent();
return [2 /*return*/];
}
});
}
//调用生成器,返回迭代器
var iterator = genIterator();
console.log(iterator.next()); //打印迭代器的next()方法 //{value: 1, done: false}元组操作:
***push方法
***pop方法
元组更新：
初始化元组后,通过元组下标进行赋值并完成更新
元组解构:
元组解构和数组解构类似，也可以把元组元素赋值给多个变量，只是解构出来的各个元素可能是不同类型的。
***元组解构 不能超出元组元素数量，也就是越界解构，否则会报错
