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

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

[前回：【JavaScript】人生いろいろ 配列操作もいろいろ ～初級編～](https://qiita.com/doiko/items/90846f07399d780c8c20)

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

#sort()
>sort() メソッドは、配列の要素を in place でソートします。
>既定のソート順は昇順で、要素を文字列に変換してから
>UTF-16 コード単位の値の並びとして比較します。
>[Array.prototype.sort()-MDN web docs](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/sort)

・・・in placeとは :dancers:
[（wikipedia）In-placeアルゴリズム](https://ja.wikipedia.org/wiki/In-place%E3%82%A2%E3%83%AB%E3%82%B4%E3%83%AA%E3%82%BA%E3%83%A0)

ちょっと何言ってるかわからないですが、自分なりの解釈でポイントをまとめます。

**■　`sort()`は破壊的処理**
　　元の配列そのものを並び替える<br>
**■　ソート順を定義する関数を指定しなかった場合**
　　配列の要素は文字列に変換されて文字の順番で並ぶ
　　　（例1）["cherry", "banana"]　⇒　["banana", "cherry" ]
　　　（例2）[1, 30, 9] ⇒　[1, 9, 30]<br>
**■　ソート順を定義する関数を指定した場合**
　　関数の条件にしたがってソートする
　　その場合、`sort()`のルールに従った戻り値を返す事でソートされる
　　　（条件によってa > bとなる場合）1を返してやる　⇒　[ a , b ]の順にソート
　　　（条件によってa < bとなる場合）-1を返してやる　⇒　[ b , a ]の順にソート
　　　（条件によってa = bとなる場合）0を返す　⇒　並びはそのまま

##関数例
配列`array`の要素を文字列の長さ順にソートする

```JavaScript
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](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/reduce)

・・・reducer関数とは :dancers:　（この流れもういいですかねｗ）

詳しい説明は上記MDNを見て頂ければと思いますが、
個人的には**「配列の頭から順に、隣り合う二つの値について関数内の処理を適用していく」**
とざっくり解釈しています。

具体的な関数例で見ていきましょう。
※今回は実際に配列を与えて、関数を実行しています。


##関数例
配列`array`の中から最大値を取得する
配列が空の場合は0を返す
（※最大値の取得には[`Math.max()`]を使用）
[Math.max() -MDN web docs](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Math/max)

```JavaScript
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](https://qiita.com/chihiro/items/1047e40514a778c08baa)

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

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

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

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