みなさんこんにちは、現役エンジニアのサメハックです
未経験からWebエンジニアに転職し、
現在正社員として5年働いたのちフリーランスとして独立しました。
JavaScriptの解説シリーズです。
今回は配列の先頭&最後に要素を追加する方法について学んでいきましょう!
駆け出しエンジニアや未経験の方、
また新入社員を指導する先輩社員にとっても
わかりやすいように解説していきます!
この記事を読むと・・・
- 配列の最後に要素が追加出来る
- 配列の先頭に要素が追加出来る
![](https://samehack.com/wp-content/uploads/2021/10/1-320x180.jpg)
【JavaScript】配列の作り方【array】
この記事を読むと・・・
配列の作り方がわかる
配列のデータの取得ができる
配列とオブジェクトの違いがわかる
配列操作を覚えよう!
配列の知識がない人はこの記事を参考にしてね!
配列の知識がない人はこの記事を参考にしてね!
配列の最後に要素を追加しよう
![](https://samehack.com/wp-content/uploads/2022/11/laptop-1150663_1920-1024x614.jpg)
配列の最後に要素を追加する構文
配列.push(要素);
一般的に配列に要素を追加する際にはこれを使うよ!
実際に動かしてみよう!
// 配列の宣言
const userList = ["サメハック", "ねこハック", "いぬハック"];
// 配列の最後に要素を追加
userList.push("やぎハック");
console.log(userList);
【出力結果】
[ 'サメハック', 'ねこハック', 'いぬハック', 'やぎハック' ]
配列の先頭に要素を追加しよう
![](https://samehack.com/wp-content/uploads/2022/11/numbers-g2a735f037_1920-1024x683.jpg)
配列の先頭に要素を追加する構文
配列.unshift(要素);
これは使用頻度が低いよ!
実際に動かしてみよう!
// 配列の宣言
const userList = ["サメハック", "ねこハック", "いぬハック"];
// 配列の先頭に要素を追加
userList.unshift("やぎハック");
console.log(userList);
【出力結果】
[ 'やぎハック', 'サメハック', 'ねこハック', 'いぬハック' ]
まとめ
![](https://samehack.com/wp-content/uploads/2021/11/dfe65cc8c5d3185e7b92ade5af4cc6bb-4-1024x264.jpg)
- 配列の最後に要素を追加 → push
- 配列の先頭に要素を追加 → unshift
ちなみに別で並び替えを行いたいときはソート機能をつかいます。
記述が難しいので、以下の記事を参考にしてください。
![](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フォローしてもらえると嬉しいです🦈