JavaScript 反復処理 スプレッド演算子

関数宣言の使用
function 関数( ...args ) { }                                        //渡された引数を配列にまとめる
function 関数( arg1, arg2, ...args ) { }                            //arg1, arg2以外を配列にまとめる

関数実行時の使用
const params = [ arg1, arg2 ];
function 関数( arg1, arg2 ) {  }
関数( ...params );                                                  //配列を展開してパラメータとして渡す

配列の複製（コピー）に使用
const 複製された配列 = [ ...元の配列 ];

配列の作成
const 結合された配列 = [ ...配列1, …配列2 ];                          //配列を結合
const 配列 = [ "要素1", ...配列1, "要素2" ];                         //配列の任意の場所で使用可能

オブジェクトでの使用（ES2018）
const 複製されたオブジェクト = { ...元のオブジェクト };                //オブジェクトの複製
const 結合されたオブジェクト = { ...オブジェクト1, …オブジェクト2 };   //オブジェクトを結合できる
const オブジェクト = { "プロパティ1": "値1", ...元のオブジェクト, "プロパティ2": "値2" }; //任意の位置に挿入できる

function sum( val1, val2, val3 ){
    return val1 + val2 +val3;
}

function ( [ arg1, arg2,  ] ...args ){ }

function fn( ...args ){
    console.log( args );
}
fn( 1, "こんにちは", false );
>[ 1, "こんにちは", false ]

function sum( ...vals ){            //引数は配列（vals）の要素として格納される
    let returnValue = 0;
    for( const val of vals ){
        returnValue += val;       //配列の要素を1つずつreturnValueに加算する
    }
return returnValue;
}
console.log( sum(1,2) );
>3
console.log( sum(1,2,3) );
>6
console.log( sum(1,2,3,4) );
>10

const maxValue = Math.max( 10, 5, 18, 9 );  //Math.maxは0個以上の引数（数値）のうち最大の数を返す関数。引数を1つずつ渡す
console.log( maxValue );
>18

const numArray = [ 10, 5, 18, 9 ];
const maxValue = Math.max( ...numArray );  ///スプレット演算子によって配列の要素が引数として渡される
console.log( maxValue );
>18

const original = [ "元の値" ];
const duplicated = [ ...original ];          //元の配列の要素を持つ新しい配列を作成
duplicated[ 0 ] = "変更後の値";               //複製後の配列値を変更
console.log( `original[ ${ original[ 0 ] } ] duplicated[ ${ duplicated[ 0 ] } ]` );
>original[ 元の値 ] duplicated[ 変更後の値 ] //元の配列の値は変更されていない

const original = [ "元の値" ];
const notduplicated = original;              //※1 originalの参照をnotDuplicatedに再代入
notduplicated[ 0 ] = "変更後の値";            //値を変更
console.log( `original[ ${ original[ 0 ] } ] notduplicated[ ${ notduplicated[ 0 ] } ]` );
>original[ 変更後の値 ] notduplicated[ 変更後の値 ] //元の配列の値は変更される

const arry1 = [ 10, 20, 30 ];
const arry2 = [ 40, 50, 60 ];
console.log( [...arry1, ...arry2 ] );   //配列のマージ
> [10, 20, 30, 40, 50, 60]

console.log( [...arry2, ...arry1 ] );   //配列のマージ
> [40, 50, 60, 10, 20, 30]

console.log( [0, ...arry2, 70,  ...arry1 ] );   //任意の位置に要素を追加
> [0, 40, 50, 60, 70, 10, 20, 30]

const obj1 = { prop1: 10, prop2: 20 };
const obj2 = { prop3: 30, prop4: 40 };

console.log( {...obj1, ...obj2 } );                  //オブジェクトのマージ
>{ prop1:10,  prop2:20,   prop3:30,   prop4:40}

console.log( { prop0: 0, ...obj2, prop5: 50 } );     //任意のプロパティの追加
>{ prop0:0, prop3:30,  prop4:40,   prop5:50}

console.log( { prop1: 0, ...obj1 } );                //プロパティ重複時は、あとから定義したほうで上書き
>{ prop1: 10, prop2: 20}

const obj = { prop1: 10, prop2: 20 };
Math.max( ...obj );
>Uncaught TypeError: Spread syntax requires ...iterable[Symbol.iterator] to be a function
//型に関するエラー：呼び出し可能なイテレータが見つかりません。

Array.prototype[ Symbol.iterator ] = function* (){
    yield "Hello";
    yield "World";
}
const arry = [1, 2, 3];
const newArry = [...arry];
console.log( newArry );
>[ "Hello", "World" ]