参照リンク(参考ルアンYifeng):https://github.com/ruanyf/es6tutorial/search?utf8=%E2%9C%93&q=assign
転載リンク:https://www.jianshu.com/p/d5f572dd3776
基本的な使い方
Object.assign
オブジェクトをマージするための方法は、全ての列挙属性のソースオブジェクト(ソース)は、対象物(ターゲット)にコピーします。
1つの CONSTターゲット= {1 }。 2 3 CONSTソース1 = {B:2 }。 4 CONSTソース2 = {C:3 }。 5 6 Object.assign(ターゲット、ソース1、ソース2)。 7ターゲット// {:1、B:2、C 3}
Object.assign
最初のパラメータは、ソース・オブジェクトのパラメータが後ろにあり、ターゲット・オブジェクトのメソッドです。
ソースオブジェクトとターゲットオブジェクトは、以前の属性上書き属性後、同じ名前の属性、または同じname属性のソースオブジェクトを複数有している場合ことに留意されたいです。
1つの CONSTターゲット= {1、B:1 }。 2 3 CONSTソース1 = {B:2、C:2 }。 4 CONSTソース2 = {C:3 }。 5 6 Object.assign(ターゲット、ソース1、ソース2)。 7ターゲット// {:1、B:2、C 3}
唯一つのパラメータ場合は、Object.assign
パラメータに直接戻ります。
1 CONST OBJ = {1 }。 2 Object.assign(OBJ)=== OBJ // 真
このパラメータがオブジェクトでない場合は、それが第一の目的に変身してから返します。
1 typeof演算 Object.assign(2)// "オブジェクト"
そのためundefined
、およびnull
それらをパラメータとして使用されているそうだとすれば、対象物に変わりはない、エラーが報告されています。
1 Object.assign(不定)は// 与えられる 2 Object.assign(NULL)// 与えられました
非オブジェクトは、ソースオブジェクト(すなわち、非最初のパラメータ)の位置に表示された場合、処理ルールが異なっています。まず、これらのパラメータは、あなたがオブジェクトに回すことができない場合は、スキップされ、オブジェクトに変わります。この手段であればそれundefined
とnull
ではない最初のパラメータでは、エラーがないでしょう。
1 LET OBJ = {1 }。 2 Object.assign(OBJ、未定義)=== OBJ // 真 3 Object.assign(OBJ、NULL)=== OBJ // 真
他のタイプの値(即ち、値、およびブール列)最初のパラメータではないが与えられていません。しかし、ターゲットオブジェクトにコピーされた文字列の配列に加えて、他の値が有効でないであろう。
1 CONST V1 = 'ABC' 。 2 CONST V2 = 真。 3 CONST V3 = 10 。 4 5 CONST OBJ = Object.assign({}、V1、V2、V3)。 6にconsole.log(OBJ)。// { "0": ""、 "1": "B"、 "2": "C"}
上記のコードでは、v1
、v2
、v3
それぞれ、のみ(文字の配列の形で)ターゲット・オブジェクトに文字列の文字列、ブール値、および結果は、数値およびブール値は無視されます。文字列だけラップされたオブジェクトは、列挙プロパティを生成するためです。
1つのオブジェクト(真)// {[PrimitiveValue]:真} 2オブジェクト(10) // {[PrimitiveValue]:10} 3オブジェクト( 'ABC')// {0: ""、1: "B"、2: "C"、長さ:3、[PrimitiveValue]: "ABC"}
[[PrimitiveValue]]
上、このプロパティはされない
Object.assign
コピー。ラッパーのみオブジェクトの文字列は、本当の意味列挙可能な特性を持つことになり、これらのプロパティがコピーされます。
Object.assign
プロパティのコピーは、ソースオブジェクト(継承された属性をコピーしない)の自分の財産のコピーだけを制限され、またコピーが属性を(列挙することはできません
enumerable: false
)。
1 Object.assign({B 'C' }、 2 Object.defineProperty({}、 '不可視' 、{ 3 列挙:偽、 4 値: 'こんにちは' 5 }) 6 ) 7 // {B「C '}
上記のコードでは、Object.assign
唯一の非列挙型属性をコピーするオブジェクトはinvisible
、このプロパティはにコピーされていません。
プロパティという名前のシンボルのプロパティ値は、となりますObject.assign
コピー。
1 Object.assign({ 'B'}、{[記号( 'C')]: 'D' }) 2 // {: 'B'、記号(C): 'D'}
注意点
(1)浅いコピー
Object.assign
この方法ではなく、深いコピーよりも、簡易コピーを実践されています。つまり、ソースオブジェクトがオブジェクトである場合、プロパティの値は、ターゲットオブジェクトのコピーが、オブジェクトへの参照になってしまいます。
1 CONST OBJ1 = {{B:1 ;}} 2 CONST OBJ2 = Object.assign({}、OBJ1)。 3 4 obj1.ab = 2 。 5 obj2.ab // 2
上記のコードでは、ソース・オブジェクトobj1
のa
属性の値は、オブジェクトであるObject.assign
得られたコピーはオブジェクトへの参照です。このオブジェクトの変更は、宛先オブジェクトに反映されます。
同じname属性の(2)の交換
このネストされたオブジェクトの場合、同じ名前のイベント属性は、Object.assign
処理方法ではなく追加するよりも、交換することです。
1 CONSTターゲット= {{B 'C'、D 'E' }} 2 CONSTソース= {{B 'ハロー' }} 3 Object.assign(ターゲット、ソース) 4 // {A :{B 'ハロー'}}
上記のコードは、target
オブジェクトのa
属性はsource
、オブジェクトa
を取得しないが、置換全体の特性{ a: { b: 'hello', d: 'e' } }
結果を。これにより、開発者は、欲しい特別なケアを必要としない通常です。
いくつかのライブラリが提供するObject.assign
(例えば、カスタマイズされたバージョンLodash_.defaultsDeep
法)ディープコピーを得ることができます。
(3)処理アレイ
Object.assign
アレイを処理するために使用することができるが、アレイは、オブジェクトとして扱われます。
1 Object.assign([1、2、3]、[4、5 ]) 2 // [4,5、3]
上記のコードでは、Object.assign
指定された属性として配列0,1,2オブジェクト、光源アレイ0 Number属性4
標的配列覆う0番号属性1
。
工程(4)関数の値
Object.assign
その後、評価され、その後、コピー、値のみをコピーし、あなたが値をコピーしたい場合は、値の関数です。
1つの CONSTソース= { 2 GETのfoo(){ リターン 1 } 3 }。 4 CONST目標= {}; 5 6 Object.assign(ターゲット、ソース) 7 // {FOO:1}
上記のコードは、source
オブジェクトのfoo
属性値は、関数でObject.assign
、過去にこの値をコピーして、値を取得するだけで、後に、関数の値をコピーしません。
一般的な用途
Object.assign
便利な多くの方法があります。
(1)目的のために添加しました
1 クラスポイント{ 2 コンストラクタ(X、Y){ 3 Object.assign(この、{X、Y})。 4 } 5 }
上記プロセスによってObject.assign
方法、x
特性及びy
に属性を追加するPoint
オブジェクト・クラスのインスタンス。
(2)オブジェクトを追加する方法
1 Object.assign(SomeClass.prototype、{ 2 のsomeMethod(ARG1、ARG2){ 3 ··· 4 }、 5。 anotherMethod(){ 6 ··· 7 } 8。 }); 9 10 // 次の文言と等価で 11 = SomeClass.prototype.someMethodの機能(ARG1、ARG2){ 12は ????? 13である }; 14 SomeClass.prototype.anotherMethod = 関数(){ 15 ????? 16 }。
上記のコードは、括弧内に直接、二つの機能をオブジェクトのプロパティの簡単な表現を使用し、その後、使用assign
する方法をSomeClass.prototype
されています。
オブジェクトの(3)のクローニング
1つの 関数クローン(原点){ 2 リターンObject.assign({}、原点)。 3 }
上記目的は、元のコードにコピーされている空のオブジェクトであり、元のオブジェクトのクローンを得ます。
しかし、この方法でクローンを、元のオブジェクト値自体の唯一のクローンは、それが継承された値をクローン化することができません。あなたが継承チェーンを維持したい場合は、次のコードを使用することができます。
1つの 関数クローン(原点){ 2 LET originProto = Object.getPrototypeOf(原点)。 3 リターンObject.assign(Object.create(originProto)、原点)。 4 }
(4)複数のオブジェクトを組み合わせます
オブジェクトに複数のオブジェクトを結合します。
1つの CONSTマージ=(目標、...ソース)=> Object.assign(ターゲット、...源)
あなたは新しいオブジェクトを返すように統合したい場合は、上記の関数、合併への空のオブジェクトを書き換えることができます。
1つの CONSTマージ=(...ソース)=> Object.assign({}、...源)
5)属性のデフォルト値の指定
1 CONST DEFAULTS = { 2 ログレベル:0 、 3 OUTPUTFORMAT: 'HTML' 4 }。 5 6 関数processContent(オプション){ 7つの オプション= Object.assign({}、デフォルト、オプション)。 8 にconsole.log(オプション)。 9 // ... 10 }
上記のコードは、DEFAULTS
オブジェクトはデフォルトでoptions
オブジェクトがユーザ指定のパラメータです。Object.assign
方法DEFAULTS
とoptions
の両方、同じ名前の属性を持っている場合は、新しいオブジェクトに結合option
属性値が上書きされますDEFAULTS
属性値を。
浅いコピー問題の存在に、という注意DEFAULTS
オブジェクトとoptions
オブジェクトのすべての属性、好ましくは、シンプルなタイプが別のオブジェクトを指していません。それ以外の場合は、DEFAULTS
オブジェクトのプロパティは無効である可能性が高いです。
1 CONST DEFAULTS = { 2 URL:{ 3 ホスト: 'example.com' 、 4 ポート:7070 5 }、 6 }。 7 8 processContent({URL:{ポート:8000 }}) 9 // { 10 // URL:{ポート:8000} 11 // }
上記のコードの本来の意図をされて url.port
8000に変更し、url.host
変更されません。実際の結果がoptions.url
上書きされDEFAULTS.url
、それはurl.host
存在しません。