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

はじめに

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

配列メソッドのパターン

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

操作パターン

• 加工
• 追加、削除
• 並べ替え
• 要素の取得
• 検索

大元の配列を書き換えるパターン

※例を提示してますが、よしなに結果のクリア、配列を再度宣言してます
結果をクリアした場合、//*◯◯の場合としてます

配列を指定した値に書き換える(加工)

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

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を返す

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(追加したい要素１, 追加したい要素２,...);
  • 戻り値は追加後の要素の数

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()
  • 戻り値は並びが反転した配列

const num = [1, 2, 3];

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

先頭の要素を削除する

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

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みてね）
  • 戻り値は並び替えられた関数

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に指定の要素を追加
  • 戻り値は、取り除かれた要素の配列
    • １つのみ削除は要素１の配列
    • 要素が削除されなかった場合は空の配列

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, ...)
  • 戻り値は要素追加後の要素数

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)
  • 戻り値は変更された配列

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,...);
  • 戻り値は新しい配列

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

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番号

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番号
    • みつからなかった場合は−１を返す

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

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

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

要素を連結した文字列を生成する

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

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

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

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

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

配列の一部をとりだして、新しい配列を作成する

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

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()メソッドを使用する
- 戻り値は、生成された文字列
- 文字列がカンマで区切られる

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

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

最後に

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