内容
JavaScriptでは関数に渡される引数を可変長にすることができるRest演算子と、
配列の中身を展開するSpread演算子という便利な仕組みがあります。
今回はRest演算子について説明します。
Vueのソースコードで説明していきます。
Rest演算子
下記のコードではrestSampleメソッドが定義しています。引数を５つ指定していて、引数で受け取った値をconsoleに出力する単純な処理です。
<template>
<div>
<button @click="restSample(1,2,3,4,5)">test</button>
</div>
</template>
<script>
methods: {
restSample(a,b,c,d,e) {
const numbers = [a,b,c,d,e];
numbers.forEach(number => console.log(number));
},
}
</script>
では、呼び出す側でrestSample(1,2,3,4,5,6)のようにconsoleに出力したい数値に6を加えた場合、どうしたらいいでしょうか。
メソッドの定義側も修正する必要があり、ちょっと面倒ですし引数がさらに増えた場合また修正が必要になります。
// 引数にfを追加 restSample(a,b,c,d,e,f) { const numbers = [a,b,c,d,e,f]; numbers.forEach(number => console.log(number)); },
こういったときにRest演算子が役立ちます。Rest演算子では引数を可変長にすることができます。
<template>
<div>
<button @click="restSample(1,2,3,4,5,6)">test</button>
</div>
</template>
<script>
methods: {
restSample(...numbers) {
numbers.forEach(number => console.log(number));
},
}
</script>
関数の引数に「…引数名」と書くことで引数を可変長の配列にように扱うことができます。これがRest演算子です。
restSampleでは引数を...numbersと書くことで、渡ってきた引数（1,2,3,4,5,6）を全て処理できています。
可変長の引数なので、引数がさらに増えても問題ありません。
<template>
<div>
<button @click="restSample(1,2,3,4,5,6,7,8,9,10)">test</button>
</div>
</template>
<script>
methods: {
restSample(...numbers) {
numbers.forEach(number => console.log(number));
},
}
</script>
