こんにちは！
今日は、配列を使って遊んでみました。
配列の処理には、色々ありますが、今回は、「要素の追加・削除」です！
要素を追加する
まずは、要素を追加してみましょう。
要素を追加するのに、「配列の末尾に追加する方法」と「配列の先頭に追加する方法」の2つがあります。
1. 末尾に追加してみた！
ますは、末尾に追加する方法です。push()メソッドを使います。
push()メソッドの書き方は以下です。
元の配列.push(追加したい要素);
let array1 = ["わらびもち", "大福", "みたらし団子"];
let array1_2 = array1.push("柏餅");
console.log(array1);
// ["わらびもち", "大福", "みたらし団子", "柏餅"]
console.log(array1_2);
// 4
元の配列(上の例ではarray1)の末尾には、要素が追加され、要素が追加された配列の要素数(上の例では4)を返す。
2. 先頭に追加してみた！
続いて、配列の先頭に要素を追加してみます。unshift()メソッドを使います。
unshift()メソッドの書き方は以下です。
元の配列.unshift(追加したい要素);
let array2 = ["チョコレート", "源氏パイ", "パックンチョ"];
let array2_2 = array2.unshift("おせんべい");
console.log(array2);
// ["おせんべい", "チョコレート", "源氏パイ", "パックンチョ"]
console.log(array2_2);
// 4
きちんと、先頭に要素(おせんべい)が追加され、要素数も、4になっていますね！
要素を削除する
それでは、要素を削除してみましょう。
要素を追加したときと同じく、要素を削除するのに、「配列の末尾から削除する方法」と「配列の先頭から削除する方法」の2つがあります。
末尾から削除してみた！
まずは、末尾から削除してみましょう。pop()メソッドを使います。
pop()メソッドの使い方は以下です。
元の配列.pop();
let array3 = ["コーヒー", "オレンジジュース", "りんごジュース"];
let array3_2 = array3.pop();
console.log(array3);
// ["コーヒー", "オレンジジュース"]
console.log(array3_2);
// りんごジュース
元の配列の末尾から要素を削除し、削除された要素を返します。
元の配列(上の例ではarray3)の末尾から、オレンジジュースが消えています。また、削除された、りんごジュースが返ってきていますね！
先頭から削除してみた！
続いて、先頭から、要素を削除してみましょう！shift()メソッドを使います。
shift()メソッドの使い方は以下です。
元の配列.shift();
let array4 = ["ティラミス", "ショートケーキ", "モンブラン", "ホットケーキ"];
let array4_2 = array4.shift();
console.log(array4);
// ["ショートケーキ", "モンブラン", "ホットケーキ"]
console.log(array4_2);
// ティラミス
きちんと、元の配列は先頭にあったティラミスが削除されています。削除されたティラミスも返されてきましたね！
おまけ：配列にオブジェクトを要素として追加・削除できるの？
最後に、配列の要素として、オブジェクトを追加する場合、削除する場合、上で紹介した4種のメソッド(push()、pop()、unshift()、shift())を使ったら、どうなるのか、やってみました！
末尾に追加(push()メソッド)
let array5 = ["マグロ", "さんま", "いか", "サーモン", "真鯛"];
let obj = {name: "いくら", price: 298};
let array5_2 = array5.push(obj);
console.log(array5);
// ["マグロ", "さんま", "いか", "サーモン", "真鯛", {name: "いくら", price: 298}]
console.log(array5_2);
// 6
末尾から削除(pop()メソッド)
let array5_3 = array5.pop();
console.log(array5);
// ["マグロ", "さんま", "いか", "サーモン", "真鯛"]
console.log(array5_3);
// {name: "いくら", price: 298}
先頭に追加(unshift()メソッド)
let array6 = ["にんじん", "レタス", "白菜", "かぼちゃ"];
let obj2 = {name: "きゅうり", price: 130};
let array6_2 = array6.unshift(obj2);
console.log(array6);
// [{name: "きゅうり", price: 130}, "にんじん", "レタス", "白菜", "かぼちゃ"]
console.log(array6_2);
// 5
先頭から削除
let array6_3 = array6.shift();
console.log(array6);
// ["にんじん", "レタス", "白菜", "かぼちゃ"]
console.log(array6_3);
// {name: "きゅうり", price: 130}
おわりに
今日は、配列の要素を追加したり、削除したりするためのメソッドを使って、遊んでみました！
お読みいただき、ありがとうございました！
私自身、まだまだ初心者ですので、もし、間違いや補足などございましたら、コメントや編集リクエストを、お願い致します！
参考資料
柳井政和著 『JavaScript[完全]入門』(2021)