演習課題「配列の操作 1」
右のコードでは、果物の名前の配列が定義されています。
この配列の末尾に melon と strawberry を追加し、その配列を出力するコードに書き換えてください。
プログラムを実行して、想定通り出力されれば演習課題クリアです！
期待する出力値
[ 'apple', 'banana', 'orange', 'lemon', 'melon', 'strawberry' ]
演習課題「配列の操作 2」
果物の名前の配列 fruits が定義されています。
この配列に対し、以下のことをおこなうプログラムを作成してください。
1. この配列の末尾から要素を取り除き、逐次取り除いた要素を出力する。これを 3 回おこなう。
2. 1 の後、要素が取り除かれた後の配列を出力する。
プログラムを実行して、想定通り出力されれば演習課題クリアです！
期待する出力値
melon
strawberry
lemon
[ 'apple', 'orange', 'banana' ]
演習課題「配列の操作 3」
果物の名前の配列 fruits が定義されています。
この配列の 3 番目から 5 つの要素を削除し、削除した要素の配列を出力してください。
プログラムを実行して、想定通り出力されれば演習課題クリアです！
期待する出力値
[ 'banana', 'lemon', 'strawberry', 'melon', 'watermelon' ]
＃05:配列の操作
このチャプターでは、前回のチャプターで扱った「配列」に引き続き、「配列の操作」について学びます。配列はリストのようにデータを保持しておくことができますが、データを追加したり削除する操作も配列の扱いでは重要となります。
MDN web docs
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/push
配列の末尾に要素を追加する際には push を用います。
これは引数に指定した複数の要素を同時に追加することができます。
MDN web docs
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/pop
配列の末尾から要素を削除する際には pop を用います。
こちらは末尾だけを取り除く操作になります。
また、pop は「削除された要素」を返します。
MDN web docs
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/splice
配列の指定の位置から要素を削除する際には splice を用います。
splice による削除の場合でも、pop と同様に削除された要素が返ります。
この際、削除される要素は複数になり得るため、返り値は要素一つではなく配列となります。
本講座では紹介しませんでしたが、splice は要素の削除だけではなく、削除した箇所に別のデータを挿入し直すこともできます。
ある「モノ」そのものに結びついた処理のことを「メソッド」と呼ぶことがあります。
今回の配列に関する push/pop/splice はいずれも「配列自身」に結びついており、これらはメソッドの一例です。
また、メソッドは「モノ」のプロパティを変化させることも多く、今回は「要素」や「長さ」が変化しています。
MDN web docs
https://developer.mozilla.org/ja/docs/Learn/JavaScript/Building_blocks/Return_values
関数やメソッド等を実行した結果、返される値を「戻り値」と呼びます。
関数やメソッドなどの挙動を把握するためには、戻り値をしっかり把握することが重要です。
今回出てきました pop と splice では「削除された要素が返される」という点では同じですが、 pop は「その要素」、splice では「要素の配列」となっている点に注意しましょう。