【JS】配列操作のメソッドまとめ【初心者向け】

#はじめに
配列操作について、前回の記事があまりにもお粗末だったので追加
MDNを参考にしています。



#配列メソッドのパターン
- 大元の配列を書き換えるパターン
- 大元の配列を書き換えないパターン
- コールバック関数をしようするパターン（コールバック関数よくわからないので省略）

#操作パターン
- 加工
- 追加、削除
- 並べ替え
- 要素の取得
- 検索

#大元の配列を書き換えるパターン
※例を提示してますが、よしなに結果のクリア、配列を再度宣言してます
結果をクリアした場合、//*◯◯の場合としてます

##配列を指定した値に書き換える(加工)
 - `fill()`メソッドを使う
    - `fill(値)`で配列のすべての要素を書き換える
    - `fill(値, 開始index)`で指定のインデックスから配列の最後まで指定の値にかきかえる
    - `fill(値, 開始idx, 終了idx)`で開始〜終了idxまでの要素を指定の値にかきかえる
    - 戻り値は書き換えた配列

```js:
const catName = [`musashi`, `sumire`, `subaru`, `hinata`, `ku-ta` ];

//全ての要素を書き換える
console.log(catName.fill(`cat`)); //["cat", "cat", "cat", "cat", "cat"]
console.log(catName); //["cat", "cat", "cat", "cat", "cat"]


//*開始位置を指定する
console.log(catName.fill('cat', 2)); //["musashi", "sumire", "cat", "cat", "cat"]
console.log(catName); //["musashi", "sumire", "cat", "cat", "cat"]

//*開始位置、終了位置を指定する
console.log(catName.fill('cat', 1, 3)); //["musashi", "cat", "cat", "hinata", "ku-ta"]
console.log(catName); //  ["musashi", "cat", "cat", "hinata", "ku-ta"]
undefined

```

##配列の最後の要素を削除する
 - `pop()`メソッドを使う
    - 戻り値は削除された要素
    - 配列の長さが変わる
    - 空の配列だった場合`undefined`を返す

```js:
const catName = [`musashi`, `sumire`, `subaru`, `hinata`, `ku-ta` ];
const dogName = [];

//最後の要素を削除する
console.log(catName.pop()); //ku-ta
console.log(catName); //["musashi", "sumire", "subaru", "hinata"]

//空の配列の場合
console.log(dogName.pop()); //undefined
```

##配列の末尾に要素を追加する
 - `push()`メソッドを使う
    - push(追加したい要素１, 追加したい要素２,...);
    - 戻り値は追加後の要素の数

```js:
const catName = [`musashi`, `sumire`];

//1つ追加する
console.log(catName.push('subaru')); //3
console.log(catName);  //["musashi", "sumire", "subaru"]

//*複数追加する
console.log(catName.push('subaru', 'hinata')); //4
console.log(catName); //["musashi", "sumire", "subaru", "hinata"]

//*空を追加する
console.log(catName.push());  //2
console.log(catName);  //["musashi", "sumire"]
```
##配列の並びを反転させる
- `reverse()`メソッドを使う
    - `配列.reverse()`
    - 戻り値は並びが反転した配列

```js:
const num = [1, 2, 3];

//配列を反転させる
console.log(num.reverse()); //[3, 2, 1]
console.log(num); //[3, 2, 1]
```

##先頭の要素を削除する
- `shift()`メソッドを使う
    - `配列.shift()`
    - 要素数が変わる
    - 戻り値は削除した要素
    - 要素が０個の場合`undefined`を返す

```js:
const str = ['a', 'b', 'c', 'd'];
const str1 = [];

//先頭の要素を削除する
console.log(str.shift()); //a
console.log(str); //["b", "c", "d"]

//要素数０を削除して戻り値を確認する
console.log(str1.shift()); //undefined
console.log(str1); //[]
```


##辞書順に並び替える
- `sort()`メソッドを使う
    - `配列.sort()`
    - 辞書順に並び替え
    - 数字⇒アルファベット⇒日本語の順
    - 数字の並び替えは関数が必要（MDNみてね）
    - 戻り値は並び替えられた関数

```js:
const myLike = ['バイク', '猫', `dog`, `cat`, 3, 1990];

//並び替える
console.log(myLike.sort()); //[1990, 3, "cat", "dog", "バイク", "猫"] 
console.log(myLike); //[1990, 3, "cat", "dog", "バイク", "猫"]
```

##指定のidxの要素を削除したり、指定の位置要素を挿入する
 - `splice()`メソッドを使う
    - `配列.splice(変更開始のidx,削除する要素の数,追加要素1,追加要素２,...)`
    - - `配列.splice(変更開始のidx,削除する要素の数,追加要素...) `で指定の数を削除しながら要素を追加
    - `配列.splice(変更開始のidx)`で変更開始の配列を含む後ろの要素が削除
    - `配列.splice(変更開始のidx,削除をする要素の数)`で配列変更開始のidxから、指定の数の要素を削除
    - `配列.splice(変更開始のidx,0,追加要素)`で変更開始のidxに指定の要素を追加
    - 戻り値は、*取り除かれた要素*の配列
        - １つのみ削除は要素１の配列
        - 要素が削除されなかった場合は空の配列

```js:
const str = ['a', 'b', 'c', 'c', 'c', 'f', 'g'];
const str1 = ['a', 'b', 'b', 'b', 'c', 'd'];
const str2 = ['a', 'b', 'e', 'f'];

//要素を削除しながら指定の要素を追加する
console.log(str.splice(3, 2, 'd', 'e')); //["c", "c"]
console.log(str); //["a", "b", "c", "d", "e", "f", "g"]

//指定のidxを含む、後ろの要素を削除する
console.log(str.splice(1)); //["b", "c", "d", "e", "f", "g"]
console.log(str); //["a"]

//指定のidx番号から、削除する要素数を指定して削除する
console.log(str1.splice(1,2)); //["b", "b"]
console.log(str1); //["a", "b", "e", "f"]

//指定のidxの位置に要素を追加する
console.log(str2.splice(2, 0, 'c', 'd')); //[]
console.log(str2); //["a", "b", "c", "d", "e", "f"]

```

##配列の先頭に要素を追加する
 - `unshiht()`メソッドを使う
    - `配列.unshift(要素1, 要素2, ...)`
    - 戻り値は要素追加後の要素数

```js:
const num = [3, 4, 5];

//先頭に要素を追加する
console.log(num.unshift(1, 2)); //5
console.log(num); //[1, 2, 3, 4, 5]
```

##要素数を変更せずに配列の特定要素を特定位置にコピーする
 - `copyWithin()`メソッドを使う
    - `配列.copyWithin(変更開始するｉｄｘ, コピー元開始のidx, コピー元終わり+1のidx)`
    - 戻り値は変更された配列

```js:
const str = ['a', 'b', 'c', 'd', 'e', 'f'];

//idx0にidx2の値をコピーする
console.log(str.copyWithin(0, 2, 3)); //["c", "b", "c", "d", "e", "f"]
console.log(str); //["c", "b", "c", "d", "e", "f"]

//*abcabｃの様に繰り返しさせる
console.log(str.copyWithin(3,0,3)); //["a", "b", "c", "a", "b", "c"]
console.log(str); //["a", "b", "c", "a", "b", "c"]
```





#大元配列を書き換えないパターン

##配列の結合(加工)
 - `concat()`メソッドを使う
  - `配列1.concat(配列２)`
  - `配列１.concat(配列２, 配列3, ...)`
  - 値を追加する事もできる`配列1.concat(配列２, 値1,...)`;
  - 戻り値は新しい配列
 


```js:
const array1 = ['a', 'b', 'c'];
const array2 = ['d', 'e', 'f'];

//2つの配列を結合する
const array3 = array1.concat(array2);

console.log(array1); //["a", "b", "c"]
console.log(array2); //["d", "e", "f"]
console.log(array3); //["a", "b", "c", "d", "e", "f"]

//複数の配列結合する
const array4 = array1.concat(array1, array2);

console.log(array4); //["a", "b", "c", "a", "b", "c", "d", "e", "f"]

//値を追加する
const array5 = array1.concat('aaa','bbb');

console.log(array5);
//["a", "b", "c", "aaa", "bbb"]


```

##特定の要素が含まれているかをbooleanでかえす
- `includes()`メソッドを使う
 -  `配列.includes(検索したい値);`
 -  完全一致
 -  num型をstr型を識別している
 -  `配列.includes(検索したい値, index番号)`で検索開始位置を指定できる
 -  戻り値はboolean

```js:
const pet = [`dog`, `cat`, `ham`];
const num = [1, 2, 3];

//要素を含んでいる場合
pet.includes(`ham`); //true

//要素を含んでいない場合
pet.includes(`猫`); //false

//要素が不完全
pet.includes(`do`); //false

//str と　nam
num.includes('1'); //false

//検索開始位置指定
pet.includes(`dog`, 0); //true
pet.includes(`dog`, 1); //false
```

##特定の要素を検索して、最初に一致したインデックスを返す(検索)
- `indexOf()`メソッドを使う
 - `配列.indexOf(検索したい値, 検索を始めるindex)`
 - 完全一致
 - 一致しなかった場合`-1`を返す
 - 戻り値一致したidx番号

```js:
const color = ['red', 'pink', 'green', 'pink', 'blue'];

//配列全てを検索する
console.log(color.indexOf(`pink`)); //1

//一致しなかった場合
console.log(color.indexOf('white')); //-1

//開始位置指定
console.log(color.indexOf(`pink`, 2)); //3

//開始位置指定（見つからない場合）;
console.log(color.indexOf('red', 1)); //-1
```

##特定の要素を検索して、一番最後に一致したidxを返す
 - `lastIndexOf()`メソッドを使う
    - `配列.lastIndexOf(検索したい要素)`
    - 逆向きに検索する事もできる（indexOfでやればいいのでは？）
    - 戻り値はidx番号
        - みつからなかった場合は−１を返す

```js:
const catName = ['musashi', 'sumire', 'subaru', 'hinata', 'ku-ta', 'musashi'];

//検索する
console.log(catName.lastIndexOf('musashi')); //5

//一致しなかった場合
console.log(catName.lastIndexOf('ran')); //-1
```

##要素を連結した文字列を生成する
 - `join()`メソッドを使う
    - `配列.join(セパレーター)`
        - 引数空で` , `がセパレーター
        - 引数に`''`で、セパレーター無しで連結
        - 引数には自由に文字列をいれられる
    - 戻り値は連結後の文字列

```js:
const season = ['春', '夏', '秋', '冬'];

//文字列をカンマで区切って連結する
console.log(season.join()); //春,夏,秋,冬

//文字列をつなげて連結する
console.log(season.join('')); //春夏秋冬

//文字列を任意の文字で区切って連結する
console.log(season.join('と')); //春と夏と秋と冬
```

##配列の一部をとりだして、新しい配列を作成する
 - `slice()`を使用する
    - `配列.slice(開始idx,終了idx)`
    - 開始idxを負の値にすると、終わりから２つのように指定
    - 開始idxが配列の要素数より多い場合空の配列を返す
    - 開始idxがなかった場合、idx0からスタート
    - 終了idxが負の値の場合、最後から◯番目までと指定
    - 終了idxが配列の要素数より多い場合、最後の要素までの指定
    - 戻り値は、新しく作成された配列

```js:
const catName = ['musashi', 'sumire', 'subaru', 'hinata', 'ku-ta'];

//開始、終了を指定
const catName0 = catName.slice(1,3); //["sumire", "subaru"]

console.log(catName0);


//全てをコピー
const catName1 = catName.slice();

console.log(catName1); //["musashi", "sumire", "subaru", "hinata", "ku-ta"]

//開始idxに負の値
console.log(catName.slice(-3)); //["subaru", "hinata", "ku-ta"]

//開始idxが要素数より多い
console.log(catName.slice(10)); //[]

//開始idxを指定しない
console.log(catName.slice('', 2)); //["musashi", "sumire"]

 //終了idxが負の値
console.log(catName.slice(0, -3)); //["musashi", "sumire"]

//終了のidxが要素数を超える
console.log(catName.slice(2,100)); //["subaru", "hinata", "ku-ta"]
```

 ##要素を連結して文字列として返す
- `toString()`メソッドを使用する
    - 戻り値は、生成された文字列
        - 文字列がカンマで区切られる

```js:
const num = [1,2,'3','4a',5];

console.log(num.toString()); //1,2,3,4a,5
```

#最後に
コールバック関数勉強次第追記していこうと思います(´・ω・｀)