みなさんこんにちは、現役エンジニアのサメハックです
未経験からWebエンジニアに転職し、
現在正社員として5年働いたのちフリーランスとして独立しました。
JavaScriptの解説シリーズです。
今回は配列の要素を削除する方法について学んでいきましょう!
駆け出しエンジニアや未経験の方、
また新入社員を指導する先輩社員にとっても
わかりやすいように解説していきます!
この記事を読むと・・・
- 配列の最後に要素が削除出来る
- 配列の先頭に要素が削除出来る
- 配列の任意の位置の要素が削除出来る
![](https://samehack.com/wp-content/uploads/2021/10/1-320x180.jpg)
【JavaScript】配列の作り方【array】
この記事を読むと・・・
配列の作り方がわかる
配列のデータの取得ができる
配列とオブジェクトの違いがわかる
配列操作を覚えよう!
配列の知識がない人はこの記事を参考にしてね!
配列の知識がない人はこの記事を参考にしてね!
配列の最後の要素を削除しよう
![](https://samehack.com/wp-content/uploads/2022/11/meeting-2284501_1920-1024x640.jpg)
配列の最後の要素を削除する構文
配列.pop();
配列の最後の要素が削除できるよ!
実際に動かしてみよう!
// 配列の宣言
const userList = ["サメハック", "ねこハック", "いぬハック"];
// 配列の最後の要素を削除
userList.pop();
console.log(userList);
【出力結果】
[ 'サメハック', 'ねこハック' ]
配列の先頭の要素を削除しよう
![](https://samehack.com/wp-content/uploads/2022/11/sponge-g0b2b02936_1920-1024x592.jpg)
配列の先頭の要素を削除する構文
配列.shift(要素);
配列の先頭の要素が削除できるよ!
実際に動かしてみよう!
// 配列の宣言
const userList = ["サメハック", "ねこハック", "いぬハック"];
// 配列の先頭の要素を削除
userList.shift();
console.log(userList);
【出力結果】
[ 'ねこハック', 'いぬハック' ]
配列の指定の要素を削除しよう
![](https://samehack.com/wp-content/uploads/2022/11/tree-g025bdc1a9_1280-1024x637.jpg)
配列の指定の要素を削除する構文
配列.splice(開始番号, 要素数);
配列の指定位置から指定した数の要素が削除できるよ!
実際に動かしてみよう!
// 配列の宣言
const userList = ["サメハック", "ねこハック", "いぬハック", "やぎハック"];
// 配列の1番目から2つの要素を削除
userList.splice(1, 2);
console.log(userList);
【出力結果】
[ 'サメハック', 'やぎハック' ]
ポイントは、配列の番号は0オリジンなのに対して
削除したい要素数は1オリジンなところだよ!
削除したい要素数は1オリジンなところだよ!
まとめ
![](https://samehack.com/wp-content/uploads/2021/11/dfe65cc8c5d3185e7b92ade5af4cc6bb-4-1024x264.jpg)
- 配列の最後に要素を削除 → pop
- 配列の先頭に要素を削除 → shift
- 配列の指定の要素を削除 → splice
![](https://samehack.com/wp-content/uploads/2022/03/JavaScript-5-320x180.jpg)
【JavaScript】配列を並び替えよう!【sort】
![](https://samehack.com/wp-content/uploads/2021/09/00c3d3cf1d32995d7b5414ac551d13f3.png)
満足いただけたら、1クリックなのでSNSフォローしてもらえると嬉しいです🦈