0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

TypeScript入門④Arrayオブジェクトのメソッド達

Posted at

Arrayオブジェクトにはたくさんのメソッドが実装されている。
要は配列に対して、色んな操作を手軽に行えるということ。
毎回、配列に対してこんな操作したいなと思ってごちゃごちゃ調べてしまうことがあるので、
せめてイメージできるように一度しっかり網羅しておく。

そのメソッドは配列を破壊する

破壊的、非破壊的という言葉がある。
破壊的なメソッドでは配列の中身が破壊・変化する。
元の配列ではなくなってしまう。

これから使っていく配列

毎回これに対して操作を行う。
(それぞれの操作ごとに、配列をこの形に戻してやりなおす)

let soldiers:string[] = [
    'ビッグボス',
    'オセロット',
    'クワイエット',
    'ヴェノム・スネーク',
    '和平',
];

push

後ろから一つ追加する。スタックのイメージ。

soldiers.push('イーライ') // イーライが追加

pop

後ろから一つ出す。スタックのイメージ。

soldiers.pop() //和平

shift,unshift

shiftで先頭から取り出す
unshiftで先頭から入れる

soldiers.shift() // ビッグボスを取り出し
soldiers.unshift('グレイ・フォックス') //先頭がグレイフォックス

slice

指定した範囲の要素を取り出して、新しい配列を作る

soldiers.slice(開始位置終了位置);
list: string[] = soldiers.slice(13); //オセロット~和平まで

書いていて思ったこととして、終了位置の要素は含まれないのか!ということ。
ややこしい。
つまりこの場合なら1番目から始まり、3番目は含まない。
ここは要注意点だと感じた。

join

指定した文字で配列の中身を区切って連結。

const kugiri: string[] = soldiers.join('!')
// ビッグボス!オセロット!・・・みたいに連結

includes

指定した値が配列の中の指定したインデックスよりも後にあるかどうかの結果を返す。

soldiers.includes('オセロット', 1); //true
soldiers.includes('オセロット', 2); //false

some

配列の中に指定した要素があるかどうか。少なくともひとつあればtrue

let result : boolean = soldiers.some(function(e) {
    return e === '愛国者達'
});

console.log(result); //false

find, findIndex

findは配列の各要素に対して判定を行い、一番最初に合格した要素を返す
合格する要素がない時はundifinedを返すので、結果を入れる変数の型には注意。

let result :string|undefined = soldiers.find(function(e){
    return e.includes('');
})

// ヴェノムスネークが返ってくる

findIndexは上記の値じゃなくて、値が入っている配列の番号を返す。
どちらも一番最初に合格した者。

filter

条件に合格した要素で配列を作る

let result:string[] = soldiers.filter(function(e){
    return e.includes('')
})
// ['オセロット', 'クワイエット']

非破壊的。
既存の配列自体には影響を与えず、新しい配列を作る。

sort

破壊的。既存の配列に対して、その中身を入れ替える。

map

各要素に対して加工用の関数を呼び出し、その実行結果で新しい配列を作る

let result: boolean[] = soldiers.map((e)=>e.includes('')) 
// [false, true, true, false, false]

indexOf

指定した条件の要素が配列の中にあれば、そのインデックスを返す。
なければマイナス1を返す。

let result: number  = soldiers.indexOf('ヴェノム・スネーク');
// 3
0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?