スプレッド構文を使った可変長引数メモ

10090 ワード
es6 JavaScript JavaScript テキストリンク

よく忘れるので忘れないようにメモメモ。
引数は無限大だぜという事を心に刻みました。

関数の引数に（...）をたくさんつかいたい

引数の数の制限なしにいろいろくっつけるにはargumentsやらforやら使えばいいじゃないか！
と言われそうなものの、でも使いたいんですよ。としか答えません。

配列でGo

配列に配列足すならとりあえずpush()しとけ感はありますよね。

test.js

 const arry1 = [1,2];
  const arry2 = [3,4];

  arry1.push(...arry2);
  console.log(arry1);　// →[1, 2, 3, 4]

(...)をつかうとお手軽andスマート。

配列で可変長引数

今回は関数にたくさんぶち込みたいので可変長引数として、関数の引数に(...)を入れます。
concatは通用しないぞ！

test.js

//  配列についてのスプレッド構文--------

  const arry1 = [1,2];
  const arry2 = [3,4];

  function arryMerge (...arry) {

//  可変引数で配列をくっつける
    let merged = [];
    arry.forEach((v) => merged.push(...v) );
    console.log(merged);　//　→[1, 2, 3, 4]

//    くっつけたものから数字の一番高いものを抽出
    let max = Math.max(...merged);
    console.log(max);　// →　4

//    配列ををたしてみる
    let sum = merged.reduce((a,b) => a + b );
    console.log(sum);　//　→　10
  }

  arryMerge(arry1,arry2);

後半は出来上がった配列をいじって遊んでます。
for文系で一つずつこまめに空の配列に押し込んで行くぜ！
押し込むときも(...)で細かくするぜ！

引数受け取ったときに2つの配列を持ってるのでそれをループに回してます。
空のmergedに入れるときにそのままだと配列mergedにさらに配列を2個入れてしまうというよくわからないことになるので、(...v)としてしっかり値を分解して個別に入れてます。

ちなみにmerged.concat(arry)　みたいにconcatでやろうとしても駄目でした。

スプレッド構文で分解しまくるタイプ

でもforって何か違いますよね？そうじゃないんだよなぁ~。
もっとこう(...)だけで適当に押し込ませてくれないかなぁ~。

ummmmmmmmm....そや！関数に渡す時点で分解しとけばええんや！

test.js

  const arry1 = [1,2];
  const arry2 = [3,4];

 function arryMerge0 (...arry) {
   let merged = [];
   merged.push(...arry);
   console.log(merged);
 }

  arryMerge0(...arry1,...arry2); //→[1, 2, 3, 4]

ひたすら分解したらpush()オンリーで出来ましたやったね。

オブジェクトでGo

普通にオブジェクトをくっつけるだけならこんな感じ。

test.js
  const objectA = {a:"a"};
  const objectB = {b:"b"};

  let merge = {
    ...objectA,...objectB
  };

  console.log(merge);　//→　{a: "a", b: "b"}

引数の数決まってるなら置き換えるだけですね。

オブジェクトでの可変長引数を試みる

でもやっぱり無限大という言葉に男の子は惹かれるもんですよね。
オブジェクトは配列のpush使えないのでforやらで順々にくっつけられない！
まあそもそももっといい方法あるので…

test.js
//  オブジェクトについてのスプレッド構文----

  const objectA = {a:"a"};
  const objectB = {b:"b"};

//  可変引数でオブジェクト同士をつなげる関数
  function objectMerge (...ob) {
    let merged = {};
    Object.assign(merged,...ob);
    console.log(merged);
  }

  objectMerge(objectA,objectB);//　結果　→{a: "a", b: "b"}

空のmergedにObject.assignで(...)で細かくして突っ込むだけ。
逆に配列みたいにループ処理入れるとややこしくなりました。

assignを使わなくてもよくなる(...)なのに結果使ってしまったジレンマ。
温故知新。

おわり

もっといろいろ方法があるとは思いますが、ああ何かしっくり来るという方法でした。
基本的に関数の中で操作するときに(...)を使用しないと、配列・オブジェクトごとに格納できます。
そもそもそんなに可変長引数を使うのかと。
そんなに無限大になにか引っ張って来れるのかと。
でもそんじょそこらの夢を追うバンドマンよりスプレッド構文の方が無限大だと思います。

常用試験問題の収集
effecitve java 3 singleton 1