Pdw[#X<[` 1.Object.assign()基本用法:
pTk1iGfB Oj^qh+r rg{|/ ;imT Object.assign方法用来将源对象(source)的所有可枚举属性,复制到目标对象(target)。它至少需要两个对象作为参数,第一个参数是目标对象,后面的参数都是源对象。
$r87]y! 1b-_![&]1 $E]WU?U let targetObj1 = { a: 1 };
?\NWKp let sourceObj1 = { b: 1 };
^z\*;
f let sourceObj11 = { c: 3 };
#DFfySH)A Object.assign(targetObj1, sourceObj1, sourceObj11);
o7;#B)jWS console.log(targetObj1);
f]Q`8nU 注:如果目标对象与源对象有同名属性,或多个源对象有同名属性,则后面的属性会覆盖前面的属性。
:gJ?3LwTf "`4V^1 vMB`TpZ let targetObj1 = { a: 1, b: 2 };
rW(<[2 vg let sourceObj1 = { b: 1 };
ht1d[ let sourceObj11 = { c: 3 };
08TeGUjJ Object.assign(targetObj1, sourceObj1, sourceObj11);
wjeuZNYf console.log(targetObj1);
K7CrRT3>6 如果只有一个参数,Object.assign会直接返回该参数。
"bC1dl< M#7w54~b?M ?\.aq
p1B let targetObj1 = { a: 4 }
H]x-s Object.assign(targetObj1);
yxx'g+D* console.log(targetObj1)
tr t^o 如果该参数不是对象,则会先转成对象,然后返回。
W1T%
Q88 :K)7_]y `,lry7] console.log(typeof (Object.assign(2)));
"A]Xe[oS 由于undefined和null无法转成对象,所以如果它们作为参数,就会报错。
Glw_<ag[ ~>"m`Q&[ Ump$N# console.log(typeof(Object.assign(null)));
j
LS<S_` EIrAq!CA console.log(typeof(Object.assign(underfind)));
1XpG7 注意:如果非对象参数出现在源对象的位置(即非首参数),那么处理规则有所不同。首先,这些参数都会转成对象,如果无法转成对象,就会跳过。这意味着, 如果undefined和null不在首参数,就不会报错。其他类型的值(即数值、字符串和布尔值)不在首参数,也不会报错。但是,除了字符串会以数组形式,拷贝入目标对象,其他值都不会产生效果。
fR$_=WWN>h . \t8s0A ?-Zl(uX Object.assign只拷贝自身属性,不可枚举的属性(enumerable为false)和继承的属性不会被拷贝。
h%%ryQQ&< tSVWO]< >_J9D?3S let obj1 = Object.assign({ dwb: 'zjl' },
!*eDT4a F(?O7z"d Object.defineProperty({}, 'zmf', {
QJ,[K_ %;eD.If} enumerable: false,
?:$\
t?e^ ]?6Pt:N2 value: 'zmf'
DYDeb i6 r@a]fTf })
Lc#GBaJ K0YQ b&*k )
yT~rql -tZ~&1" console.log(obj1);
^6On^k[|fw bu9.HvT' let obj2 = Object.assign({ dwb: 'zjl' },
T-LX>* 2
EWXr+IU. Object.defineProperty({}, 'zmf', {
]h?q1
BsU}HuQZQ enumerable: true,
`*l aUn >UQY3C value: 'zmf'
1<tJ3>Xl ^Z-oO#)h# })
(3"N~\9m 1<Sg@ )
Sx[
eX,q ua)jGif
console.log(obj2);
9QaE)wt eP,bFc 对于嵌套的对象,Object.assign的处理方法是替换,而不是添加。
l n\qvD_ RC/45:hZZ _1NK9dp: var target = { a: { b: 'c', d: 'e' } }
Q6W![571; (Vr%4Z8 var source = { a: { b: 'hello' } }
>1(J "(3u)o9 Object.assign(target, source);
<^\rv42'(2 上面代码中,target对象的a属性被source对象的a属性整个替换掉了,而不会得到{ a: { b: 'hello', d: 'e' } }的结果。这通常不是开发者想要的,需要特别小心。有一些函数库提供Object.assign的定制版本(比如Lodash的_.defaultsDeep方法),可以解决深拷贝的问题。
Kp6 @? A*eVz]i,k& J09jBQ]R J Cq>;br. m/1FVC@* QYMfxpiC 注意,Object.assign可以用来处理数组,但是会把数组视为对象。
ZRG
Cy5Rk 7IkPi?&{ ;U|(rM; console.log(Object.assign([1, 2, 3], [4, 5]));
CtXbAcN2B 其中,4覆盖1,5覆盖2,因为它们在数组的同一位置,所以就对应位置覆盖了。
\y5lYb,*c_ W!wof-1 ?1D!%jfi ' @RF z.Ic?Wz7 >jX" Object.assign方法实行的是浅拷贝,而不是深拷贝。也就是说,如果源对象某个属性的值是对象,那么目标对象拷贝得到的是这个对象的引用。
2n,z`(= |Dn Zk3M, 1ysfpX{= var object1 = { a: { b: 1 } };
%):_ A?H#bRAs var object2 = Object.assign({}, object1);
Z)s
!p )X0=z1$ object1.a.b = 2;
.; F<X\_ pi?/]}: console.log(object2.a.b);
Uj7YTB 2.用途
ZAr6RRv ^ SE+hB .dU91> ~Ov 2.1为对象添加属性
"z{/*uM2< I _KHQ&Z* pTCD1) nK;d\DO 2.2为对象添加方法
R4'.QZ-x ;\7`G!q /(^-=pAX nX (bVT4i 2.3克隆对象
j\>&]0-Iq function copyFnc(origin) {
u&l;\w jWUrw return Object.assign({}, origin)
~!({Unt+' I0F[Z\U }
(d&" @ "o--MBq4 var sur = { a: 1, b: 2 };
:rr<#F < dE7+w console.log(copyFnc(sur));
t%mi#Gh( 上面代码将原始对象拷贝到一个空对象,就得到了原始对象的克隆。
s>DFAu! Zg_b(ks }!K
# 不过,采用这种方法克隆,只能克隆原始对象自身的值,不能克隆它继承的值。如果想要保持继承链,可以采用下面的代码。
SVa^:\"$[ Ge)G.> c {%wrx'< function clone(origin) {
@u+LF]MY vmgd let originProto = Object.getPrototypeOf(origin);
Ne9VRM
P ."Pn[$'. return Object.assign(Object.create(originProto), origin);
~e|E5[-i ZXhNn< }
]Y,V)41gCE 在JS里子类利用Object.getPrototypeOf去调用父类方法,用来获取对象的原型。
E.C=VfBW "wVisL2+. :"Vmy.xq % M_F/ O -Nr*na^H9# MHE/#G 2.4 合并多个对象
>8NUji2I *"jlsI bz1`f >%l //多个对象合并到某个对象
uKY1AC__ RSeav AO-~dV const merge = (target, ...sources) => Object.assign(target, ...sources);
'0Q/oU //多个对象合并到新对象
&G-dxET] 'K23oQwDB N5MWMN[6aP const merge = (...sources) => Object.assign({}, ...sources);
=OrVaZ0 Eg4&D4TGp ~1Ffu x 4y)6!p 2.5为属性指定默认值
l:a#B
)|]*"yf:E 2`V0k.$?p const DEFAULTS = {
Z0 c|; .8|"@ logLevel: 0,
$m-@ICG# Rx@0EPV outputFormat: 'html'
qnU`Q{ ACEVd! q };
<`BDN DnCIfda2g function processContent(options) {
0Fs2* FS @><8YN^)% let options = Object.assign({}, DEFAULTS, options);
+WCV"m OFZo"XtF }
5hDm[*83 ————————————————
Om8Sgy? 版权声明:本文为CSDN博主「想要飞翔的小猪」的原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接及本声明。
H96|{q= 原文链接:
https://blog.csdn.net/dwb123456123456/article/details/83316471