第5章解体(destructure)

構造を解く
解凍とは、ES 6が新たに追加した機能であり、構成を解くとは、複雑なデータ構造を小さい部分に分割することを意味する.ES 6は、オブジェクトの字面量と配列の字面量(Aray literals)との解を追加します.以下は3つの面から構成について説明します.

オブジェクト解凍(object destruct);

配列解除(array destructure);

関数パラメータ構成

一.オブジェクトの解凍
オブジェクトの解構使用対象の字面量は式の左側にあり、対象の字面量属性初期化器と文法が一致します.

let node = {
    type: "javascript",
    name: "main"
};
//        
let {type, name} = node; // node     
console.log(type); // "javascript"
console.log(name); // "main"

//        
var type = node.type;
var name = node.name;

1.分配値
上記の例は変数宣言を使用する方法であり、変数名はすでに宣言されています.再割当対象の字面量分解賦値は括弧を使用しなければなりません.

let node = {
    type: "javascript",
    name: "main"
},
type = "literals",
name = "whatever";
//        ()
({type, name} = node);
console.log(type); // "javascript"
console.log(name); // "main"

構成表式の最後の値は等号の右側の値で、上の例はnodeです.

let node = {
    type: "javascript",
    name: "main"
},
type = "literals",
name = "whatever";
function outputInfo(value) {
    console.log(value === node);
}
outputInfo({type, name} = node); //          node,    true

console.log(type); // "javascript"
console.log(name); // "main"

2.標準値
分割された値の場合、ローカル変数はオブジェクトに存在しない場合、デフォルト値はundefinedであり、デフォルト値を提供することができます.

let node = {
    type: "javascript",
    name: "main"
};
let {type, name, someProperty} = node;
console.log(someProperty); // undefined

//      
let {type, name, someProperty = true} = node;
console.log(someProperty); // true

3.ローカル変数名を変更する
上記の例では、私達は属性名を変数名として使っています.この変数名を変えることができます.

let node = {
    type: "javascript",
    name: "main"
};
let {type: localType, name: localName} = node;
//    
var localType = node.type;
var localName = node.name;

4.ネストオブジェクトの解凍
解凍は任意の深さの入れ子に使用できます.

let node = {
    type: "javascript",
    name: "main",
    loc: {
        start: {
            rows: 1
            columns: 3 
        },
        end: {
            rows: 5,
            columns: 19
        }
    }
};
let {loc: { start }} = node;
//    
var start = node.loc.start;

//           
let {loc: { start: localStart }} = node;
//    
var localStart = node.loc.start;
console.log(localStart.rows); // 1
console.log(localStart.columns); // 3

二.配列の解体
データの構造とオブジェクトの構造は大同小異ですが、名前付き属性によるものではなく、インデックス位置によるものです.もう一つの点は、配列の固有値は括弧で包む必要がないということです.

let colors = ["red", "yellow", "green"];
let [firstColor, secondColor] = colors;
//    
var firstColor = colors[0];  // "red"
var secondColor = colors[1]; // "yellow"

属性を無視して、希望の属性だけを解くこともできます.

let colors = ["red", "yellow", "green"];
let [， ， thirdColor] = colors;
//    
thirdColor = colors[2]; // "green"

1.分配値

let colors = ["red", "yellow", "green"],
    firstColor = "blue",
    secondColor = "pink";
//                ，    {}         
[firstColor, secondColor] = colors;
//    
var firstColor = colors[0];  // "red"
var secondColor = colors[1]; // "yellow"

配列分解値には他の特別なユニークな使用があります.相互作用の2つの属性の値eg:

let a = 1,
    b = 2;
//        ，     ：   =    
[a, b] = [b, a];
console.log(a); // 2
console.log(b); // 1

2.標準値
オブジェクトの解凍と同じように、行列内の値がデフォルトではundefinedとして設定されていません.別の標準値を提供することができます.

let colors = ["red"];
let [firstColor, secondColor = "green"] = colors;
//   
var firstColor = colors[0];
var secondColor = "green";
console.log(firstColor); // "red"
console.log(secondColor); // "green"

3.ネスト配列解凍

let colors = ["red", ["pink", "aqua"], purple];
let [redColor, [pinkColor]] = colors;
//    
var redColor = colors[0];
var pinkColor = color[1][0];

4.rest items(…)
1.残りの項目は...構文(任意のパラメータ、spread操作符と同じ)を使って配列に残っている項目を表します.同じret itemsは最後まで置かなければなりません.

let colors = ["red", "yellow", "green"];
let [firstColor, ...restColors] = colors;
console.log(firstColor); // "red"
restColors.length; // 2
restColors[0]; // "yellow"
restColors[1]; // "green"
//    
var restColors = ["yellow", "green"]

2.配列のもう一つの見落とされやすい能力は、快速に1つの配列を割り当て、concat方法を使用することである.

let colors = ["red", "yellow", "green"];
let cloneColors = colors.concat();
console.log(cloneColors);  // ["red", "yellow", "green"]

この目的を達成するためにrest itemsを使用します.

let colors = ["red", "yellow", "green"];
let [...cloneColors] = colors;

三.ハイブリッド
オブジェクトの解と配列の解を結合して、より複雑なデータ構造を抽出することは、JSON構成構造の抽出にとって非常に有用である.

let node = {
    type: "javascript",
    name: "main",
    loc: {
        start: {
            rows: 1,
            columns: 1
        },
        end: {
            rows: 2,
            columns: 2
        }
    },
    range: [0, 3]
};

let {
    loc: { start },
    range: [ startIndex ]
} = node;
//    
var start = node.loc.start; // {rows: 1, columns: 1}
var startIndex = node.range[0]; // 0

四.構成パラメータ
オブジェクトの構成は、デフォルト値、ミキシングなどの特性を持っています.構成パラメータはすべて1を持っています.js関数に多くのオプションパラメータが必要な場合、一般的には、Ooptionsオブジェクトに入力されます.属性は他のオプションパラメータです.

function setCookie(name, value, options) {
    options = options || {};
    
    let secure = options.secure,
        path = options.path,
        domain = options.domain,
        expires = options.expires;
    // other code here ...
}
//    
setCookie("type", "js", {
    secure: true,
    expires: 60000
});

2.構文パラメータは、オブジェクトの解凍または配列の解体を使用して、named parameterの代わりに、次のように書くことができます.

function setCookie(name, value, {secure, path, domain, expires}) {
    // other code here ...
}
//    
setCookie("type", "js", {
    secure: true,
    expires: 60000
});

構造パラメータは本質的には構成宣言の簡略化である.

function setCookie(name, value, options) {
    let {secure, path, domain, expires} = options; //     
    // ...
}

このような書き方には問題があります.つまり、解構パラメータが必要になります.省略することはできません.第3のパラメータを与えないため、自動的にundefinedとなります.解構声明では、解構右値がnull、undefinedの場合、エラーが発生します.

setCookie("type", "js"); //     

3.上のoptionsが必須パラメータという書き方なら大丈夫ですが、optionsがオプションであれば別の書き方として書きます.

function setCookie(name, value, {secure, path, domain, expires} = {}) {
    // other code here ...
}
//    
setCookie("type", "js"); // OK
//           ， secure       undefined

4.構文パラメータのデフォルトパラメータ

function setCookie(name, value,
    {
        secure = true,
        path = "/",
        domain = "example.com",
        expires = new Date(Date.now() + 3600000000)
    } = {}
) {
    // ...
}

締め括りをつける
解構成の出現はデータの抽出に直観的な構造を提供しており、配列解はまた他の機能を提供しています.例えば、2つの数を交換したり、rest itemsを交換したりします.