JavaScriptで配列の要素を変更する

JavaScript備忘録 Vol.5

目次

• 配列の要素変更

今回もJavaScriptの記事になっています。

配列の要素変更

今回は配列の要素を変更する方法を見ていきましょう

1. unshift()
2. push()
3. shift()
4. pop()
5. splice()

全て例文で見ていきましょう。

まずはベースとなる例文

{
  const prices = [120, 110, 100, 90];

  console.log(prices);
}

要素が4つ入った配列ですね

では一つずつ見ていきます。

1. unshift( )

{
  const prices = [120, 110, 100, 90];
  prices.unshift(130);

  console.log(prices);
}

配列名.unshift( 要素 )とすることで配列の先頭に要素を追加することができます。

2. push( )

{
  const prices = [120, 110, 100, 90];
  prices.push(80);

  console.log(prices);
}

配列名.push( 要素 )とすることで配列の最後尾に要素を追加することができます。

3. shift( )

{
  const prices = [120, 110, 100, 90];
  prices.shift();

  console.log(prices);
}

配列名.shift( )とすることで配列の先頭の要素を削除することができます。

4. pop( )

{
  const prices = [120, 110, 100, 90];
  prices.pop();

  console.log(prices);
}

配列名.pop( )とすることで配列の最後尾の要素を削除することができます。 shiftとpopについては1つの要素しか扱えないので( )内に値を入れる必要はありません。

5. splice( )

splice()は上記4つより若干複雑になっています。

splice(変化が開始する位置, 削除数)

というように第一引数、第二引数を記述して使います。

では例文

{
  const prices = [120, 110, 100, 90];

  console.log(prices);
}

この配列の真ん中2つの要素を削除したい場合

{
  const prices = [120, 110, 100, 90];
  prices.splice(1, 2);

  console.log(prices);
}

このようにsplice( )を使うことによって実現できます。

今回の場合は

インデックス番号0: 120
インデックス番号1: 110
インデックス番号2: 100
インデックス番号3: 90

となっており

変化を開始したい位置はインデックス番号1
削除したい要素数はインデックス番号1の110とインデックス番号2の100の2つなので prices.splice(1, 2);

となります。

さらに、このsplice( )、値を変更することもできます。

例えばこの配列の1番目、2番目の要素を変更したい場合、

上記に加え、第三引数以降を追加します。

どういうことかというと

{
  const prices = [120, 110, 100, 90];
  prices.splice(1, 2, 200, 300);

  console.log(prices);
}

splice()の部分を見てみると

第一引数、第二引数は先ほどと同じことをしています。第三引数以降に追加したい要素を記述しています。

そうすることでこのような実行結果になります。

今回も軽めな内容でした。

もう少し経ったら画面にいろいろ描画していく方法を見ていきたいと思います。

今しばらくコンソールやメソッドにお付き合いください。

今回はここまで

次回は・・・まだまだJS！

それではまた次回！