TypeScript中Array(數(shù)組)聲明與簡單使用方法
更新時間：2023年12月15日 10:26:27 作者：samxiaoguai
這篇文章主要給大家介紹了關于TypeScript中Array(數(shù)組)聲明與簡單使用的相關資料,TypeScript Array(數(shù)組)數(shù)組對象是使用單獨的變量名來存儲一系列的值,文中通過代碼介紹的非常詳細,需要的朋友可以參考下
TypeScript Array(數(shù)組)
1.數(shù)組聲明：數(shù)組對象是使用單獨的變量名來存儲一系列的值。
let arr: number[] = [1, 2]; //數(shù)組 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 對象：可以使用 Array 對象創(chuàng)建數(shù)組。
數(shù)組對象的構造函數(shù)接受以下兩種值：
(1)表示數(shù)組大小的數(shù)值。
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)初始化的數(shù)組列表，元素使用逗號分隔值。
let twoArr:number[] = new Array(1,2,3) console.log(twoArr) //[ 1,2,3 ]
3:數(shù)組解構:可以把數(shù)組元素賦值給變量。
let [x,y] = oneArr; console.log(x,y) //0 2
4.數(shù)組迭代:可以使用循環(huán)輸出數(shù)組的各個元素
let twoArr:number[] = new Array(1,2,3)
for(let i:number = 0; i< twoArr.length; i++) {
console.log(twoArr[i])
}
// 1
// 2
// 3注： 可以參考TypeScript循環(huán)一章節(jié)
5.多維數(shù)組:一個數(shù)組的元素可以是另外一個數(shù)組
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.數(shù)組在函數(shù)中的使用
(1)作為參數(shù)傳遞給函數(shù)
let useValue = new Array(manyArr)
function useArr (manyArr:number[][][]) {
console.log(manyArr)
}
useArr(useValue) //[ [ [ 1, 2, 3 ], [ 1, 2, 3 ] ] ](2)作為函數(shù)的返回值
function returnArr(): number[][][] {
return new Array(manyArr)
}
console.log(returnArr()) //[ [ [ 1, 2, 3 ], [ 1, 2, 3 ] ] ]7.數(shù)組方法
| 方法 | 描述 |
| concat() | 連接兩個或更多的數(shù)組，并返回結果。 |
| every() | 可以檢測數(shù)值元素的每個元素是否都符合某種條件。 |
filter() | 檢測數(shù)值元素，并返回符合條件所有元素的數(shù)組。 |
| forEach() | 數(shù)組每個元素都執(zhí)行一次回調(diào)函數(shù)。 |
| indexOf() | 搜索數(shù)組中的元素，并返回它所在的位置。如果搜索不到，返回值 -1，代表沒有此項。 |
| join() | 把數(shù)組的所有元素連接為一個字符串，可以指定符號連接 |
| lastIndexOf() | 返回一個指定的字符串值最后出現(xiàn)的位置，在字符串中的指定位置從后向前搜索。如果搜索不到，返回值 -1，代表沒有此項。 |
| map() | 通過指定函數(shù)處理數(shù)組的每個元素，并返回處理后的數(shù)組。 |
| pop() | 刪除數(shù)組的最后一個元素并返回刪除的元素。 |
| push() | 向數(shù)組的末尾添加一個或更多元素，并返回新的長度。 |
| reduce() | 將數(shù)組元素計算為一個值（從左到右）。 |
| reduceRight() | 將數(shù)組元素計算為一個值（從右到左）。 |
| reverse() | 反轉數(shù)組的元素順序。 |
| shift() | 刪除并返回數(shù)組的第一個元素。 |
| slice() | 選取數(shù)組的的一部分，并返回一個新數(shù)組。 |
| some() | 可以檢測數(shù)組元素中是否有元素符合指定條件。 |
| sort() | 對數(shù)組的元素進行排序。 |
| splice() | 從數(shù)組中添加或刪除元素。 |
| toString() | 把數(shù)組轉換為字符串，并返回結果。 |
| unshift() | 向數(shù)組的開頭添加一個或更多元素，并返回新的長度。 |
8.數(shù)組方法的簡單使用
注：
1. slice可以接受兩個參數(shù)（起始位置和結束位置）或者一個或者不傳值，當沒傳入值時，返回的數(shù)組的值原始數(shù)組值，如果只傳入一個參數(shù)，則返回截取的原始數(shù)組從參數(shù)代表的起始位置到原始數(shù)組的結束位置（包含結束位置），如果傳入兩個參數(shù)，則返回截取的原始數(shù)組從參數(shù)代表的起始位置到參數(shù)代表結束位置（不包含結束位置）。
2.splice可以傳入三個參數(shù)插入位置（刪除起始位置）和刪除數(shù)量和插入的值。
3.every和some的另外釋意和使用可以參考TypeScript循環(huán)一章
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' ]總結
到此這篇關于TypeScript中Array(數(shù)組)聲明與簡單使用的文章就介紹到這了,更多相關ts Array數(shù)組聲明使用內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
您可能感興趣的文章:
- TypeScript 數(shù)組Array操作的常用方法
- TypeScript數(shù)組的定義與使用詳解
- typeScript中數(shù)組類型定義及應用詳解
- TypeScript編寫自動創(chuàng)建長度固定數(shù)組的類型工具詳解
- TypeScript實現(xiàn)數(shù)組和樹的相互轉換
- TypeScript調(diào)整數(shù)組元素順序算法
- TypeScript之元組、數(shù)組及as?const的使用
- TypeScript判斷兩個數(shù)組的內(nèi)容是否相等的實現(xiàn)
- TypeScript數(shù)組實現(xiàn)棧與對象實現(xiàn)棧的區(qū)別詳解
- TypeScript之元組、數(shù)組、多維數(shù)組定義方法以及 as const說明
相關文章
這是一個十分常見的微博列表頁面，類似于新浪微博。上周末，在心無旁騖情況下，一共用了5個對象，產(chǎn)出400行代碼，實踐出一種代碼組織模式。2011-08-08
下面小編就為大家?guī)硪黄猨s操作瀏覽器的參數(shù)方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-01-01
這篇文章主要為大家詳細介紹了js實現(xiàn)飛機大戰(zhàn)游戲，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-08-08
這篇文章主要介紹了Angular 頁面跳轉時傳參問題的相關資料,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2016-08-08
這篇文章主要介紹了Javascript對象，特別為大家分享了對象題目的一個坑，提供了解題思路，感興趣的小伙伴們可以參考一下2015-12-12
存放子頁面可以是iframe,又可以是frameset，本例介紹javascript父、子頁面交互技巧,需要的朋友可以參考下2014-08-08
在做開發(fā)時會對不同的時間格式進行轉換,下面這篇文章主要給大家介紹了關于前端常見的時間轉換方法以及獲取當前時間方法的相關資料,文中通過代碼介紹的非常詳細,需要的朋友可以參考下2024-01-01
網(wǎng)頁中可關閉的漂浮窗口實現(xiàn)可自行調(diào)節(jié)
廣告式的漂浮窗口，想必大家并不陌生吧，下面為大家簡單介紹下具體的實現(xiàn)，有需要的朋友可以參考下2013-08-08
這篇文章主要介紹了輕松解決JavaScript定時器越走越快的問題 ,本文通過實例帶給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友可以參考下2019-05-05
詳談innerHTML innerText的使用和區(qū)別
下面小編就為大家?guī)硪黄斦刬nnerHTML innerText的使用和區(qū)別。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-08-08