JavaScriptの配列のメソッドの使い方～length・at・fill・flat・findLast・findLastIndex・Array.of・copyWithin～

# 記事の目的

ども、N予備校でプログラミングを勉強中のふーちんです！
この記事ではJavaScript配列関係のメソッドの使い方、8つ紹介・説明しまーす。
`length`・`at`・`fill`・`flat`・`findLast`・`findLastIndex`・`Array.of`・`copyWithin`です！
（メソッドじゃないのもありますが）
初心者にもわかりやすく（自分も初心者ですが）説明したつもりです。

# 目次

- [1つ目、length](https://qiita.com/fuuchin/items/3081c84b5659b3d78bf6#length)
- [2つ目、atメソッド](https://qiita.com/fuuchin/items/3081c84b5659b3d78bf6#at)
- [3つ目、fillメソッド](https://qiita.com/fuuchin/items/3081c84b5659b3d78bf6#fill)
- [4つ目、flatメソッド](https://qiita.com/fuuchin/items/3081c84b5659b3d78bf6#flat)
- [5つ目、findLastメソッド](https://qiita.com/fuuchin/items/3081c84b5659b3d78bf6#findlast)
- [6つ目、findLastIndexメソッド](https://qiita.com/fuuchin/items/3081c84b5659b3d78bf6#findlastindex)
- [7つ目、Array.of](https://qiita.com/fuuchin/items/3081c84b5659b3d78bf6#arrayof)
- [8つ目、copyWithinメソッド](https://qiita.com/fuuchin/items/3081c84b5659b3d78bf6#copywithin)


# length

[MDNはこちら](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/length)

◎ 配列の長さを取得できる。

**※ちなみにですがこれはメソッドではなくプロパティです**

注意するべきことは、配列は、0番目、1番目、2番目、、と数えていくのに、
長さはちゃんと1から数えた長さなのです。

```javascript: サンプルコード：数えてクレール
let array1 = [1, 2, 5, 9, 10];
console.log(array1.length); // 5

let array2 = ['太郎', '次郎', '三郎', '寝太郎'];
console.log(array2.length); // 4

let array3 = [];
console.log(array3.length); // 0 ← もし0から数えていたらこんな配列の長さを求めるときにややこしい
```

また、長さを取得するだけでなく、長さを変更することもできます。
```javascript: サンプルコード：長さを変えてクレール
let arr = [1, 2, 5, 9, 10, 8, 5, 7, 10, 12, 5, 9, 10];

arr.length = 5;
console.log(arr); // [1, 2, 5, 9, 10] ← 最初の5つが残る！

arr.length = 0;
console.log(arr); // [] ← 空の配列になる！
```

# at

[MDNはこちら](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/at)

◎ 配列のインデックスを指定しその要素を取得できる。

（ここからはメソッドなので安心してください）

って**ちょっと待てー！**
それって **`arr[0]`とかで できるんじゃないのかー！！**
って思いますよね。

まあとりあえずサンプルコードを見てみましょう。

```javascript: サンプルコード：配列取得するんだー！
let arr = [1, 2, 5, 9, 3, 7, 10];

let value1 = arr.at(1);
console.log(value1); // 2 ← `arr[0]`と同じく普通に使える

// ここからは最後の要素を取得する話

let value2 = arr[arr.length - 1]; // lengthは1から数えるので1を引く
console.log(value2); // 10

let value3 = arr.at(-1);
console.log(value3); // 10 ← あれ？なんか簡潔に書いてるやつがある。
```
1つ目の例はどっちでもいいんです。`arr[0]`でも`at(0)`でも。

3つ目の例を見てください。
2つ目の例と同じく最後の要素を取り出そうとしているのですが、こっちの方が簡潔に書いてますよね。
っていうかインデックスに負の値ってどういうこと！？ですが、

`-1`なら最後から1つ目の要素（一番最後）
`-2`なら最後から2つ目の要素

です。
これは、普通の`arr[0]`の方ではできません。
このメソッドを使う意味は分かったでしょうか。

# fill

[MDNはこちら](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/fill)

◎ 指定した部分をある要素で埋め尽くす

第一引数：何を、
第二引数：どこから、（省略可　省略したら0から）
第三引数：どこまで、（省略可　省略したら最後まで）
埋め尽くす。という感じです。
なお、終了位置ちょうどは埋め尽くされません。

呼び出された`元の配列が変更されます`。

```javascript: サンプルコード：埋め尽くーす
let array1 = [1, 2, 3, 4];

console.log(array1.fill(0, 1, 3)); // [1, 0, 0, 4] ← 1～2番目を埋め尽くす

let array2 = [1, 2, 3, 4];

console.log(array2.fill(5, 1)); // [1, 5, 5, 5] ← 1番目以降をすべて埋め尽くす

let array3 = [1, 2, 3, 4];

console.log(array3.fill(6)); // [6, 6, 6, 6] ← 指定していないのですべて埋め尽くす
```

# flat

[MDNはこちら](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/flat)

##### 《 おもなメソッドの役割 》

◎ 配列in配列になっているものの、中の配列のかっこを外す

呼び出された`元の配列が変更されます`。

```javascript: サンプルコード：かっこを外す
const arr1 = [0, 1, 2, [3, 4]];

console.log(arr1.flat()); // [0, 1, 2, 3, 4] ← かっこが外れた！

const arr2 = [0, 1, 2, [[[3, 4]]]];

console.log(arr2.flat(2)); // [0, 1, 2, [3, 4]] ← かっこが2つ分外れた！
```


# findLast

[MDNはこちら](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/findLast)

##### 《 おもなメソッドの役割 》

① 渡した関数（条件）に当てはまる（trueが返る）配列の要素がないか`配列の最後`から見て探していく。
② あったらの配列の要素 が返ってくる。
③ 見つからなかった場合はundefinedが返ってくる。
④ trueが返る配列の要素がいくつもある場合は、最初に見つかった要素が返ってくる。

findメソッドというものもあります。それは、順番に見て探します。

https://qiita.com/fuuchin/items/8c14164cb4ef886f09e0#find

見ていく順番が違うだけなので、↑の記事を参考にしていただければと思います。

# findLastIndex

[MDNはこちら](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/findLastIndex)

##### 《 おもなメソッドの役割 》

① 渡した関数`（条件）に当てはまる`（trueが返る）配列の要素がないか`最後の要素から見て探していく`。
② あったらの`配列のインデックス`が返ってくる。
③ 見つからなかった場合は`-1`が返ってくる。
④ trueが返る配列の要素がいくつもある場合は、最初に見つかったインデックスが返ってくる。


findIndexメソッドというものもあります。それは、順番に見て探します。

https://qiita.com/fuuchin/items/8c14164cb4ef886f09e0#findindex

見ていく順番が違うだけなので、↑の記事を参考にしていただければと思います。（これもかよ）

# Array.of

[MDNはこちら](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/of)

##### 《 おおまかなメソッドの役割 》

◎ 引数の要素から、配列を作る

```javascript:こんな配列の作り方
let arr1 = Array.of(7);
console.log(arr1); // [7]

let arr2 = Array.of('太郎', '寝太郎');
console.log(arr2); // ['太郎', '寝太郎']
```

# copyWithin

[MDNはこちら](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/copyWithin)

##### 《 おおまかなメソッドの役割 》

◎ 配列のサイズを変更せずに、配列の一部を同じ配列内の別の場所にコピー

第一引数：どこのインデックスに、
第二引数：どこのインデックスから、
第三引数：どこのインデックスまでを、（省略可　省略すると最後までコピーされる）
コピーする。という感じです。

なお、コピーする終了位置ちょうどはコピーされません。

```javascript:サンプルコード：寝太郎が増えていく
let arr1 = ['太郎', '次郎', '三郎', '太郎', '次郎', '三郎', '寝太郎', '寝太郎2'];
let netaroArr1 = arr1.copyWithin(0, 6, 7);
console.log(netaroArr1); // ['寝太郎', '次郎', '三郎', '太郎', '次郎', '三郎', '寝太郎', '寝太郎2'] ← 0番目に寝太郎が入った！

let arr2 = ['太郎', '次郎', '三郎', '太郎', '次郎', '三郎', '寝太郎', '寝太郎2'];
let netaroArr2 = arr2.copyWithin(1, 6);
console.log(netaroArr2); // ['太郎', '寝太郎', '寝太郎2', '太郎', '次郎', '三郎', '寝太郎', '寝太郎2'] ← 1、2番目に寝太郎と寝太郎2が入った！（サイズを変えないため2番目も編集される）
```

#### 最後に

ほかのメソッドもまた別の記事などに追加していこうと思います。

ありがとうございました～