Object.assign()使用 - ターゲット・オブジェクトに1つ以上のソースからオブジェクトをコピーするために使用されるすべての列挙の属性値、目標物体戻ります

構文:Object.assign(ターゲット、...ソース)ターゲット: オーディエンス、ソースは:ソースオブジェクトが
すべての属性値がターゲット・オブジェクトに1つ以上のソースオブジェクトからコピーされ列挙するために使用されます。これは、ターゲットオブジェクトに戻ります。

1つの CONST対象= {1、B:2 }。
2 CONSTソース= {B:4、C 5 }。
3 CONST returnedTarget = Object.assign(ターゲット、ソース)
4  
5にconsole.log(ターゲット)// オブジェクト{:1、B:4、C 5} 
6にconsole.log(returnedTarget)。// オブジェクト{:1、B:4、C 5}

 

使用例:
オブジェクトをコピー

1 CONST OBJ = {1 }。
2 CONSTコピー= Object.assign({}、OBJ)。
3にconsole.log(コピー)。// {1}

 


ディープコピー問題
ディープコピーのため、我々はObject.assignは()プロパティ値のコピーであるため、別のアプローチを使用する必要があります。ソースオブジェクトのプロパティの値は、オブジェクトへの参照である場合、それは参照のみを指します。

1 = {0、B:{C:0 OBJ1せ}}。 
2 = OBJ2せObject.assign({}、OBJ1)。 
3にconsole.log(JSON.stringify(OBJ2))。// {:0、B:{C:0}} 
4  
5 obj1.a = 1 6にconsole.log(JSON.stringify(OBJ1))。// {:1、B:{C:0}} 
7はconsole.log(JSON.stringify(OBJ2))。// {:0、B:{C:0}} 
8  
9 obj2.a = 2 10はconsole.log(JSON.stringify(OBJ1))。// {:1、B:{C:0}} 
11はconsole.log(JSON.stringify(OBJ2))。// {:2、B:{C:0}}
12  
13 obj2.bc = 3 14はconsole.log(JSON.stringify(OBJ1))。// {:1、B:{C:3}} 
15はconsole.log(JSON.stringify(OBJ2))。// {:2、B:{C:3}} 
16  
17  // 深拷贝
18 OBJ1 = {0、B:{C:0 }}。 
19せOBJ3 = JSON.parse(JSON.stringify(OBJ1))。 
20 obj1.a = 4 21 obj1.bc = 4 22はconsole.log(JSON.stringify(OBJ3))。// {:0、B:{C:0}}

 


オブジェクトをマージ

1 CONST O1 = {:. 1 };
 2 CONST = {O2 B:2 };
 3。 CONST = {C O3 :. 3 };
 4。 
5。 CONST OBJ = Object.assign(O1、O2、O3);
 6。にconsole.log (OBJ); // {:. 1、B:2、C :. 3} 
7。にconsole.log(O1); // {:. 1、B:2、C:}。3、注目は、その視聴者を変更します。

 


同じ属性を有する複合オブジェクト

1 CONST O1 = {:. 1、B :. 1、C :. 1 };
 2 CONST = {O2 B:2、C:2 };
 3 CONST = {C O3 :. 3 };
 4。 
5。 CONST OBJ = Object.assign ({}、O1、O2、O3);
 6。にconsole.log(OBJ); // {:. 1、B:2、C:} 3、他のプロパティは、同じ属性のパラメータを有する後続のオブジェクトを覆われていることに注意してください。

 

プロパティを継承し、属性はメイクのコピーである列挙することはできません

 

1 CONST Object.create OBJ =({FOO :. 1}、{ // fooは継承された属性である。
2  バー:{
 3。値:2 // 。バーは、属性を列挙されていない
。4  }、
 5。 バズ:{
 6値:. 3 7列挙:trueに // バズは、属性を列挙することができるそれ自体である。
8。 }
 9。 });
 10  
11。 CONST =コピーObject.assign({}、OBJ);
 12であるにconsole.log(コピー); // {バズ:. 3 }

 


プリミティブ型は、オブジェクトとしてパッケージ化されます

1 CONST V1 = "ABC" ;
 2 CONST = V2 trueに3 CONST V3 = 10 ;
 4 constのシンボルV4 =( "FOO" 。5  
。6 CONST OBJ = Object.assign({}、V1、ヌル、V2、未定義、 V3、V4); 
 7つの // プリミティブ型は、nullとundefinedパックされているが、無視されます。
8  // 文字列だけラップされたオブジェクトは、それ自身の列挙可能性を有していてもよい注意。
図9にconsole.log(OBJ); // { "0"「1" "A"、 "B"、 "2": "C"}

 


シンボルのコピー属性タイプ

1つのconst O1 = {1 }。
2 CONST 02 = {[記号( 'FOO')] 2 }。
3  
4 CONST OBJ = Object.assign({}、O1、O2)。
5にconsole.log(OBJ)。// {:1、[記号( "FOO")] 2}(Firefoxの上の参照バグ1207182)
6 Object.getOwnPropertySymbols(OBJ)。// [シンボル(FOO)]

 

例外は、後続のコピーを中断します

 

1 CONST = Object.definePropertyターゲットは({}、 "FOO" 、{
 2値:. 1 3。書き込み可能:falseに
4 }); // ターゲットプロパティは、読み取り専用属性FOOです。
5  
。6 Object.assign(ターゲット、{バー:2}、{foo2は:. 3、FOO :. 3、foo3 :. 3}、{バズ:. 4 });
 7  // 例外TypeError: "foo"が読み取り専用である
。8  // この例外は、ソースオブジェクトの第二の属性の時に2番目のコピーを発生することに注意してください。
。9  
10にconsole.log(target.bar); // 2、第1ソースオブジェクトの成功したコピーを記載しました。
図11にconsole.log(target.foo2); // 3は、最初にも正常にコピーされたソースオブジェクトの第二の属性を説明しました。
12にconsole.log(target.foo); //1、読み取り専用属性でカバーできない、ソースオブジェクトの2番目のコピーの第二の属性は失敗します。
13である ;にconsole.log(target.foo3)// 未定義、方法異常終了を割り当て、そして第三の属性がコピーされるべきではありません。
14にconsole.log(target.baz); // 未定義の、第3ソースオブジェクトはにコピーされていません。

 


アクセサのコピー

1 CONST OBJ = {
 2 FOO :. 1 3。 GETバー(){
 4。 復帰 2 ;
 5  }
 6。 };
 7  
。8 LET =コピーObject.assign({}、OBJ) 
 。9にconsole.log(コピー); // {FOO:1、バー:2 }ゲッター関数からobj.bar戻り値copy.bar値
10  
11。 // 次の関数は、すべてのプロパティが所有するプロパティ記述子コピーする
12である 関数completeAssign(ターゲット、...ソース){
 13は sources.forEach(出典=> {
 14の LETディスクリプタ= Object.keys(ソース).reduce((記述子、キー)=> {
 15記述子[キー] = Object.getOwnPropertyDescriptor(ソース、キー)
16の リターン・ディスクリプタ。
17  }、{})。
18  
19  // Object.assign默认也会拷贝可枚举的シンボル
20 Object.getOwnPropertySymbols(ソース).forEach(SYM => {
 21 LET記述子= Object.getOwnPropertyDescriptor(ソース、SYM)、
 22  であれば(descriptor.enumerable) {
 23の記述子[SYM] = ディスクリプタ;
 24  }
 25  });
26  Object.defineProperties(ターゲット、記述子)。
27  });
28  リターン・ターゲット。
29  }
 30  
31コピー= completeAssign({}、OBJ)。
32  にconsole.log(コピー)。
33  // {FOO:1、取得バール(){リターン2}}

 

オリジナルリンクします。https://blog.csdn.net/Calla_Lj/article/details/89478765

おすすめ

転載: www.cnblogs.com/itgezhu/p/11585891.html
おすすめ