Java Scriptの基礎その14 JavaScriptのSpread演算子とRESTパラメータの基礎
イントロダクション
JavaScriptには、配列やオブジェクトを操作するための便利な機能としてSpread演算子とRESTパラメータがあります。これらの機能を活用することで、コードの可読性が向上し、効率的にデータを処理できます。この記事では、具体的なコード例を通じて、Spread演算子とRESTパラメータの基本的な使い方とそのメリットを解説します。
配列の操作
配列の作成と展開
まずは、配列の基本的な操作について説明します。以下のコードでは、配列の作成と展開について示しています。
//基本的な話
const arraySample = [4, 5, 6];
//悪い例
const bad_arraySample = [
1,
2,
3,
arraySample[0],
arraySample[1],
arraySample[2],
];
console.log(bad_arraySample);
このコードでは、bad_arraySampleという配列に、arraySampleの要素を手動で追加しています。これは冗長で、可読性が低いです。結果は以下のようになります:
[1, 2, 3, 4, 5, 6]
Spread演算子を使った良い例
次に、Spread演算子を使用した例を見てみましょう。
//良い例
const good_arraySample = [1, 2, 3, ...arraySample];
console.log(good_arraySample);
Spread演算子(...)を使うことで、配列を簡単に展開して追加できます。これにより、コードが簡潔で読みやすくなります。結果は以下の通りです:
[1, 2, 3, 4, 5, 6]
Spread演算子の応用
配列のネストと展開
Spread演算子は、配列のネストにも使用できます。
const arraySpread = [1, 2, 3, [4, 5, 6]];
console.log(arraySpread);
結果は次のようになります:
[1, 2, 3, [4, 5, 6]]
複数の配列の結合
複数の配列を結合する場合にも、Spread演算子が役立ちます。
const newMainMenu = [...ramenShop.mainMenu, "塩ラーメン"];
console.log(newMainMenu);
このコードでは、ramenShop.mainMenuの要素に新しい要素「塩ラーメン」を追加しています。結果は以下の通りです:
["醤油ラーメン", "味噌ラーメン", "豚骨ラーメン", "塩ラーメン"]
また、複数の配列を結合する例も見てみましょう。
const allMenu = [...ramenShop.mainMenu, ...ramenShop.sideMenu];
console.log(allMenu);
このコードでは、mainMenuとsideMenuを結合しています。結果は以下のようになります:
["醤油ラーメン", "味噌ラーメン", "豚骨ラーメン", "餃子", "唐揚げ", "搾菜"]
RESTパラメータの使用
配列から値を抽出
RESTパラメータを使用すると、配列から特定の値を抽出し、残りの値を別の配列にまとめることができます。
const [a, b, ...otherNumber] = [1, 2, 3, 4, 5, 6];
console.log(a, b, otherNumber);
この例では、aとbにそれぞれ1と2が代入され、残りの値がotherNumberに配列として格納されます。結果は以下の通りです:
1 2 [3, 4, 5, 6]
関数への適用
RESTパラメータは関数にも適用できます。
const showNumbers = function (...numbers) {
console.log(numbers);
};
showNumbers(2, 3);
showNumbers(1, 2, 3, 4, 5);
showNumbers関数は、引数を配列として受け取るため、どんな数の引数でも処理できます。結果は以下の通りです:
[2, 3]
[1, 2, 3, 4, 5]
関数内での計算
RESTパラメータを使った関数内での計算も簡単です。
const sumNumbers = function (...numbers) {
let sum = 0;
for (let i = 0; i < numbers.length; i++) sum += numbers[i];
console.log(sum);
};
const arrayToSum = [23, 5, 6];
sumNumbers(...arrayToSum);
この関数では、任意の数の引数を受け取り、それらを合計して出力します。結果は以下の通りです:
34
オブジェクトの操作
オブジェクトの結合
Spread演算子はオブジェクトの結合にも使用できます。
const addDataRamenShop = {
foundIn: 1970,
...ramenShop,
founder: "ラーメンマン",
};
console.log(addDataRamenShop);
新しいプロパティを追加しつつ、既存のオブジェクトを結合できます。結果は以下の通りです:
{
foundIn: 1970,
shopName: "リアルラーメンマン",
mainMenu: ["醤油ラーメン", "味噌ラーメン", "豚骨ラーメン"],
sideMenu: ["餃子", "唐揚げ", "搾菜"],
otsumami: [],
orderOtsumami: function (snack_1, snack_2, snack_3) { ... },
orderRamen: function (main, ...toping) { ... },
founder: "ラーメンマン"
}
オブジェクトの更新
オブジェクトのプロパティを簡単に更新することもできます。
console.log(ramenShop.shopName);
ramenShop.shopName = "復刻リアルラーメンマン";
console.log(ramenShop.shopName);
このコードでは、shopNameプロパティを更新しています。結果は以下の通りです:
リアルラーメンマン
復刻リアルラーメンマン
RESTバージョンの関数
RESTパラメータを使って、トッピングのリストを受け取る関数も作成できます。
ramenShop.orderRamen("塩ラーメン", "ねぎ", "ゆで卵", "チャーシュー");
結果は次のようになります:
へいおまちどう!塩ラーメンだよ。トッピングはねぎ,ゆで卵,チャーシュー
まとめ
JavaScriptのSpread演算子とRESTパラメータを使うことで、配列やオブジェクトの操作が非常にシンプルで効果的になります。これらの機能を活用することで、コードの可読性とメンテナンス性が大幅に向上します。今回の記事を通じて、これらの便利な機能の基本的な使い方と応用方法を理解していただけたら幸いです。
Githubでも公開してるよ!
先ほどのコードはGithubで公開しているよ。
ここ見てね!
この記事が気に入ったらサポートをしてみませんか?