ES 6解構成-解構関数パラメータ

2851 ワード

解は関数伝達パラメータの過程で使用できる.まず、構造パラメータが使われていない例を見てみます.その後、私たちはそれを構造パラメータに変換します.一:構成パラメータの使用シーン1:構成パラメータが使用されていません.
function setCookie(name, value, options) {
    options = options || {};
    let secure = options.secure,
        path = options.path,
        domain = options.domain,
        expires = options.expires;
    //    
}

setCookie('type', 'js', {secure: true, path: '/example', domain: 'test', expires: 60});
私たちは関数を持っています.3番目のパラメータはオブジェクトタイプです.ただし、関数の声明部分を見るだけでは、この点が分かりません.これは使用者に不便を与えることになります.使用者は第三のパラメータがオブジェクトタイプであることを確認できません.このオブジェクトにはどのような属性が必要ですか?以上の問題は構造パラメータを用いて解決できます.
2:構造パラメータに改造しました.
setCookie('type', 'js', 
    {secure: true, path: '/example', domain: 'test', expires: 60});

function setCookie(name, value, {secure, path, domain, expires}) {
    console.log(expires); // 60
    //    
}
この例では、解構成パラメータを使って関数宣言を書き換えました.このように使用者は第三のパラメータがオブジェクトとオブジェクトに必要な属性であることを明確に知ることができます.
二:構成パラメータは、一般のパラメータとは違って、値を伝える必要があるパラメータです.伝えないと、エラーが発生します.
function setCookie(name, value, {secure, path, domain, expires}) {
    console.log(expires);
    //    
}

setCookie('type', 'js'); // Uncaught TypeError: Cannot destructure property `secure` of 'undefined' or 'null'.
なぜですか?構成パラメータが存在する関数のためです.set Cookie()を呼び出したとき、関数の内部は実際にこのようです.
function setCookie(name, value, options) {

    let {secure, path, domain, expires} = options; //        

    console.log(expires);
    //    
}
結果の対象がnullまたはundefinedであれば、プログラムがエラーとなりますので、パラメータの転送値を解決しないとプログラムエラーが発生します.上記の問題を解決するためには、関数を定義する際に、デスティネーションパラメータにデフォルトの値を提供する必要があります.
function setCookie(name, value, {secure, path, domain, expires} = {}) {}

setCookie('id', 'mike'); //     ,     
三:構成解除パラメータ属性にデフォルト値を設定する上の例では、{secure, path, domain, expires} = {}を介して、構成解除パラメータ全体にデフォルト値を設定しました.パラメータ内の属性ごとにデフォルト値を設定することもできます.
let defaultOptions = {
    secure: true,
    path: '/example',
    domain: 'test',
    expires: 60
};

function setCookie(name, value, {
    secure = defaultOptions.secure,
    path = defaultOptions.path,
    domain = defaultOptions.domain,
    expires = defaultOptions.expires
} = defaultOptions) {
    console.log(secure); //true
    console.log(path); //example
    console.log(domain);//test
    console.log(expires);//30
}

setCookie('id', 'mike', {path: '/example', domain: 'test', expires: 30});
構成パラメータの属性設定のデフォルト値と一般オブジェクトの構成解除設定のデフォルト値は同じで、等号=属性の値を指定します.ここで特に注意したいのは、構文パラメータの属性だけにデフォルト値を設定しても、構文パラメータ全体にデフォルト値を設定しなくても、setCookie('id', 'mike')のように参照なしに発生するコードエラー問題を解決できないので、構成パラメータ全体にデフォルト値を設定することを忘れないようにしてください.
以上、関数パラメータの内容を説明します.