3
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

【JavaScript】人生いろいろ 配列操作もいろいろ ~中級編 その① sort、reduce~

Last updated at Posted at 2020-10-01

こんにちは、どいこです。

前回:【JavaScript】人生いろいろ 配列操作もいろいろ ~初級編~

前回に続いて配列操作のメソッドを紹介していきます。
少し難易度が上がりますが、そこは自分のスタンド能力成長性:Aだと信じて参りましょう。
(例:空条承太郎さんのスタープラチナ、広瀬康一くんのエコーズ などなど)

#sort()

sort() メソッドは、配列の要素を in place でソートします。
既定のソート順は昇順で、要素を文字列に変換してから
UTF-16 コード単位の値の並びとして比較します。
Array.prototype.sort()-MDN web docs

・・・in placeとは :dancers:
(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.lengthitem2.length の場合:-1を返す([item1 , item2]の順にソート) 
  item1.lengthitem2.length の場合:1を返す([item2 , item1]の順にソート)
③ 処理後にソート済の配列(新しい配列ではなくソートされた元の配列)を返す

#reduce()

reduce() メソッドは、配列の各要素に対して (引数で与えられた) reducer 関数を実行して、単一の結果値にします。
Array.prototype.reduce()-MDN web docs

・・・reducer関数とは :dancers: (この流れもういいですかね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)を返す

参考:【javascript】reduce -Qiita

#あとがき
今回の記事作成にあたって気づいたことは
**「MDNのドキュメントが一番ためになる!」**という事でした。

ずっと「なんや 文字多くて読みにくいなァ:innocent:」と思って敬遠気味だったのですが
知りたい事がしっかり網羅されてる。心強い。
(グレートですよ こいつはァ)

これからもMDNパイセンにすり寄っていきたい所存です。

なお、中級編はもう少し続く予定です。
今回もお読み頂き、ありがとうございました。

3
1
2

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
3
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?