TypeScript Array (array) declaration and simple use

Table of contents

TypeScript Array (array)

1. Array declaration: The array object uses a separate variable name to store a series of values.

2.Array object: You can use the Array object to create an array.

3: Array deconstruction: Array elements can be assigned to variables.

4. Array iteration: each element of the array can be output using a loop

5. Multidimensional array: the elements of an array can be another array

6. The use of arrays in functions

7. Array method

8. Simple use of array methods

TypeScript Array (array)

1. Array declaration: The array object uses a separate variable name to store a series of values.

let arr: number[] = [1, 2];  //array
console.log(arr)
let arr2: Array<number> = [1,2];
console.log(arr2) //[ 1, 2 ]
let arr3: Array<string> = ["1","2"];
console.log(arr3) //[ '1', '2' ]
let arr4: Array<any> = ["1",2];
console.log(arr4) //[ '1', 2 ]

2.Array object: You can use the Array object to create an array.

The constructor of an array object accepts the following two values:

(1) A numerical value representing the size of the array.

let oneArr:number[] = new Array(6)  
for(let i:number = 0; i< oneArr.length; i++) { 
    oneArr[i] = i * 2 
}
console.log(oneArr) //[ 0, 2, 4, 6, 8, 10 ]

(2) An initialized array list whose elements use commas to separate values.

let twoArr:number[] = new Array(1,2,3)  
console.log(twoArr) //[ 1,2,3 ]

3: Array deconstruction: Array elements can be assigned to variables.

let [x,y] = oneArr;
console.log(x,y) //0 2

4. Array iteration: each element of the array can be output using a loop

let twoArr:number[] = new Array(1,2,3)  
for(let i:number = 0; i< twoArr.length; i++) { 
    console.log(twoArr[i])
}
// 1
// 2
// 3

Note: You can refer to Chapter 1 of TypeScript Loop

5. Multidimensional array: the elements of an array can be another array

let manyArr:number[][] = [[1,2,3],[1,2,3]];
console.log(manyArr)
let manyArr2:string[][] = [["1","2","3"],["1","2","3"]];
console.log(manyArr2)
let manyArr3:any[][] = [[1,2,"3"],[1,2,"3"]];
console.log(manyArr3)
// [ [ 1, 2, 3 ], [ 1, 2, 3 ] ]
// [ [ '1', '2', '3' ], [ '1', '2', '3' ] ]
// [ [ 1, 2, '3' ], [ 1, 2, '3' ] ]

6. The use of arrays in functions

(1) passed as a parameter to the function

let useValue = new Array(manyArr)
function useArr (manyArr:number[][][]) {
   console.log(manyArr)
}
useArr(useValue)  //[ [ [ 1, 2, 3 ], [ 1, 2, 3 ] ] ]

(2) as the return value of the function

function returnArr(): number[][][] {
    return new Array(manyArr)
}
console.log(returnArr()) //[ [ [ 1, 2, 3 ], [ 1, 2, 3 ] ] ]

7. Array method

methoddescribe
concat()Concatenates two or more arrays and returns the result.
every()Each of the numeric elements can be tested to see if a certain condition is met.

filter()

Detects numeric elements and returns an array of all elements matching the criteria.
forEach()The callback function is executed once for each element of the array.
indexOf()

Searches for an element in an array and returns its position. If the search is not found, the return value is -1, which means there is no item.

join()Connect all elements of the array into a string, you can specify a symbolic connection
lastIndexOf()Returns the position of the last occurrence of a specified string value, searching backwards and forwards at the specified position in the string. If the search is not found, the return value is -1, which means there is no item.
map()Processes each element of the array with the specified function and returns the processed array.
pop()Removes the last element of the array and returns the removed element.
push()Adds one or more elements to the end of the array and returns the new length.
reduce()Computes an array element as a value (left to right).
reduceRight()Computes an array element as a value (right to left).
reverse()Reverses the order of the elements of an array.
shift()Remove and return the first element of the array.
slice()Select a portion of an array and return a new array.
some()It can detect whether there are elements in the array elements that meet the specified conditions.
sort()Sorts the elements of an array.
splice()Add or remove elements from an array.
toString()Convert an array to a string and return the result.
unshift()Adds one or more elements to the beginning of the array and returns the new length.

8. Simple use of array methods

Note:

1. slice can accept two parameters (start position and end position) or one or no value. When no value is passed in, the returned array value is the original array value. If only one parameter is passed in, the intercepted value will be returned. The original array is from the starting position represented by the parameter to the end position of the original array (including the end position). If two parameters are passed in, the intercepted original array will be returned from the starting position represented by the parameter to the end position represented by the parameter (not including the end position) Location).

2.splice can pass in three parameters, the insertion position (deletion start position), the number of deletions, and the inserted value.

3. For additional interpretation and use of every and some, please refer to the chapter TypeScript Loop

let carr1: number[] = [1, 2, 3];
let carr2: number[] = [4, 5, 6];
let carr3: number[] = [7, 8, 9];
console.log(carr1.concat(carr2)) //[ 1, 2, 3, 4, 5, 6 ]
console.log(carr1.concat(carr2, carr3)) //[ 1, 2, 3, 4, 5, 6, 7, 8, 9 ]

function isBigEnough(item: number) {
    return (item >= 10);
}

let eArr = [1, 2, 20].every(isBigEnough);
console.log("Test Value : " + eArr); // false

let fArr = [1, 2, 20].filter(isBigEnough);
console.log(fArr); // [ 20 ]

let feArr = [1, 2, 20]
feArr.forEach((item: number) => {
    console.log(item);
});

let indexOfArr = [1, 2, 20];
console.log(feArr.indexOf(1));
console.log(feArr.indexOf(20));
console.log(feArr.indexOf(3));
// 0
// 2
// -1
let joinArr = [1, 2, 20];
console.log(joinArr.join("-")); //"1-2-20"

let lastArr = [1, 2, 2, 2, 20];
console.log(lastArr.lastIndexOf(20));
console.log(lastArr.lastIndexOf(2));
console.log(lastArr.lastIndexOf(3));
// 4
// 3
// -1
let mapArr = [1, 4, 9];
console.log(mapArr.map(Math.sqrt)); //[ 1, 2, 3 ]

let popArr = [1, 4, 9];
console.log(popArr.pop()); //9

let pushArr = [1, 4, 9];
pushArr.push(10);
console.log(pushArr); //[ 1, 4, 9, 10 ]

let reduceArr = [1, 2, 3].reduce((a, b) => { return a + b; });
let reduceArr2 = ["1", "2", "3"].reduce((a, b) => { return a + b; });
console.log(reduceArr)
console.log(reduceArr2)
// 6
// 123
let reduceRArr = [1, 2, 3].reduceRight((a, b) => { return a + b; });
let reduceRArr2 = ["1", "2", "3"].reduceRight((a, b) => { return a + b; });
console.log(reduceRArr)
console.log(reduceRArr2)
// 6
// 321

let reverseArr = [1, 2, 3];
console.log(reverseArr.reverse()); //[ 3, 2, 1 ]

let shiftArr = [1, 2, 3];
console.log(shiftArr.shift()); //1

let sliceArr = [4, 5, 6, 7, 8];
console.log(sliceArr.slice()); //[ 4, 5, 6, 7, 8 ]
console.log(sliceArr.slice(1, 2)); //[ 5 ]
console.log(sliceArr.slice(1, 3)); //[ 5, 6 ]
console.log(sliceArr.slice(0, 3)); //[ 4, 5, 6 ]
console.log(sliceArr.slice(3)); //[ 7, 8 ]

function isBigEnough2(item: number) {
    return (item >= 10);

}

let someArr = [1, 2, 13].some(isBigEnough2);
console.log(someArr);  //true
let someArr2 = [1, 2, 3].some(isBigEnough2);
console.log(someArr2); //false

let sortArr = new Array(1, 3, 2, 1); 
console.log(sortArr.sort()); //[ 1, 1, 2, 3 ]
let sortArr2 = new Array("1", "3", "2", "1"); 
console.log(sortArr2.sort()); //[ '1', '1', '2', '3' ]
let sortArr3 = new Array("abc", "cbc", "bbc", "abc"); 
console.log(sortArr3.sort()); //[ 'abc', 'abc', 'bbc', 'cbc' ]

let spliceArr = new Array("1", "2", "3");
spliceArr.splice(2, 0, "hello"); 
console.log(spliceArr) //[ '1', '2', 'hello', '3' ]
let spliceArr2 = new Array("1", "2", "3","4");
spliceArr2.splice(2, 1, "hello"); 
console.log(spliceArr2) //[ '1', '2', 'hello', '4' ]
let spliceArr3 = new Array("1", "2", "3","4","5");
spliceArr3.splice(2, 2); 
console.log(spliceArr3) //[ '1', '2', '5' ]

let tostringArr = new Array("1", "2", "3");
console.log(tostringArr.toString()) //1,2,3

let unshiftArr = new Array("1", "2", "3");
console.log(tostringArr.unshift("6")) //4
console.log(tostringArr) //[ '6', '1', '2', '3' ]
console.log(tostringArr.unshift("6","7")) //6
console.log(tostringArr) //[ '6', '7', '6', '1', '2', '3' ]

If you have any questions, please comment below and I will answer them for you.

Tags: Front-end Javascript TypeScript ts

Posted by blintas on Thu, 22 Dec 2022 04:52:08 +1030