サイトアイコン Pro Web Engineer

typescript basic #6 モダンなJSの配列

引き続き、typescriptを学習していきます〜

前回、配列について少し学んだので、もう少しだけ踏み込んでみます

for … of 構文

for of はシンプルに書けるので、ぜひ覚えるべし

const nums: number[] = [1, 200, 3, 4, 10];

for (let num of nums) {
    console.log(num)
}

forEach

配列の値に対して、コールバック関数で処理を実行したい場合

nums.forEach(function (num, index){
    console.log(num, index)
});

//アロー関数をつかってもっと短く
nums.forEach((num, index) => {
    console.log(num, index)
});

nums.forEach((num, index) => console.log(num, index));

filter

配列の値をフィルタリングしたい場合

const filtered: number[] = nums.filter((num) => {
    return num % 2 === 1;
});
console.log(filtered)

map

配列の値に対して処理を実行したい場合

const mapped: number[] = nums.map((num) => {
    return num * 2;
});
console.log(mapped)

map はしっかりと使いこなしたいところ

reduce, reduceRight

配列の値同士を比較しながら処理する

reduceは左から右

reduceRight は右から左

const reduced = nums.reduce((prev, current, index, array) => {
    console.log(prev, current, index, array);
    if (prev > current) {
        return prev;
    }
    return current;
});
console.log(reduced);

every, some

配列の中身をバリデーションしたい場合

const check: boolean = nums.every((num) => {
    return num > 0;
});
console.log(check)

const check: boolean = nums.some((num) => {
    return num > 200;
});
console.log(check)

うーん、これは便利だ

配列の扱いは、ひとつの肝だと思うのでしっかりとマスターしていきましょう〜

配列の型宣言とか知りたい人はこちら

モバイルバージョンを終了