【JavaScript】配列の先頭,最後,指定位置の要素を削除しよう!【pop,shift,splice】

JavaScript

みなさんこんにちは、現役エンジニアのサメハックです

未経験からWebエンジニアに転職し、
現在正社員として5年働いたのちフリーランスとして独立しました。

JavaScriptの解説シリーズです。

今回は配列の要素を削除する方法について学んでいきましょう!

駆け出しエンジニアや未経験の方、
また新入社員を指導する先輩社員にとっても
わかりやすいように解説していきます!

この記事を読むと・・・
  • 配列の最後に要素が削除出来る
  • 配列の先頭に要素が削除出来る
  • 配列の任意の位置の要素が削除出来る
【JavaScript】配列の作り方【array】
この記事を読むと・・・ 配列の作り方がわかる 配列のデータの取得ができる 配列とオブジェクトの違いがわかる
配列操作を覚えよう!
配列の知識がない人はこの記事を参考にしてね!

配列の最後の要素を削除しよう

配列の最後の要素を削除する構文

配列.pop();
配列の最後の要素が削除できるよ!

実際に動かしてみよう!

// 配列の宣言
const userList = ["サメハック", "ねこハック", "いぬハック"];

// 配列の最後の要素を削除
userList.pop();

console.log(userList);

【出力結果】

[ 'サメハック', 'ねこハック' ]

配列の先頭の要素を削除しよう

配列の先頭の要素を削除する構文

配列.shift(要素);
配列の先頭の要素が削除できるよ!

実際に動かしてみよう!

// 配列の宣言
const userList = ["サメハック", "ねこハック", "いぬハック"];

// 配列の先頭の要素を削除
userList.shift();

console.log(userList);

【出力結果】

[ 'ねこハック', 'いぬハック' ]

配列の指定の要素を削除しよう

配列の指定の要素を削除する構文

配列.splice(開始番号, 要素数);
配列の指定位置から指定した数の要素が削除できるよ!

実際に動かしてみよう!

// 配列の宣言
const userList = ["サメハック", "ねこハック", "いぬハック", "やぎハック"];

// 配列の1番目から2つの要素を削除
userList.splice(1, 2);

console.log(userList);

【出力結果】

[ 'サメハック', 'やぎハック' ]
ポイントは、配列の番号は0オリジンなのに対して
削除したい要素数は1オリジンなところだよ!

まとめ

  • 配列の最後に要素を削除 → pop
  • 配列の先頭に要素を削除 → shift
  • 配列の指定の要素を削除 → splice
【JavaScript】配列を並び替えよう!【sort】

満足いただけたら、1クリックなのでSNSフォローしてもらえると嬉しいです🦈

タイトルとURLをコピーしました