【JavaScript】配列を追加・変更・検索などする方法【まとめてみた】

記事内に広告を含みます

【JavaScript】配列を追加・変更・検索などする方法【まとめてみた】
【JavaScript】配列を追加・変更・検索などする方法【まとめてみた】

【JavaScript】配列を追加・変更・検索などする方法【まとめてみた】

配列を追加・変更する方法主にがこちら↓

・push

・pop

・unshift

・shift

・splice

・fill

・copyWithin

・sort

・reverse

・at

・slice（返り値）

・concat（返り値）

・join（返り値）

・indexOf（返り値）

・lastIndexOf（返り値）

・includes（返り値）

・flat（返り値）

順に解説してきます。

push「配列の末尾に追加」

pushメソッドを使うと、末尾に配列を追加できます。

,で区切ることで、複数追加可能です。

const fruits = ['りんご', 'おれんじ'];
fruits.push('もも', 'ぶどう');

console.log(fruits); //  ['りんご', 'おれんじ', 'もも', 'ぶどう']

pop「配列の末尾を削除」

popメソッドを使うと、配列の末尾の要素を削除できます。

const fruits = ['りんご', 'おれんじ'];
fruits.pop();

console.log(fruits); //  ['りんご']

unshift「配列の先頭に追加」

unshiftメソッドを使うと、配列の先頭に要素を追加できます。

,で区切れば複数追加可能です。

const fruits = ['りんご', 'おれんじ'];
fruits.unshift('もも', 'ぶどう');

console.log(fruits); // (4) ['もも', 'ぶどう', 'りんご', 'おれんじ']

ただ先頭につけるため、配列の順番を全部入れ替える必要があるので多少コストがかかります。

shift「配列の先頭を削除」

shiftメソッドを使うと、配列の先頭を削除することができます。

const fruits = ['りんご', 'おれんじ'];
fruits.shift();

console.log(fruits); // ['おれんじ']

ただ先頭を削除するので、配列の順番を全部入れ替える必要があり多少コストがかかります。

splice「配列の任意の場所を追加or削除」

spliceメソッドを使えば、配列の任意の場所から好きな数削除or追加できます。

引数1つ目⇒配列何番目から
引数2つ目⇒何個を削除するか（省略すると引数1つ目以降全てを）
引数3つ目⇒削除したものと置き換える（複数追加可能）

下記の場合、配列０番目から１つを削除するという意味になります。

const fruits = ['りんご', 'おれんじ'];
fruits.splice(0, 1);

console.log(fruits); // ['おれんじ']

下記の場合、配列０番目から１つを削除して、かつ削除したものを「もも」「ぶどう」に置き換えるという意味になります。

const fruits = ['りんご', 'おれんじ'];
fruits.splice(0, 1, 'もも', 'ぶどう');

console.log(fruits); // (3) ['もも', 'ぶどう', 'おれんじ']

2つ目の引数を0にすれば、削除せずに先頭に追加できます。

const fruits = ['りんご', 'おれんじ'];
fruits.splice(0, 0, 'もも', 'ぶどう');

console.log(fruits); // (4) ['もも', 'ぶどう', 'りんご', 'おれんじ']

ちなみに「-1」を指定すると末尾を示すことになり、要素よりも「-◯」が多くなると「０」という意味になります。

const fruits = ['りんご', 'おれんじ'];
fruits.splice(-1, 1);

console.log(fruits); // ['りんご'] -1が末尾を示すためおれんじが削除されます

const fruits = ['りんご', 'おれんじ'];
fruits.splice(-5, -5);

console.log(fruits); //(2) ['りんご', 'おれんじ'] -5は0を意味するため何も起こりません

fill「任意の配列を置き換える」

fillメソッドを使うと、任意の配列を好きなものに置き換えることができます。

引数1つ目⇒何に置き換えるか指定
引数2つ目⇒配列何個目から置き換えるか
引数3つ目⇒配列何個目までを置き換えるか

下記の例だと「ぶどう」という文字に配列1個目から3個目までを置き換えるという意味になります。

3個目は含まれないので注意しましょう。

const fruits = ['りんご', 'おれんじ', 'もも', 'めろん'];
fruits.fill('ぶどう', 1 ,3);

console.log(fruits); // ['りんご', 'ぶどう', 'ぶどう', 'めろん']

ちなみに引数2個目と3個目を省略すると、すべてが置き換わります。

const fruits = ['りんご', 'おれんじ', 'もも', 'めろん'];
fruits.fill('ぶどう');

console.log(fruits); //  ['ぶどう', 'ぶどう', 'ぶどう', 'ぶどう']

copyWithin「配列要素をコピーする」

copyWithinメソッドを使うと、指定した要素を指定先にコピーできます。

引数1つ目⇒コピー先を指定
引数2つ目⇒何番目からコピーするかを指定
引数3つ目⇒何番目までコピーするかを指定（3とした場合、3つ目は含まない）

const fruits = ['りんご', 'おれんじ', 'もも', 'めろん'];
fruits.copyWithin(0, 2, 3);

console.log(fruits); //  ['もも', 'おれんじ', 'もも', 'めろん']

配列自体は増えないので注意。

sort「配列の順番を並び替える」

sortメソッドを使うと、配列の文字列を並び替えることができます。

デフオルトでは文字列の辞書順でソートされるのが特徴です。

const fruits = ['りんご', 'おれんじ', 'もも', 'めろん'];
fruits.sort();

console.log(fruits); // (4) ['おれんじ', 'めろん', 'もも', 'りんご']

数値並び替えるときは、2つの値を比べたうえでソートするという実装で対応します。

引数に関数をいれ、2つの値のパラメータをつかい順番を指定。

const nums = [100, 10, 50, 300];
nums.sort((a, b) => {
  return a - b;
});

console.log(nums); //  [10, 50, 100, 300]

内容としては下記の感じになります。

a - b が負の値なら、a は b の前に来るべき
a - b が正の値なら、a は b の後に来るべき
a - b が 0 なら、順序は変更されない）

const nums = [100, 10, 50, 300];
nums.sort((a, b) => {
  console.log(a, b);
  // 10 100
  // 50 10
  // 50 100
  // 50 10
  // 300 50
  // 300 100
  return a - b;
});

console.log(nums); //  [10, 50, 100, 300]

ジト

aに入る数値、bに入る数値は配列要素の順番で入るわけではないとのこと。

reverse「配列を反転させる」

reverseメソッドを使うと、配列を反転することができます。

const fruits = ['りんご', 'おれんじ', 'もも', 'めろん'];
fruits.reverse();

console.log(fruits); // (4) ['めろん', 'もも', 'おれんじ', 'りんご']

at「指定した配列要素を取得できる」

atメソッドを使えば、指定した数値の配列要素を取得できます。

const fruits = ['りんご', 'おれんじ', 'もも', 'めろん'];

console.log(fruits.at(1)); // おれんじ

ちなみにマイナス値を入れれば、逆側から数えて取得してくれます。

const fruits = ['りんご', 'おれんじ', 'もも', 'めろん'];

console.log(fruits.at(-2)); // もも

要素よりマイナス値が多いと「undefined」が出るので注意。

slice「配列の要素を切り取る」

sliceメソッドを使うと、指定した配列の要素を切り取ることができます。

影響があるのは返り値のみなので注意。

const fruits = ['りんご', 'おれんじ', 'もも', 'めろん'];
const fruitsArray = fruits.slice(3);

console.log(fruitsArray); // ['めろん']

指定した数値の配列を切り取り、それを返り値とします。

第二引数に数値指定すれば、◯〜◯までを切り取ることが可能です。
下記の場合2番目は含まず、0~1番目を切り取っています。

const fruits = ['りんご', 'おれんじ', 'もも', 'めろん'];
const fruitsArray = fruits.slice(0, 2);

console.log(fruitsArray); //  ['りんご', 'おれんじ']

concat「配列をくっつける」

concatメソッドを使うと、配列をくっつけることができます。

影響があるのは返り値のみなので注意。

const fruits = ['りんご', 'おれんじ', 'もも', 'めろん'];
const fruitsArray = fruits.concat(['ぶどう', 'れもん'])

console.log(fruitsArray); //  ['りんご', 'おれんじ', 'もも', 'めろん', 'ぶどう', 'れもん']

join「配列要素を文字列としてくっつける」

joinメソッドを使うと、配列要素を文字列としてくっつけることができます。

影響があるのは返り値のみなので注意。

const fruits = ['りんご', 'おれんじ', 'もも', 'めろん'];
const fruitsArray = fruits.join();

console.log(fruitsArray); // りんご,おれんじ,もも,めろん

デフォルトだと「,」区切りですが、引数に区切り文字を指定できます。

const fruitsArray = fruits.join('-');
console.log(fruitsArray); // りんご-おれんじ-もも-めろん

空文字にすると区切り文字自体がなくなりますよ。

const fruitsArray = fruits.join('');
console.log(fruitsArray); // りんごおれんじももめろん

indexOf「配列の要素を検索する」

indexOfメソッドを使えば、指定した配列要素を検索することができます。

影響があるのは返り値のみなので注意。

最初にヒットするものの番号を取得↓

const fruits = ['りんご', 'おれんじ', 'もも', 'もも'];

const fruitsArray = fruits.indexOf('もも');
console.log(fruitsArray); // 2

ちなみに第二引数に数値を入れた時、その数値以降を検索してくれます。

つまり下記だと3番目以降から検索してヒットしたものの配列が返り値になります↓

const fruitsArray = fruits.indexOf('もも', 3);
console.log(fruitsArray); // 3

lastIndexOf「配列の要素を右から検索する」

lastIndexOfメソッドを使えば、指定した配列要素を右から（最後から）検索することができます。

影響があるのは返り値のみなので注意。

右からみて最初にヒットするものの番号を取得↓

onst fruits = ['りんご', 'おれんじ', 'もも', 'もも'];

const fruitsArray = fruits.lastIndexOf('もも');
console.log(fruitsArray); // 3

ちなみに第二引数に数値を入れた時、その数値以降を検索してくれます。

つまり下記だと3番目以降の右から検索してヒットしたものの配列が返り値になります↓

const fruits = ['りんご', 'おれんじ', 'もも', 'もも'];

const fruitsArray = fruits.lastIndexOf('もも', 2);
console.log(fruitsArray); // 2

includes「配列の要素を検索してboolean値を返す」

includesメソッドを使えば、指定した配列要素があるかどうかでboolean値を返します。

影響があるのは返り値のみなので注意。

例として下記のように指定すると「true」を返します。

const fruits = ['りんご', 'おれんじ', 'もも', 'めろん'];

const fruitsArray = fruits.includes('もも');
console.log(fruitsArray); // true

逆に無い要素を指定すると、falseを返します。

const fruits = ['りんご', 'おれんじ', 'もも', 'めろん'];

const fruitsArray = fruits.includes('れもん');
console.log(fruitsArray); // false

ちなみに第二引数に数値を入れた時、その数値以降を検索してくれます。

つまり下記だと3番目以降の検索してヒットしたらtrueを返し、なければfalseを返すということ↓

const fruits = ['りんご', 'おれんじ', 'もも', 'めろん'];

const fruitsArray = fruits.includes('もも', 3);
console.log(fruitsArray); // false

flat「入れ子の配列を1つにする」

flatメソッドを使えば、入れ子になった配列を1つの配列にすることができます。

影響があるのは返り値のみなので注意。

const fruits = ['りんご', 'おれんじ', 'もも', ['めろん', 'れもん']];

const fruitsArray = fruits.flat();
console.log(fruitsArray); // ['りんご', 'おれんじ', 'もも', 'めろん', 'れもん']

ちなみに第二引数に数値を入れた時、その数値分の入れ子配列をフラットに1つにしてくれます。

通常入れ子の中に入れ子があると、下記のように返りますが↓

const fruits = ['りんご', 'おれんじ', 'もも', [['めろん'], 'れもん']];

const fruitsArray = fruits.flat();
console.log(fruitsArray); // ['りんご', 'おれんじ', 'もも', Array(1), 'れもん']

引数にその分の入れ子数を入れれば、下記のように1つの配列になって返ります↓

const fruits = ['りんご', 'おれんじ', 'もも', [['めろん'], 'れもん']];

const fruitsArray = fruits.flat(2);
console.log(fruitsArray); // ['りんご', 'おれんじ', 'もも', 'めろん', 'れもん']

ちなみにflatMapという配列処理も存在します。
下記で解説しているので参考にどうぞ↓