TypeScript array type

Like the JavaScript language, TypeScript are also array types in 0613a2885711b9.

An array refers to an ordered sequence of elements. For example, [1, 2, 3] is an array, 1、2、3 is an element in the array, and the brackets [] can contain any number of elements. But the type of each element must be the same. For example, if the array is a number type, all elements must be array type. Sudden inclusion of a string type [1, 2, '3']

The array is static, which means that once the array is initialized, it cannot be resized.

Declare and initialize the array

Declaring and initializing an array in TypeScript is also very simple, similar to declaring variables of numeric type and string type, except that when specifying the array type, add a bracket [] after the type.

Syntax format:

let array_name[:datatype] = [val1,val2…valn]

The left side of the equal sign is to declare the array, specifying the type of the array, and the right side of the equal sign is to initialize and assign values to the array. If the data type is not specified for the array when declaring the array, the array is of any type of the array will be inferred based on the type of the first element in the array during initialization.

Example:

For example, create an array of string type, in which are the names of the characters in The Legend of Condor Heroes:

let character:string[] = ["杨过", "小龙女", "郭襄", "郭靖", "黄蓉", "李莫愁"];
console.log(character);

It should be noted that when we specify the type of an array, the elements in the array must also be of this type, otherwise an error will be reported. In the above code, we specified that the array is of string type, and the array elements can only be of string type.

Example:

For example, in a string type array, how to have an element of numeric type:

let character:string[] = ["杨过", "小龙女", "郭襄", "郭靖", "黄蓉", "李莫愁", 1];
console.log(character);

Executing the code prompts us that the compilation failed, and the output is as follows:

Type 'number' is not assignable to type 'string'.

In addition to using the brackets [] to declare arrays, we can also use array generics to define arrays.

The syntax is as follows:

let array_name:Array<datatype>;

Example:

For example, declare an array of numeric type:

let numArr:Array<number> = [1, 2, 3, 4, 5];  
console.log(numArr);

Array object

We can create an array Array Array object accepts the following two values:

• A numeric value indicating the size of the array.
• The initialized array list, the elements are separated by commas.

Example:

For example, if we define an array of size 4, we can use for loop to assign values to the array:

let numArr:number[] = new Array(4);  /／表示数组的大小为４

for(let i = 0; i < numArr.length; i++) { 
   numArr[i] = i;
}
console.log(numArr);

Compiled into JavaScript code:

var numArr = new Array(4);/／表示数组的大小为４
for (var i = 0; i < numArr.length; i++) {
    numArr[i] = i;
}
console.log(numArr);

Output:

[ 0, 1, 2, 3 ]

Or you can initialize the array list Array

let myName:string[] = new Array("xkd","summer","Iven") 
console.log(myName);

Compiled into JavaScript code:

var myName = new Array("xkd", "summer", "Iven");
console.log(myName);

Output:

[ 'xkd', 'summer', 'Iven' ]

Access array elements

Let's look at the following array:

["杨过", "小龙女", "郭襄", "郭靖", "黄蓉", "李莫愁"]

In this array, the index value of the first element "Yang Guo" is 0 , the index value of the second element "Little Dragon Girl" is 1 , the index value of the third element "Guo Xiang" is 2 , and so on.

So what is the effect of knowing the index value of the element in the array? We can access the array element through the corresponding index.

Example:

For example, if we want to get the value of the first element in the array, we can do it by index 0:

let character:string[] = ["杨过", "小龙女", "郭襄", "郭靖", "黄蓉", "李莫愁"];
// 第一个元素的索引为0
console.log(character[0]);  

Compile the above code, and the obtained JavaScript is as follows:

var character = ["杨过", "小龙女", "郭襄", "郭靖", "黄蓉", "李莫愁"];
// 第一个元素的索引为0
console.log(character[0]);

The output is:

杨过

So if we want to access the second, third, fourth...element in the array, we only need to change [] bracket 0613a2885717eb to the index corresponding to the element, as shown below:

console.log(character[1]);   // 小龙女
console.log(character[2]);   // 郭襄
console.log(character[3]);   // 郭靖
console.log(character[4]);   // 黄蓉
console.log(character[5]);   // 李莫愁

The index of the last element in the character 5 , then suppose we access 6 , what will we get, you can try:

console.log(character[6]);   // undefined

Obviously, the output result is undefined , indicating that there is no element corresponding to this index value.

What if we want the index 6 to correspond to an element value? We can assign values to elements by index.

Example:

Not with the array index 6 corresponding elements, then we can give the array index 6 assignment elements as "a light":

let character:string[] = ["杨过", "小龙女", "郭襄", "郭靖", "黄蓉", "李莫愁"];
character[6] = "一灯";
console.log(character);

Output:

['杨过', '小龙女', '郭襄', '郭靖', '黄蓉', '李莫愁', '一灯']

Such an array character the elements on the 6 a becomes a 7 months, a new element 'a lamp. "

Modification of array elements

Through the index of the array, we can not only access the elements in the array, but also modify the value of the elements in the array.

Example:

For example, modify the value of the first element in the array to "Golden Wheel Dharma King":

let character:string[] = ["杨过", "小龙女", "郭襄", "郭靖", "黄蓉", "李莫愁"];
character[0] = "金轮法王";
console.log(character);

Compiled into JavaScript code:

var character = ["杨过", "小龙女", "郭襄", "郭靖", "黄蓉", "李莫愁"];
character[0] = "金轮法王";
console.log(character);

Output:

[ '金轮法王', '小龙女', '郭襄', '郭靖', '黄蓉', '李莫愁' ]

As you can see, the first element in the array is changed from the original "Yang Guo" to "Golden Wheel Fa King" in the output result.

Adding array elements

We can directly use the push() method to add elements to the array, this method can add any number of elements to the array at once.

grammar:

array.push(element1, ..., elementN);

push() method can add the specified element to the end of the array and return the length of the new array. The parameter indicates the element to be added to the end of the array.

Example:

Add three elements to the array:

let numArr:number[] = [1, 2, 3];
console.log(numArr);  // 原数组
numArr.push(4, 5, 6);
console.log(numArr);  // 新数组

Compiled into JavaScript code:

var numArr = [1, 2, 3];
console.log(numArr);  // 原数组
numArr.push(4, 5, 6);
console.log(numArr);  // 新数组

Output:

[ 1, 2, 3 ]
[ 1, 2, 3, 4, 5, 6 ]

Deletion of array elements

pop() , shift() , splice() and other methods to delete elements in the array.

• pop() : Used to delete and return the last element of the array.
• shift() : Used to delete the first element of the array and return the value of the first element.
• splice() : Delete elements from the array, and then return the deleted elements.

Example:

let numArr:number[] = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
console.log(numArr);
// 删除数组中的最后一个元素
numArr.pop();
console.log(numArr);

// 删除数组的第一个元素
numArr.shift();
console.log(numArr);

// 删除数组索引为2，3的元素
numArr.splice(2, 2);
console.log(numArr);

Compiled into JavaScript code:

var numArr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
console.log(numArr);
// 删除数组中的最后一个元素
numArr.pop();
console.log(numArr);
// 删除数组的第一个元素
numArr.shift();
console.log(numArr);
// 删除数组索引为2，3的元素
numArr.splice(2, 2);
console.log(numArr);

Output:

[1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
[1, 2, 3, 4, 5,6, 7, 8, 9]
[2, 3, 4, 5, 6, 7, 8, 9]
[ 2, 3, 6, 7, 8, 9 ]

Array destructuring

TypeScript supports array destructuring, which is an expression that assigns data in an array or object to another variable.

Example:

We deconstruct the numArr

let numArr:number[] = [1, 2, 3];

var[a, b, c] = numArr; 
console.log(a);
console.log(b);
console.log(c);

Compiled into JavaScript code:

var numArr = [1, 2, 3];
var a = numArr[0], b = numArr[1], c = numArr[2];
console.log(a);
console.log(b);
console.log(c);

Output:

1
2
3

Multidimensional Arrays

TypeScript supports multidimensional arrays. The elements of one array can be another array, which constitutes a multidimensional array. The simplest form of a multidimensional array is a two-dimensional array.

grammar:

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

Example:

Declare a two-dimensional array:

let mulArr:number[][] = [[1, 2, 3], [100, 200, 300]];

console.log(mulArr);

If you want to access the elements in this two-dimensional array, you can also access it by index, but note that the two-dimensional array has two index values, one is the index of the outer array, and the other is the index of the inner array:

let mulArr:number[][] = [[1, 2, 3], [100, 200, 300]];

console.log(mulArr[0][0]);
console.log(mulArr[0][1]);
console.log(mulArr[0][2]);
console.log(mulArr[1][0]);
console.log(mulArr[1][1]);
console.log(mulArr[1][2]);

Compile into JavaScript code:

var mulArr = [[1, 2, 3], [100, 200, 300]];
console.log(mulArr[0][0]);
console.log(mulArr[0][1]);
console.log(mulArr[0][2]);
console.log(mulArr[1][0]);
console.log(mulArr[1][1]);
console.log(mulArr[1][2]);

Output:

1
2
3
100
200
300

Pass the array to the function

We can pass the array as a parameter to the function.

Example:

For example, define an array myNames , and then pass it to the function show() :

let myNames:string[] = new Array("郭靖","黄蓉","杨过","小龙女");

function show(arr_names:string[]) {
   for(var i = 0; i < arr_names.length; i++) { 
      console.log(myNames[i]) 
   }  
}  
show(myNames);

Compile into JavaScript code:

var myNames = new Array("郭靖", "黄蓉", "杨过", "小龙女");
function show(arr_names) {
    for (var i = 0; i < arr_names.length; i++) {
        console.log(myNames[i]);
    }
}
show(myNames);

Output result:

郭靖
黄蓉
杨过
小龙女

It should be noted that the type of the array corresponds to the type of the parameter in the function one-to-one.

Return array from function

An array can be used as the return value of a function.

Example:

Next, we directly create an array through the Array object as show . Also note that the type of the array corresponds to the type of the return value:

function show():string[] { 
    return new Array("郭靖", "黄蓉", "杨过", "小龙女") 
 } 
  
 let myNames:string[] = show() 
 for(var i in myNames) {
    console.log(myNames[i]) 
 }

Compile into JavaScript code:

function show() {
    return new Array("郭靖", "黄蓉", "杨过", "小龙女");
}
var myNames = show();
for (var i in myNames) {
    console.log(myNames[i]);
}

Output:

郭靖
黄蓉
杨过
小龙女

Summarize

There are quite a lot of knowledge points about arrays in this section, let's sort them out. First figure out what is an array? We can understand that an array is a variable composed of any number of values of the same type. Then learn how to declare an array, access the array by index, modify the elements in the array, delete the elements in the array, what is a multidimensional array, and so on. Have you clarified all the knowledge points mentioned above? We can do a few small exercises to verify it.

Hands-on practice

1. Declare an array of string type. There are 5 elements in this array, namely "apple", "watermelon", "banana", "cherry", and "pear".
2. Get the value of the third element in the previous question by index?
3. Delete the last element in the above array?
4. The following is a three-dimensional array, how to get the element value 8 by index?

let moreArr = [[[1, 2,], 3], [[4, 5, 6]], [7, [8, 9]]];

Link: https://www.9xkd.com/