ES 6:関数&概要の深さのコピーについて

標準の先頭
今日はES 6の関数の一部を見てみましょう
関数＃カンスウ＃
関数の初期値
場合によっては、関数の必須パラメータではなく、デフォルト値を与えることができます.プログラムが完全にエラーが発生しないことを保証します
初期には、初期値を割り当てると、次のようになります.

//   ES5  
function ajax(url, method, param) {
    method = method ? method : 'GET';
    param = param ? param : {};
    console.log(url, method, param);
}

しかし、この方法は清潔で美しくありません.メンテナンスが面倒
ES 6では、パラメータバーに直接デフォルト値を指定できます.

function ajax(url, method = 'GET', param = {}) {
    console.log(url, method, param)
}

これにより、方法がよりきれいに見えます.プログラムの正常な運行を保証した
babelでES 5コードreviewにコンパイルできます.

'use strict';

function ajax(url) {
    var method = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'GET';
    var param = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};

    console.log(url, method, param);
}

ajax('http://www.baidu.com');

ES 5コードに変換すると,その変換方法はパラメータリスト内に値があり,長さが十分であるか否かを判断することであることがわかる.そして判断する
関数の残りのオペレータ
多くの繰り返しパラメータの関数では,「...」を用いることができる.残りのオペレータを省略
たとえば、各パラメータを加算する方法があります.パラメータは長さを任意に定義できます.ただし、長さは>2でなければなりません.
ES 5では、多くのパラメータ名を繰り返し書く可能性があります.無駄になるだけでなく、プログラムの読みやすさも悪くなります

function sum(param1, param2, param3, param4, param5) {
    console.log(param1 + param2 + param3 + param4 + param5);
}

実はparam 2-param 5からES 6を利用して同じパラメータにマージすることができます.手動で拡張する必要がない

function sum(param1, ...paramN) {
    let result = param1;
    paramN.forEach((param) => {
        result += param
    });
    console.log(result);
}

マージされたパラメータは配列として出力され、配列の操作に従って操作できます.
かんすうパラメータかいそう
オブジェクトをパラメータとして関数に入力し、関数パラメータもオブジェクトとして受け入れます.解体を完了することができます
前にどうすればいいか覚えていますか?双方のタイプを解釈するには、データフォーマットが類似していることを保証します.

function f({name, age}) {
    console.log(name, age);
}

f({name: 'janlay', age: 8});

理解にかたくない
矢印関数
矢印関数はES 6関数の中で最もNiceの知識であるはずです.中国語の名前は「矢印関数」、英語の名前は「Lambda式」です.
矢印関数は、メソッドを宣言するときに、より簡単で便利にするためです.構文は次のとおりです.

 let sum = (a, b) => {
     return a + b;
 };

矢印の左にパラメータリスト、右に関数メソッド体
関数にパラメータが1つしかない場合は、関数の方法をより簡略化できます.

let result = num => num * 2;

しかし、矢印関数を使うときは気をつけてください.矢印関数を使用すると、「役割ドメイン」という問題に関連します.この問題は通常、私たちのキーワードthisの値に影響します.
矢印関数内でthisが呼び出されるため、役割ドメインは矢印関数自体ではなく、矢印関数よりも大きなレベルの関数を指します.くりを一つあげる

let myInfo = {
    name: 'janlay',
    sayHello: () => {
        console.log(`Hi,My name is ${this.name}`)
    }
};

myInfo.sayHello();

このときコンソール出力undefined
私たちが言ったように、矢印関数内のthisは、その前の関数の役割ドメインを指します.しかし、彼は関数体を1層も持っていない.これを印刷してundefinedを表示します
概要の深さと浅さのコピー
まずこのようなコードを書きます

let myInfo = {
    name: 'janlay',
    age: 17
};
let heInfo = {};
heInfo = myInfo;
heInfo.name = 'Mike';
console.log(myInfo);

一般的な論理に従って、myInfoをheInfoにコピーします.それからheInfo内の属性を修正して、myInfoを出力しても変わらないはずです.
でも私たちは間違っています

{ name: 'Mike', age: 17 }

このようなオブジェクトコピーを「浅いコピー」と呼ぶ.メモリアドレスをコピーしただけで、新しい変数にコピーされたメモリはありません.
このような浅いコピーには、ES 6の「Object.assign()」メソッドもあります.彼の役割は、2つのオブジェクトを入力してマージし、3番目のオブジェクトに値を割り当てることです.
浅いコピーを使用することもありますが、一般的には深いコピーを使用します.つまり私たちがよく言う値伝達です
深いコピーの仕方が多い.私の学识が限られているため、みんなに1つの理解しやすい深いコピーの方法を持ってきます
1. JSON.parse()とJSON.stringifyメソッド
これは最も簡単な深いコピー方法だと思います.ソースオブジェクトをJSONオブジェクトに変換し、parseメソッドでオブジェクトに再解放するのが原理です.このように振り回されると、メモリアドレスが変わります.深いコピーの効果が得られます

let myInfo = {
    name: 'janlay',
    age: 17
};
let heInfo = {};
heInfo = JSON.parse(JSON.stringify(myInfo));
heInfo.name = 'Mike';
console.log(myInfo);

結果出力:{ name: 'janlay', age: 17 }2.外付けcloneの使用方法
その原理も簡単で、オブジェクトを遍歴することで、オブジェクトの各値を新しいオブジェクトに個別にコピーし、全体的なコピーを行わない.オブジェクトの最小単位に分割

function clone(origin) {
    let newObj = {}; //   
    for (let key in origin) { //      
        if (typeof origin[key] === 'object') { //             
            newObj[key] = clone(origin[key]) //                 
        } else { //  
            newObj[key] = origin[key]; //        ，    
        }
    }
    return newObj; //         
}

heInfo=clone(myInfo)を呼び出します.
結果出力は{ name: 'janlay', age: 17 }以上の2つの深いコピー方法は非常に簡単です.より深い深いコピーを知るように、ここでは金を掘る別の文章をお勧めします.
深いコピーの究極の探求(90%の人は知らない)
The End
Babel中国語ネット-ES 6オンライン変換ES 5ツール