こんにちは、どいこです。
前回:【JavaScript】人生いろいろ 配列操作もいろいろ ~初級編~
前回に続いて配列操作のメソッドを紹介していきます。
少し難易度が上がりますが、そこは自分のスタンド能力が成長性:Aだと信じて参りましょう。
(例:空条承太郎さんのスタープラチナ、広瀬康一くんのエコーズ などなど)
#sort()
sort() メソッドは、配列の要素を in place でソートします。
既定のソート順は昇順で、要素を文字列に変換してから
UTF-16 コード単位の値の並びとして比較します。
Array.prototype.sort()-MDN web docs
・・・in placeとは
(wikipedia)In-placeアルゴリズム
ちょっと何言ってるかわからないですが、自分なりの解釈でポイントをまとめます。
■ sort()
は破壊的処理
元の配列そのものを並び替える
■ ソート順を定義する関数を指定しなかった場合
配列の要素は文字列に変換されて文字の順番で並ぶ
(例1)["cherry", "banana"] ⇒ ["banana", "cherry" ]
(例2)[1, 30, 9] ⇒ [1, 9, 30]
■ ソート順を定義する関数を指定した場合
関数の条件にしたがってソートする
その場合、sort()
のルールに従った戻り値を返す事でソートされる
(条件によってa > bとなる場合)1を返してやる ⇒ [ a , b ]の順にソート
(条件によってa < bとなる場合)-1を返してやる ⇒ [ b , a ]の順にソート
(条件によってa = bとなる場合)0を返す ⇒ 並びはそのまま
##関数例
配列array
の要素を文字列の長さ順にソートする
function sortByLength(array) {
const result = array.sort((item1, item2) => {
return item1.length > item2.length ? -1 : 1
})
return result
}
###処理の流れ
① sort()
で比較対象1つ目(item1
)と2つ目(item2
)を比較
② item1.length
> item2.length
の場合:-1を返す([item1
, item2
]の順にソート)
item1.length
< item2.length
の場合:1を返す([item2
, item1
]の順にソート)
③ 処理後にソート済の配列(新しい配列ではなくソートされた元の配列)を返す
#reduce()
reduce() メソッドは、配列の各要素に対して (引数で与えられた) reducer 関数を実行して、単一の結果値にします。
Array.prototype.reduce()-MDN web docs
・・・reducer関数とは (この流れもういいですかねw)
詳しい説明は上記MDNを見て頂ければと思いますが、
個人的には**「配列の頭から順に、隣り合う二つの値について関数内の処理を適用していく」**
とざっくり解釈しています。
具体的な関数例で見ていきましょう。
※今回は実際に配列を与えて、関数を実行しています。
##関数例
配列array
の中から最大値を取得する
配列が空の場合は0を返す
(※最大値の取得には[Math.max()
]を使用)
Math.max() -MDN web docs
const initialValue = 0
function getMaxValue(array) {
const result = array.reduce((accumulator, currentValue) => {
return Math.max(accumulator, currentValue)
}, initialValue);
return result
}
getMaxValue([100, 30, 60, 2])
###引数の説明
● accumulator
: 現在処理されている要素よりも一つ前の要素かinitialValue、
もしくは一つ前の要素で実行された関数の結果
● currentValue
: 現在処理されている要素
● initialValue
: 最初の実引数として渡される値
⇒ 上の文章で「配列の頭から順に、二つの値に処理をする」と書きましたが
initialValue
がある場合は、最初はinitialValue
と配列の頭(array[0])の値について処理が行われます。
(その時コードの例だとaccumulator
には「0」、currentValue
には「100」が入るって事ですね。)
その次はaccumulator
に上記処理結果の値、currentValue
にarray[1]の値が入って順番に処理が続きます。
※ なおinitialValue
を指定していないと、与えられた配列が空だった場合にTypeErrorが発生してしまうようです。
###処理の流れ
① reduce()
でaccumulator
(initialValueがあるので、0が入る)と
currentValue
(100)について関数内の処理を適用
② Math.max()
により二つの引数のうち最大値がreturnされる(0と100を比べるので100)
③ accumulator
に一つ前の関数の結果(100)、currentValue
に配列の次の値(30)が入る
④ Math.max()
により二つのうち最大値(100)がreturn ⇒ accumulator
に結果(100)が入る
~ 以後繰り返し
③ 最後の処理の結果(配列の値の最大値=100)を返す
#あとがき
今回の記事作成にあたって気づいたことは
**「MDNのドキュメントが一番ためになる!」**という事でした。
ずっと「なんや 文字多くて読みにくいなァ」と思って敬遠気味だったのですが
知りたい事がしっかり網羅されてる。心強い。
(グレートですよ こいつはァ)
これからもMDNパイセンにすり寄っていきたい所存です。
なお、中級編はもう少し続く予定です。
今回もお読み頂き、ありがとうございました。