TypeScript の知識ポイントをまとめます: TypeScript Array (配列)

TypeScript 配列 (配列)

配列オブジェクトは、個々の変数名を使用して一連の値を格納します。

配列は非常に一般的に使用されます。

データのセット (例: Web サイト名) がある場合、次のような個別の変数があります。

var site1="Google";
var site2="Runoob";
var site3="Taobao";

10 または 100 がある場合、この方法は非常に非現実的になりますが、現時点では配列を使用してそれを解決できます。

var sites:string[]; 
sites = ["Google","Runoob","Taobao"]

これははるかに単純に見えます。

TypeScript で配列を宣言するための構文は次のとおりです。

var array_name[:datatype];        //声明 
array_name = [val1,val2,valn..]   //初始化

または、宣言時に直接初期化します。

var array_name[:data type] = [val1,val2…valn]

配列の宣言時に型が設定されていない場合、その配列は任意の型とみなされ、初期化中に最初の要素の型に従って配列の型が推測されます。

例

数値型の配列を作成します。

var numlist:number[] = [2,4,6,8]

配列全体の構造は次のようになります。

最初のインデックス値は 0 で、インデックス値に従って配列要素にアクセスできます。

TypeScript

var sites:string[]; 
sites = ["Google","Runoob","Taobao"] 
console.log(sites[0]); 
console.log(sites[1]);

上記のコードをコンパイルして、次の JavaScript コードを取得します。

JavaScript

var sites;
sites = ["Google", "Runoob", "Taobao"];
console.log(sites[0]);
console.log(sites[1]);

出力は次のとおりです。

Google
Runoob

次のインスタンスは、宣言時に直接初期化します。

TypeScript

var nums:number[] = [1,2,3,4] 
console.log(nums[0]); 
console.log(nums[1]); 
console.log(nums[2]); 
console.log(nums[3]);

上記のコードをコンパイルして、次の JavaScript コードを取得します。

JavaScript

var nums = [1, 2, 3, 4];
console.log(nums[0]);
console.log(nums[1]);
console.log(nums[2]);
console.log(nums[3]);

出力は次のとおりです。

1 
2 
3 
4 

---

配列オブジェクト

Array オブジェクトを使用して配列を作成することもできます。

Array オブジェクトのコンストラクターは、次の 2 つの値を受け入れます。

• 配列のサイズを表す数値。
• 要素がカンマで区切られた初期化された配列リスト。

例

配列の初期化サイズを指定します。

TypeScript

var arr_names:number[] = new Array(4)  
 
for(var i = 0; i<arr_names.length; i++) { 
        arr_names[i] = i * 2 
        console.log(arr_names[i]) 
}

上記のコードをコンパイルして、次の JavaScript コードを取得します。

JavaScript

var arr_names = new Array(4);
for (var i = 0; i < arr_names.length; i++) {
        arr_names[i] = i * 2;
        console.log(arr_names[i]);
}

出力は次のとおりです。

0
2
4
6

次の例では、配列要素を直接初期化します。

TypeScript

var sites:string[] = new Array("Google","Runoob","Taobao","Facebook") 
 
for(var i = 0;i<sites.length;i++) { 
        console.log(sites[i]) 
}

上記のコードをコンパイルして、次の JavaScript コードを取得します。

JavaScript

var sites = new Array("Google", "Runoob", "Taobao", "Facebook");
for (var i = 0; i < sites.length; i++) {
        console.log(sites[i]);
}

出力は次のとおりです。

Google
Runoob
Taobao
Facebook

---

配列の構造化

次のように配列要素を変数に割り当てることもできます。

TypeScript

var arr:number[] = [12,13] 
var[x,y] = arr // 将数组的两个元素赋值给变量 x 和 y
console.log(x) 
console.log(y)

上記のコードをコンパイルして、次の JavaScript コードを取得します。

JavaScript

var arr = [12, 13];
var x = arr[0], y = arr[1]; // 将数组的两个元素赋值给变量 x 和 y
console.log(x);
console.log(y);

出力は次のとおりです。

12
13

---

配列の反復

for ステートメントを使用して、出力配列の個々の要素をループできます。

TypeScript

var j:any; 
var nums:number[] = [1001,1002,1003,1004] 
 
for(j in nums) { 
    console.log(nums[j]) 
}

上記のコードをコンパイルして、次の JavaScript コードを取得します。

JavaScript

var j;
var nums = [1001, 1002, 1003, 1004];
for (j in nums) {
    console.log(nums[j]);
}

出力は次のとおりです。

1001
1002
1003
1004

---

多次元配列

配列の要素を別の配列にすることもでき、多次元配列 (多次元配列) を形成します。

最も単純な多次元配列は 2 次元配列であり、次のように定義されます。

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

例

各次元に 3 つの要素を持つ 2 次元配列を定義します。

TypeScript

var multi:number[][] = [[1,2,3],[23,24,25]]  
console.log(multi[0][0]) 
console.log(multi[0][1]) 
console.log(multi[0][2]) 
console.log(multi[1][0]) 
console.log(multi[1][1]) 
console.log(multi[1][2])

上記のコードをコンパイルして、次の JavaScript コードを取得します。

JavaScript

var multi = [[1, 2, 3], [23, 24, 25]];
console.log(multi[0][0]);
console.log(multi[0][1]);
console.log(multi[0][2]);
console.log(multi[1][0]);
console.log(multi[1][1]);
console.log(multi[1][2]);

出力は次のとおりです。

1
2
3
23
24
25

---

関数での配列の使用

関数にパラメータとして渡される

TypeScript

var sites:string[] = new Array("Google","Runoob","Taobao","Facebook") 
 
function disp(arr_sites:string[]) {
        for(var i = 0;i<arr_sites.length;i++) { 
                console.log(arr_sites[i]) 
        }  
}  
disp(sites);

上記のコードをコンパイルして、次の JavaScript コードを取得します。

JavaScript

var sites = new Array("Google", "Runoob", "Taobao", "Facebook");
function disp(arr_sites) {
        for (var i = 0; i < arr_sites.length; i++) {
                console.log(arr_sites[i]);
        }
}
disp(sites);

出力は次のとおりです。

Google
Runoob
Taobao
Facebook

関数の戻り値として

TypeScript

function disp():string[] { 
        return new Array("Google", "Runoob", "Taobao", "Facebook");
} 
 
var sites:string[] = disp() 
for(var i in sites) { 
        console.log(sites[i]) 
}

上記のコードをコンパイルして、次の JavaScript コードを取得します。

JavaScript

function disp() {
        return new Array("Google", "Runoob", "Taobao", "Facebook");
}
var sites = disp();
for (var i in sites) {
        console.log(sites[i]);
}

出力は次のとおりです。

Google
Runoob
Taobao
Facebook

---

配列メソッド

次の表に、一般的に使用される配列メソッドをいくつか示します。

シリアルナンバー	方法と説明	例
1.	concat() は 2 つ以上の配列を連結し、結果を返します。	var alpha = ["a", "b", "c"]; var numeric = [1, 2, 3]; var alphaNumeric = alpha.concat(numeric); console.log("alphaNumeric : " + alphaNumeric ); // a,b,c,1,2,3
2.	each() は、数値要素のすべての要素が条件を満たすかどうかを確認します。	function isBigEnough(element, index, array) { return (element >= 10); } var passed = [12, 5, 8, 130, 44].every(isBigEnough); console.log("Test Value : " + passed ); // false
3.	filter() は数値要素を検出し、条件に一致するすべての要素の配列を返します。	function isBigEnough(element, index, array) { return (element >= 10); } var passed = [12, 5, 8, 130, 44].filter(isBigEnough); console.log("Test Value : " + passed ); // 12,130,44
4.	forEach() は、配列の要素ごとにコールバック関数を 1 回実行します。	let num = [7, 8, 9]; num.forEach(function (value) { console.log(value); }); JavaScript コードにコンパイルします。 var num = [7, 8, 9]; num.forEach(function (value) { console.log(value); // 7 8 9 });
5.	IndexOf() は配列内の要素を検索し、その位置を返します。検索結果が見つからない場合、戻り値は -1 で、項目がないことを意味します。	var index = [12, 5, 8, 130, 44].indexOf(8); console.log("index is : " + index ); // 2
6.	join() は、配列のすべての要素を文字列に入れます。	var arr = new Array("Google","Runoob","Taobao"); var str = arr.join(); console.log("str : " + str ); // Google,Runoob,Taobao var str = arr.join(", "); console.log("str : " + str ); // Google, Runoob, Taobao var str = arr.join(" + "); console.log("str : " + str ); // Google + Runoob + Taobao
7。	lastIndexOf() 文字列内の指定された位置を前後に検索して、指定された文字列値が最後に出現した位置を返します。	var index = [12, 5, 8, 130, 44].lastIndexOf(8); console.log("index is : " + index ); // 2
8.	map() は、指定された関数で配列の各要素を処理し、処理された配列を返します。	var numbers = [1, 4, 9]; var roots = numbers.map(Math.sqrt); console.log("roots is : " + roots ); // 1,2,3
9.	Pop() は配列の最後の要素を削除し、削除された要素を返します。	var numbers = [1, 4, 9]; var element = numbers.pop(); console.log("element is : " + element ); // 9 var element = numbers.pop(); console.log("element is : " + element ); // 4
10.	Push() 1 つ以上の要素を配列の末尾に追加し、新しい長さを返します。	var numbers = new Array(1, 4, 9); var length = numbers.push(10); console.log("new numbers is : " + numbers ); // 1,4,9,10 length = numbers.push(20); console.log("new numbers is : " + numbers ); // 1,4,9,10,20
11.	reduce() は、配列要素を (左から右に) 値に計算します。	var total = [0, 1, 2, 3].reduce(function(a, b){ return a + b; }); console.log("total is : " + total ); // 6
12.	reduceRight() は、配列要素を (右から左へ) 値に計算します。	var total = [0, 1, 2, 3].reduceRight(function(a, b){ return a + b; }); console.log("total is : " + total ); // 6
13.	reverse() は、配列の要素の順序を逆にします。	var arr = [0, 1, 2, 3].reverse(); console.log("Reversed array is : " + arr ); // 3,2,1,0
14.	SHIFT() は、配列の最初の要素を削除して返します。	var arr = [10, 1, 2, 3].shift(); console.log("Shifted value is : " + arr ); // 10
15.	lice() は配列の一部を取得し、新しい配列を返します。	var arr = ["orange", "mango", "banana", "sugar", "tea"]; console.log("arr.slice( 1, 2) : " + arr.slice( 1, 2) ); // mango console.log("arr.slice( 1, 3) : " + arr.slice( 1, 3) ); // mango,banana
16.	some() は、配列要素内のいずれかの要素が指定された条件を満たすかどうかをチェックします。	function isBigEnough(element, index, array) { return (element >= 10); } var retval = [2, 5, 8, 1, 4].some(isBigEnough); console.log("Returned value is : " + retval ); // false var retval = [12, 5, 8, 1, 4].some(isBigEnough); console.log("Returned value is : " + retval ); // true
17.	sort() は配列の要素を並べ替えます。	var arr = new Array("orange", "mango", "banana", "sugar"); var sorted = arr.sort(); console.log("Returned string is : " + sorted ); // banana,mango,orange,sugar
18.	splice() は、配列に要素を追加または配列から削除します。	var arr = ["orange", "mango", "banana", "sugar", "tea"]; var removed = arr.splice(2, 0, "water"); console.log("After adding 1: " + arr ); // orange,mango,water,banana,sugar,tea console.log("removed is: " + removed); removed = arr.splice(3, 1); console.log("After removing 1: " + arr ); // orange,mango,water,sugar,tea console.log("removed is: " + removed); // banana
19.	toString() は配列を文字列に変換し、結果を返します。	var arr = new Array("orange", "mango", "banana", "sugar"); var str = arr.toString(); console.log("Returned string is : " + str ); // orange,mango,banana,sugar
20.	unshift() は 、1 つ以上の要素を配列の先頭に追加し、新しい長さを返します。	var arr = new Array("orange", "mango", "banana", "sugar"); var length = arr.unshift("water"); console.log("Returned array is : " + arr ); // water,orange,mango,banana,sugar console.log("Length of the arra