JavaScript入門 コレクション 配列の静的メソッド 分割代入
静的メソッド
静的メソッドとは、オブジェクトのインスタンス化を行わずに呼び出せるメソッドのことです。Arrayコンストラクタにも、静的メソッドが用意されています。
from 配列風オブジェクトや反復可能オブジェクトを配列に変換
fromメソッドを使うと、Setなどの反復可能オブジェクトやargumentsなどの配列風（array-like）オブジェクトから、配列を作成できます。
Setから配列を作成
const set = new Set();
set.add( 1 ); //setオブジェクトに値を追加
set.add( 2 );
set.add( 3 );
const convertedArray = Array.from( set );
console.log( convertedArray );
>[ 1, 2, 3 ]反復可能オブジェクトとは、Set、Map、配列のような反復処理が可能なオブジェクトです。
isArray 配列かどうか判定
配列かどうか調べるには、isArrayメソッドを使います。
配列オブジェクトかどうか判定
const set = new Set();
console.log( Array.isArray( set ) );
>false
const converedArray = Array.from( set )
console.log( Array.isArray( converedArray ) );
> true分割代入
分割代入とは、配列やオブジェクトの要素を直接、変数として取り出して使用する記法です。配列ではありませんが、配列と合わせてよく使われます。
配列の分割代入
配列の分割代入では、右オペランドの配列の要素が左オペランドの変数（変数A,変数B）にそれぞれ代入されていきます。左辺の変数は、通常の変数宣言を行った変数と同様に使うことができます。
構文：分割代入の記法（配列）
let [ 変数A, 変数B = 初期値B ] = 配列;配列の分割代入
let arry = [ 1, 2, 3 ];
let [ x, y, z ] = arry; //変数x, y, zを宣言し、配列の要素を代入する
console.log( x, y, z );
>1 2 3
let [ x1, ,z1 ] = arry; //2つ目の要素を空白にする。
console.log( x1, z1 ); //不要な要素は空白としておくことでスキップできる
>1 3
let x2;
[ x2 ] = arry; //宣言済みの変数に対しても代入できる
console.log( x2 );
>1
leet [ , , , a3 = 4] = arry; //デフォルト値を設定できる
console.log( a3 );
>4
let [ x4, …rest ] = arry; //スプレッド演算子（…）と合わせて使うこともできる
console.log( x4, rest );
>1 [ 2, 3 ]オブジェクトの分割代入
配列の分割代入では配列の順番どおりに変数に対して値が代入されますが、オブジェクトの分割代入ではプロパティ名と変数名を一致させる必要があります。
構文：分割代入の記法（オブジェクト）
let { プロパティ名A, プロパティ名B = 初期値B } = オブジェクトオブジェクトの分割代入
let { banana, orange, apple } = { apple: "リンゴ" , banana: "バナナ", orange: "オレンジ" };
//オブジェクトの分割代入はプロパティ名の変数を宣言する。プロパティの順番は関係ない
console.log( banana );
>バナナ
let { banana: b, apple: a } = { apple: "リンゴ", banana: "バナナ" }; //プロパティと変数名を変えたい場合
console.log( b, a );
>バナナ リンゴ
let { banana: b2 = "おいしいバナナ" } = { apple: "リンゴ" }; //デフォルト値を代入する場合
console.log( b2 );
>おいしいバナナ
let { banana: b3 , …fruits } = { apple: "リンゴ" , banana: "バナナ", orange: "オレンジ" };
//スプレッド演算子（…）と合わせて使うこともできる
console.log( fruits );
> { apple: "リンゴ" , orange: "オレンジ" }
let { fruits: { apple: a3 } } = { fruits: { apple: "リンゴ" , banana: "バナナ" } };
//多階層のオブジェクトも展開できる
console.log( a3);
> リンゴ
let prop = "apple";
let { [prop]: a4 } = { apple: "リンゴ" , banana: "バナナ", orange: "オレンジ" };
//動的にプロパティ名を指定できる
console.log( a4 );
> リンゴ関数の引数に対する分割代入
分割代入は、関数の引数を受け取るときにも使用可能です。関数の引数に分割代入を使うと、渡されたオブジェクトや配列から特定の要素を抽出し、引数に渡すことができます。
オブジェクトや配列の要素を引数として抽出
const fruitsArry = [ "banana" , "orange" , "grape" ];
const fruitsObj = { banana: "バナナ", orange: "オレンジ" };
function bunkatuArry( [ , , fruit3 ] ){ //3つ目の要素のみ関数内で使用する
console.log( fruit3 );
}
bunkatuArry( fruitsArry ); //配列を実引数として渡す
>grape
function bunkatuObj( { orange } ){ //orangeのみ引数として抽出
console.log( orange );
}
bunkatuObj( fruitsObj ); //オブジェクトを実引数として渡す
>オレンジ
上記のコードでは、bunkatuArryで空白とカンマ（,）を[ ]内に記述することで、1つ目、2つ目の要素を引数として設定せず、3つ目の”grape”のみを変数fruit3に格納しています。
また、オブジェクトの場合には、プロパティ名（orange）を指定すれば、プロパティに対応する値が変数orangeに可k脳された状態で関数が実行されます。なお、引数に対する分割代入では、以下のようなオブジェクトや配列が入れ子構造になったものも表現できます。
入れ子構造（多階層）のオブジェクトを引数に取る場合
const taro = {
name: { first: "太郎", last: "山田" },
age: 18,
hobbies: ["野球","サッカー"]
};
function greeting( { name: { first, last }, age, hobbies: [ hobby1,hobby2 ] } ){ //分割代入でオブジェクトから変数に値を抽出
console.log( `名前は${ last + first }です。${ age }歳です`);
console.log( `趣味は${ hobby1 }と${ hobby2 }です。` );
}
greeting( taro ); //オブジェクトを渡す
>名前は山田太郎です。18歳です。
>趣味は野球とサッカーです。