TypeScript中Array(數(shù)組)聲明與簡單使用方法
TypeScript Array(數(shù)組)
1.數(shù)組聲明:數(shù)組對象是使用單獨(dú)的變量名來存儲一系列的值。
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ù)組對象的構(gòu)造函數(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ù)組解構(gòu):可以把數(shù)組元素賦值給變量。
let [x,y] = oneArr; console.log(x,y) //0 2
4.數(shù)組迭代:可以使用循環(huán)輸出數(shù)組的各個(gè)元素
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ù)組:一個(gè)數(shù)組的元素可以是另外一個(gè)數(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() | 連接兩個(gè)或更多的數(shù)組,并返回結(jié)果。 |
every() | 可以檢測數(shù)值元素的每個(gè)元素是否都符合某種條件。 |
filter() | 檢測數(shù)值元素,并返回符合條件所有元素的數(shù)組。 |
forEach() | 數(shù)組每個(gè)元素都執(zhí)行一次回調(diào)函數(shù)。 |
indexOf() | 搜索數(shù)組中的元素,并返回它所在的位置。如果搜索不到,返回值 -1,代表沒有此項(xiàng)。 |
join() | 把數(shù)組的所有元素連接為一個(gè)字符串,可以指定符號連接 |
lastIndexOf() | 返回一個(gè)指定的字符串值最后出現(xiàn)的位置,在字符串中的指定位置從后向前搜索。如果搜索不到,返回值 -1,代表沒有此項(xiàng)。 |
map() | 通過指定函數(shù)處理數(shù)組的每個(gè)元素,并返回處理后的數(shù)組。 |
pop() | 刪除數(shù)組的最后一個(gè)元素并返回刪除的元素。 |
push() | 向數(shù)組的末尾添加一個(gè)或更多元素,并返回新的長度。 |
reduce() | 將數(shù)組元素計(jì)算為一個(gè)值(從左到右)。 |
reduceRight() | 將數(shù)組元素計(jì)算為一個(gè)值(從右到左)。 |
reverse() | 反轉(zhuǎn)數(shù)組的元素順序。 |
shift() | 刪除并返回?cái)?shù)組的第一個(gè)元素。 |
slice() | 選取數(shù)組的的一部分,并返回一個(gè)新數(shù)組。 |
some() | 可以檢測數(shù)組元素中是否有元素符合指定條件。 |
sort() | 對數(shù)組的元素進(jìn)行排序。 |
splice() | 從數(shù)組中添加或刪除元素。 |
toString() | 把數(shù)組轉(zhuǎn)換為字符串,并返回結(jié)果。 |
unshift() | 向數(shù)組的開頭添加一個(gè)或更多元素,并返回新的長度。 |
8.數(shù)組方法的簡單使用
注:
1. slice可以接受兩個(gè)參數(shù)(起始位置和結(jié)束位置)或者一個(gè)或者不傳值,當(dāng)沒傳入值時(shí),返回的數(shù)組的值原始數(shù)組值,如果只傳入一個(gè)參數(shù),則返回截取的原始數(shù)組從參數(shù)代表的起始位置到原始數(shù)組的結(jié)束位置(包含結(jié)束位置),如果傳入兩個(gè)參數(shù),則返回截取的原始數(shù)組從參數(shù)代表的起始位置到參數(shù)代表結(jié)束位置(不包含結(jié)束位置)。
2.splice可以傳入三個(gè)參數(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' ]
總結(jié)
到此這篇關(guān)于TypeScript中Array(數(shù)組)聲明與簡單使用的文章就介紹到這了,更多相關(guān)ts Array數(shù)組聲明使用內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
- TypeScript 數(shù)組Array操作的常用方法
- TypeScript數(shù)組的定義與使用詳解
- typeScript中數(shù)組類型定義及應(yīng)用詳解
- TypeScript編寫自動(dòng)創(chuàng)建長度固定數(shù)組的類型工具詳解
- TypeScript實(shí)現(xiàn)數(shù)組和樹的相互轉(zhuǎn)換
- TypeScript調(diào)整數(shù)組元素順序算法
- TypeScript之元組、數(shù)組及as?const的使用
- TypeScript判斷兩個(gè)數(shù)組的內(nèi)容是否相等的實(shí)現(xiàn)
- TypeScript數(shù)組實(shí)現(xiàn)棧與對象實(shí)現(xiàn)棧的區(qū)別詳解
- TypeScript之元組、數(shù)組、多維數(shù)組定義方法以及 as const說明
相關(guān)文章
js實(shí)現(xiàn)飛機(jī)大戰(zhàn)游戲
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)飛機(jī)大戰(zhàn)游戲,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2020-08-08前端常見的時(shí)間轉(zhuǎn)換方法以及獲取當(dāng)前時(shí)間方法小結(jié)
在做開發(fā)時(shí)會(huì)對不同的時(shí)間格式進(jìn)行轉(zhuǎn)換,下面這篇文章主要給大家介紹了關(guān)于前端常見的時(shí)間轉(zhuǎn)換方法以及獲取當(dāng)前時(shí)間方法的相關(guān)資料,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-01-01網(wǎng)頁中可關(guān)閉的漂浮窗口實(shí)現(xiàn)可自行調(diào)節(jié)
廣告式的漂浮窗口,想必大家并不陌生吧,下面為大家簡單介紹下具體的實(shí)現(xiàn),有需要的朋友可以參考下2013-08-08詳談innerHTML innerText的使用和區(qū)別
下面小編就為大家?guī)硪黄斦刬nnerHTML innerText的使用和區(qū)別。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-08-08