Help us understand the problem. What is going on with this article?

【自分用メモ】Javascript(ES6)のrest演算子とspread演算子について

More than 1 year has passed since last update.

最近Javascript(ES6)の学習をしており、今日もいくつか文法を習ったのでメモ程度に残しておきます。

rest演算子

例えば配列ではなく、以下のようにいくつもの数字の合計を求めたいが、数字がどんどん増えていくときに、いちいち引数の部分を修正していくのは現実的ではない。

function addNumvers(a,b,c,d,e,f){
 const numbers = [a,b,c,d,e,f] //配列にする
 return numbers.reduce((sum,number) => {
 return sum + number;
},0);
}

//この中の数字が可変的であるとする
addNumbers(a,b,c,d,e,f)

そんなときにrest演算子が使えて、引数のところに(...numbers)を記述する。
これにより、入ってきた数値を配列に変換し、配列として、関数の中で使うことができる。

function addNumbers(...numbers){

//reduceで合計値を求める
 return number.reduce((sum,number) => {
   return sum + number;
},0);
}


addNumbers(1,2,3,4,5,6,7); //いくらでも数字を増やしても大丈夫

spread演算子

このような配列があり、配列を組み合わせて一つの配列にしたいとする。

const defaultFruits = ['りんご','バナナ'];
const userFavoriteFruits = ['オレンジ','ぶどう'];

//ES5までの記述。concatを使う。
defaultFruits.concat(userFavoriteFruits);
//結果
['りんご','バナナ','オレンジ','ぶどう']

//spread演算子は、以下のような記述をし配列を一つにする。
[...defaultFruits,...userFavoriteFruits]

//結果
['りんご','バナナ','オレンジ','ぶどう']

spread演算子の利点

以下のように、要素を追加して新しい配列を作ることができるところ。

[...defaultFruits,'新しい要素',...userFavoriteFruits]
//結果

['りんご','バナナ','新しい要素','オレンジ','ぶどう']

直感的にわかりやすい。

_ayk_study
趣味でプログラミングの勉強をしている26歳地方事務職員です。現在RubyonrailsとJavascriptとVue.jsを独学しています。簡単なポートフォリオサイトも作成しました。転職も視野に入れています。将来は、自分のスキルを使いながら、自分の力で稼げるようになりたいです。
https://ayakasportfolio.herokuapp.com/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away