当前位置：极客教程 > TypeScript > TypeScript 教程 > TypeScript 元组析构是如何工作的

TypeScript 元组析构是如何工作的

TypeScript 元组析构是如何工作的

在TypeScript中，元组是一个包含不同数据类型的值的对象。元组的长度总是预先定义的。它类似于一个数组，但数组只包含一种数据类型的值，而元组包含多种数据类型的值。

析构 元组意味着在不同的变量中获取元组的值。例如，我们需要在代码块中多次使用元组的值。我们可以在单独的变量中获取所有的值，并在需要元组值时使用变量，而不是每次都通过索引访问元组的值。

语法

用户可以按照下面的语法在TypeScript中对元组进行解构。

type sample_tuple_type = [string, number];
let sample_tuple: sample_tuple_type = ["Default", 24];
let [value1, value2] = sample_tuple;
TypeScript

我们在上面的语法中使用type关键字创建了类型。之后，我们创建了类型为sample_tuple_type的元组。接下来，我们对元组进行解构，在value1和value2变量中得到元组的值。

现在，让我们看看不同的例子来学习TypeScript中的元组结构化。

示例 1

在下面的例子中，我们已经创建了元组的类型。我们可以创建类型为tuple_type的元组。tuple1根据tuple_type包含五个不同的值。

之后，我们创建了五个变量，命名为var1, var2等，并在对元组1进行解构后将元组的值存储在这些变量中。用户可以在输出中观察到，var1变量包含元组的第0个索引的值，其他变量也是如此。

type tuple_type = [boolean, number, string, number, boolean];
let tuple1: tuple_type = [true, 23, "Hi", 90, false];
let [var1, var2, var3, var4, var5] = tuple1;
console.log("The values of tuple variables are");
console.log(var1);
console.log(var2);
console.log(var3);
console.log(var4);
console.log(var5);
TypeScript
var tuple1 = [true, 23, "Hi", 90, false];
var var1 = tuple1[0], var2 = tuple1[1], var3 = tuple1[2], var4 = tuple1[3], var5 = tuple1[4];
console.log("The values of tuple variables are");
console.log(var1);
console.log(var2);
console.log(var3);
console.log(var4);
console.log(var5);
TypeScript

输出

上述代码将产生以下输出 —

The values of tuple variables are
true
23
Hi
90
false
TypeScript

示例 2

在这个例子中，tuple2也是tuple_type的，但是它只包含三个数字和字符串类型的值。之后，我们声明了num1和num2两个变量，以便在对图元进行解构时将图元中的数字值存储到变量中。

用户可以看到我们是如何在解构元组的时候跳过值的。因此，我们可以在对元组进行解构时，只从元组中获取所需的值。num1包含第0个索引的值，而num2变量包含元组第2个索引的值。我们已经跳过了第1个索引的元组值。

// defining the tuple type
type tuple_type = [number, string, number];
// creating the tuple
let tuple2: tuple_type = [56, "TutorialsPoint", 32];
// defining some variables
let num1: number = 0;
let num2: number = 0;

//  destructuring the tuple2
[num1, , num2] = tuple2;

console.log("The number values of tuples are");
console.log(num1);
console.log(num2);
TypeScript
// creating the tuple
var tuple2 = [56, "TutorialsPoint", 32];

// defining some variables
var num1 = 0;
var num2 = 0;

//  destructuring the tuple2
num1 = tuple2[0], num2 = tuple2[2];
console.log("The number values of tuples are");
console.log(num1);
console.log(num2);
TypeScript

输出

上述代码将产生以下输出 —

The number values of tuples are
56
32
TypeScript

示例 3

在下面的例子中，一个元组包含大约九个值。因此，我们没有创建九个变量来存储元组的值，而是将三个值存储在一个不同的变量中，六个值存储在一个单一的变量中。

我们使用了spread运算符来获取otherValues变量中的最后六个值。在输出中，用户可以看到，otherValues变量是一个包含六个元素的数组。

所以，用户也可以通过这种方式使用传播操作符对数组中的元组进行反结构。

type data_type = [
   number,
   number,
   string,
   string,
   string,
   boolean,
   number,
   string,
   number
];

let data_tuple: data_type = [
   43,
   56,
   "TypeScript",
   "JS",
   "TutorialsPoint",
   false,
   67,
   "TS",
   90,
];

// otherValues variable stores all remaining values
let [number1, number2, string1, ...otherValues] = data_tuple;

console.log(number1);
console.log(number2);
console.log(string1);
console.log(otherValues);
TypeScript
var data_tuple = [
   43,
   56,
   "TypeScript",
   "JS",
   "TutorialsPoint",
   false,
   67,
   "TS",
   90,
];
// otherValues variable stores all remaining values
var number1 = data_tuple[0], number2 = data_tuple[1], string1 = data_tuple[2], otherValues = data_tuple.slice(3);
console.log(number1);
console.log(number2);
console.log(string1);
console.log(otherValues);
TypeScript

输出

上述代码将产生以下输出 —

43
56
TypeScript
[ 'JS', 'TutorialsPoint', false, 67, 'TS', 90 ]
TypeScript

示例 4

下面的例子演示了创建一个带有可选属性的元组，并在多个变量中对其进行解构。在 optional_tuple 中，最后一个元素是可选的。所以，tuple5只包含两个元素。

变量6的值在输出中是未定义的，因为元组5只包含两个值。

// last values is optional in tuple
type optional_tuple = [string, number, number?];

// creating tuples with and without optional parameters
let tuple4: optional_tuple = ["Hello", 89, 90];
let tuple5: optional_tuple = ["Hi", 76];

// destructuring the tuple4
let [variable1, variable2, variable3] = tuple4;
console.log("Tuple4 values are");
console.log(variable1);
console.log(variable2);
console.log(variable3);

// destructuring the tuple5
let [variable4, variable5, variable6] = tuple5;
console.log("Tuple5 values are");
console.log(variable4);
console.log(variable5);
console.log(variable6);
TypeScript
// creating tuples with and without optional parameters
var tuple4 = ["Hello", 89, 90];
var tuple5 = ["Hi", 76];

// destructuring the tuple4
var variable1 = tuple4[0], variable2 = tuple4[1], variable3 = tuple4[2];
console.log("Tuple4 values are");
console.log(variable1);
console.log(variable2);
console.log(variable3);

// destructuring the tuple5
var variable4 = tuple5[0], variable5 = tuple5[1], variable6 = tuple5[2];
console.log("Tuple5 values are");
console.log(variable4);
console.log(variable5);
console.log(variable6);
TypeScript

输出

上述代码将产生以下输出 —

Tuple4 values are
Hello
89
90
Tuple5 values are
Hi
76
undefined
TypeScript

在本教程中，用户学习了如何对元组进行析构。在第一个例子中，我们学习了正常的元组去结构，第二个例子演示了在去结构时跳过元组中的值。从第三个例子中，我们可以学习对数组中的元组值进行析构，从最后一个例子中，我们可以学习对带有可选值的元组进行析构。

Python教程

Python 教程

Python 教程
Tkinter 教程

Tkinter 教程
Pandas 教程

Pandas 教程
NumPy 教程

NumPy 教程
Flask 教程

Flask 教程
Django 教程

Django 教程
PySpark 教程

PySpark 教程
wxPython 教程

wxPython 教程
SymPy 教程

SymPy 教程
Seaborn 教程

Seaborn 教程
SciPy 教程

SciPy 教程
RxPY 教程

RxPY 教程
Pycharm 教程

Pycharm 教程
Pygame 教程

Pygame 教程
PyGTK 教程

PyGTK 教程
PyQt 教程

PyQt 教程
PyQt5 教程

PyQt5 教程
PyTorch 教程

PyTorch 教程
Matplotlib 教程

Matplotlib 教程
Web2py 教程

Web2py 教程
BeautifulSoup 教程

BeautifulSoup 教程

Java教程

Java 教程

Java 教程

Web教程

HTML 教程

HTML 教程
CSS 教程

CSS 教程
CSS3 教程

CSS3 教程
jQuery 教程

jQuery 教程
Ajax 教程

Ajax 教程
AngularJS 教程

AngularJS 教程
TypeScript 教程

TypeScript 教程
WordPress 教程

WordPress 教程
Laravel 教程

Laravel 教程
Next.js 教程

Next.js 教程
PhantomJS 教程

PhantomJS 教程
Three.js 教程

Three.js 教程
Underscore.JS 教程

Underscore.JS 教程
WebGL 教程

WebGL 教程
WebRTC 教程

WebRTC 教程
VueJS 教程

VueJS 教程

数据库教程

SQL 教程

SQL 教程
MySQL 教程

MySQL 教程
MongoDB 教程

MongoDB 教程
PostgreSQL 教程

PostgreSQL 教程
SQLite 教程

SQLite 教程
Redis 教程

Redis 教程
MariaDB 教程

MariaDB 教程

图形图像教程

Vulkan 教程

Vulkan 教程
OpenCV 教程

OpenCV 教程

大数据教程

R语言 教程

R语言 教程

开发工具教程

Git 教程

Git 教程
VSCode 教程

VSCode 教程
Docker 教程

Docker 教程
Gerrit 教程

Gerrit 教程
Excel 教程

Excel 教程

计算机教程

Go语言 教程

Go语言 教程
C++ 教程

C++ 教程

TypeScript 教程

登录

找回密码？

注册