[javascript][typescript]配列の使い方まとめ

JavaScript

javascript, typescriptで配列を使うときのアレコレを比較してまとめてみました。
typescriptの公式ドキュメントはこちらになります。

配列の宣言

javascriptで配列宣言

文字列だけの配列

let nintendo_games = ["gameboy", "gameboy advance", "3ds", "64", "gamecube", "wii", "wiiU", "switch"];

console.log(nintendo_games[4]); // => gamecube

いろいろな値を入れた配列

let etcs = [1 , function() { console.log("hogehoge"); }, "test"];

typescriptで配列宣言

文字列だけの配列

let nintendo_games: string[] = ["gameboy", "gameboy advance", "3ds", "64", "gamecube", "wii", "wiiU", "switch"];                                                                                                                                           

console.log(nintendo_games[4]); // => gamecube

いろいろな値を入れた配列

let etcs: any[] = [1, function () { console.log("hogehoge"); }, "test"];

変数宣言して、[: 型]をかけばOKですね。

配列に要素を追加

pushメソッドを使う(末尾)

pushメソッドで、末尾に追加できます。
unshiftよりはこっちの方がよく使ってる気がします。

pushメソッドの使い方は、配列の変数.push(要素)配列の最後に要素が追加されます。

javascriptで要素の追加

let nintendo_games = ["gameboy", "gameboy advance", "3ds", "64", "gamecube", "wii", "wiiU", "switch"];
nintendo_games.push("super famicon");

console.log(nintendo_games[8]); // => super famicon

typescriptで要素の宣言

let nintendo_games: string[] = ["gameboy", "gameboy advance", "3ds", "64", "gamecube", "wii", "wiiU", "switch"];
nintendo_games.push("super famicon");

console.log(nintendo_games[8]); // => super famicon

unshiftメソッドを使う(先頭)

unshiftメソッドで、先頭に追加できます。
unshiftメソッドの使い方は、配列の変数.unshift(要素)配列の先頭に要素が追加されます。

let nintendo_games = ["gameboy", "wiiU", "switch"];
nintendo_games.unshift("super famicon");

console.log(nintendo_games); // => ["super famicon", "gameboy", "wiiU", "switch"]

typescriptも同様にunshiftメソッドで先頭に追加できます。

配列の要素を削除

spliceを使う(要素指定で削除)

どちらもspliceメソッドで、追加できます。
spliceメソッドの使い方は、配列の変数.splice(削除開始位置, 削除要素数) で削除できます。

配列は0番目から数えて、下記の例で言うと
1番目の配列の要素から6個削除しています。

javascriptで配列要素の削除

let nintendo_games = ["gameboy", "gameboy advance", "3ds", "64", "gamecube", "wii", "wiiU", "switch"];
nintendo_games.splice(1, 6);

console.log(nintendo_games); // =>  ["gameboy", "switch"]

typescriptで配列要素の削除

let nintendo_games: string[] = ["gameboy", "gameboy advance", "3ds", "64", "gamecube", "wii", "wiiU", "switch"];
nintendo_games.splice(1, 6);

console.log(nintendo_games); // =>  ["gameboy", "switch"]

shiftメソッドを使う(先頭削除)

shiftメソッドを使うと先頭の要素を削除できます。

let nintendo_games = ["gameboy", "wiiU", "switch"];
nintendo_games.shift();

console.log(nintendo_games); // => ["wiiU", "switch"]

typescriptも同様にshiftメソッドで先頭の要素を削除できます。

popメソッドを使う(末尾削除)

shiftメソッドを使うと末尾の要素を削除できます。

let nintendo_games = ["gameboy", "wiiU", "switch"];
nintendo_games.pop();

console.log(nintendo_games); // => ["gameboy", "wiiU"]

typescriptも同様にpopメソッドで末尾の要素を削除できます。

配列の要素存在チェック

特定の要素が存在するかチェックするにはindexOfを使います。

要素が配列に存在すれば、存在する位置を返してくれるので、0以上だったら存在することになります。
存在しない場合は−1を返します。

大文字と小文字は区別されます。
typescriptも同様にindexOfメソッドで確認できます。

let nintendo_games = ["switch", "3ds", "ds"];

if (nintendo_games.indexOf("3ds") > 0){
    console.log("3dsがあります!");
}

配列の要素数を取得

要素数がいくつあるか取得するにはlengthを使います。
typescriptも同様にlengthメソッドで取得できます。

let nintendo_games = ["switch", "3ds", "Ds"];

console.log(nintendo_games.length); // => 3

終わりに

typescriptの方もjavascriptと同じ配列操作メソッドが使えました!
互換性あるから当たり前なのかな?

個人的にはpushとsplice以外はあまり使わない感じなので、この二つをとりあえずおさえておけばいいかと思います😄

コメント

タイトルとURLをコピーしました