【TypeScript】中的数组和元组之间的关系

 前言:学友写【TypeScript】的第二篇文章，TypeScript数组和元组，适合学TypeScript的一些同学及有JavaScript的同学，之前学的Javascript的同学都了解过数组，都有一些基础，今天给大家看的是TypeScript中的数组，以及TypeScript中的元组，分别介绍他们的读取和操作方法，好，码了差不多7600多字，充实的一天，不愧是我，真棒！

 

 好了，话不多说，肝着！

数组

数组概念： 数组即一组数据，它把一系列具有相同类型的数据组织在一起，成为一个可操作的对象。

举例：菜单 即可看做一个数组，里面的菜品就是数组里面的数据

• 菜单：
• 宫保鸡丁
• 西湖醋鱼
• 佛跳墙

插一句：

安装typescript的方法: npm install -g typescript

查看TypeScript版本:tsc -v

编译ts文件: tsc 文件名

*** 声明数组,创建数组 

var 或 let 数组名:元素类型[] = [值1,值2,值3...]<

访问数组

*** 1.访问数组下标元素

array[下标数字] 

下面的是Typescript访问数组

/**
 * 声明数组 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

/**
 * 声明数组 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 

***数组遍历方法

数组遍历方法 

for for(let i=0;i

for of for(let item of array)

for in for(let item in array)

forEach 遍历

map遍历

多维数组

多维数组为二维数组和三位数组，常用二维数组进行介绍

javascript中没有二维数组(实现方法：向数组中插入数组)

typescript中二维数组:第一个维度为行,第二个维度为列

语法：[][]

let twoarrs : string[][]

let twoarrs : Array<Array<string>>

元组

元组概念：

元组(tuple) 是关系数据库中的基本概念，关系是一张表，表中的每行(数据库中的每条记录)就是一个元组，每列就是一个属性。

***元组的特点: 6点

• 1.数据类型可以是任何类型
• 2.在元组中可以包含其他元组
• 3.元组可以是空元组
• 4.元组复制必须元素类型兼容
• 5.元组的取值通数组的取值，标号从0开始
• 6.元组可以作为参数传递给函数

***访问元组中的值 数组返回类型只有一个,而元组返回可以是不同的类型

1.通过下标访问 console.log(row[下标数字])

2.循环遍历访问

TypeScript元组文件代码：

/**
 * 
 * 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代码

/**
 *
 * 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方法

元组更新：

初始化元组后,通过元组下标进行赋值并完成更新

元组解构:

元组解构和数组解构类似，也可以把元组元素赋值给多个变量，只是解构出来的各个元素可能是不同类型的。

***元组解构 不能超出元组元素数量，也就是越界解构，否则会报错

PS：爱学习的学友，爱前端，爱前端，爱运营，爱推广，爱交朋友。

看完的兄弟记得点个赞呗，码了差不多7700多字，动动小手证明你的来过。学友兄会回访哦