記事の目的
ども、N予備校でプログラミングを勉強中のふーちんです！
この記事ではJavaScript配列関係のメソッドの使い方、8つ紹介・説明しまーす。
length・at・fill・flat・findLast・findLastIndex・Array.of・copyWithinです！
（メソッドじゃないのもありますが）
初心者にもわかりやすく（自分も初心者ですが）説明したつもりです。
目次
- 1つ目、length
- 2つ目、atメソッド
- 3つ目、fillメソッド
- 4つ目、flatメソッド
- 5つ目、findLastメソッド
- 6つ目、findLastIndexメソッド
- 7つ目、Array.of
- 8つ目、copyWithinメソッド
length
◎ 配列の長さを取得できる。
※ちなみにですがこれはメソッドではなくプロパティです
注意するべきことは、配列は、0番目、1番目、2番目、、と数えていくのに、
長さはちゃんと1から数えた長さなのです。
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から数えていたらこんな配列の長さを求めるときにややこしい
また、長さを取得するだけでなく、長さを変更することもできます。
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
◎ 配列のインデックスを指定しその要素を取得できる。
（ここからはメソッドなので安心してください）
ってちょっと待てー！
それって arr[0]とかで できるんじゃないのかー！！
って思いますよね。
まあとりあえずサンプルコードを見てみましょう。
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
◎ 指定した部分をある要素で埋め尽くす
第一引数：何を、
第二引数：どこから、（省略可 省略したら0から）
第三引数：どこまで、（省略可 省略したら最後まで）
埋め尽くす。という感じです。
なお、終了位置ちょうどは埋め尽くされません。
呼び出された元の配列が変更されます。
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
《 おもなメソッドの役割 》
◎ 配列in配列になっているものの、中の配列のかっこを外す
呼び出された元の配列が変更されます。
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
《 おもなメソッドの役割 》
① 渡した関数（条件）に当てはまる（trueが返る）配列の要素がないか配列の最後から見て探していく。
② あったらの配列の要素 が返ってくる。
③ 見つからなかった場合はundefinedが返ってくる。
④ trueが返る配列の要素がいくつもある場合は、最初に見つかった要素が返ってくる。
findメソッドというものもあります。それは、順番に見て探します。
見ていく順番が違うだけなので、↑の記事を参考にしていただければと思います。
findLastIndex
《 おもなメソッドの役割 》
① 渡した関数（条件）に当てはまる（trueが返る）配列の要素がないか最後の要素から見て探していく。
② あったらの配列のインデックスが返ってくる。
③ 見つからなかった場合は-1が返ってくる。
④ trueが返る配列の要素がいくつもある場合は、最初に見つかったインデックスが返ってくる。
findIndexメソッドというものもあります。それは、順番に見て探します。
見ていく順番が違うだけなので、↑の記事を参考にしていただければと思います。（これもかよ）
Array.of
《 おおまかなメソッドの役割 》
◎ 引数の要素から、配列を作る
let arr1 = Array.of(7);
console.log(arr1); // [7]
let arr2 = Array.of('太郎', '寝太郎');
console.log(arr2); // ['太郎', '寝太郎']
copyWithin
《 おおまかなメソッドの役割 》
◎ 配列のサイズを変更せずに、配列の一部を同じ配列内の別の場所にコピー
第一引数：どこのインデックスに、
第二引数：どこのインデックスから、
第三引数：どこのインデックスまでを、（省略可 省略すると最後までコピーされる）
コピーする。という感じです。
なお、コピーする終了位置ちょうどはコピーされません。
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番目も編集される）
最後に
ほかのメソッドもまた別の記事などに追加していこうと思います。
ありがとうございました～