<span style="color:#000000"><code class="language-js"><span style="color:#99cc99">...</span>
<span style="color:#6699cc">data</span><span style="color:#999999">(</span><span style="color:#999999">)</span> <span style="color:#999999">{</span>
?? ?<span style="color:#cc99cc">return</span> <span style="color:#999999">{</span>
?? ??? ?name<span style="color:#999999">:</span> <span style="color:#99cc99">''</span><span style="color:#999999">,</span>
?? ??? ?sex<span style="color:#999999">:</span> <span style="color:#99cc99">''</span><span style="color:#999999">,</span>
?? ??? ?desc<span style="color:#999999">:</span> <span style="color:#99cc99">''</span>
?? ?<span style="color:#999999">}</span>
<span style="color:#999999">}</span>
<span style="color:#99cc99">...</span>
?
<span style="color:#999999">// 逐個(gè)賦值</span>
<span style="color:#cc99cc">this</span><span style="color:#999999">.</span>name <span style="color:#99cc99">=</span> <span style="color:#99cc99">''</span>
<span style="color:#cc99cc">this</span><span style="color:#999999">.</span>sex <span style="color:#99cc99">=</span> <span style="color:#99cc99">''</span>
<span style="color:#cc99cc">this</span><span style="color:#999999">.</span>desc <span style="color:#99cc99">=</span> <span style="color:#99cc99">''</span>
?
</code></span>

這個(gè)方法比較笨，當(dāng)然也可以實(shí)現(xiàn)效果，但是一個(gè)一個(gè)去重新賦值比較麻煩而且代碼看起來(lái)也會(huì)比較亂。

下面這個(gè)方法肯定是你喜歡的，一行代碼搞定～

2. 使用Object.assign()

MDN關(guān)于該方法的介紹：Object.assign() 方法用于將所有可枚舉屬性的值從一個(gè)或多個(gè)源對(duì)象復(fù)制到目標(biāo)對(duì)象。它將返回目標(biāo)對(duì)象。

用法： Object.assign(target, ...sources)

第一個(gè)參數(shù)是目標(biāo)對(duì)象，第二個(gè)參數(shù)是源對(duì)象，就是將源對(duì)象屬性復(fù)制到目標(biāo)對(duì)象，返回目標(biāo)對(duì)象

其中就是將一個(gè)對(duì)象的屬性copy到另一個(gè)對(duì)象

vue中：

this.$data 獲取當(dāng)前狀態(tài)下的data
this.$options.data() 獲取該組件初始狀態(tài)下的data

所以，下面就可以將初始狀態(tài)的data復(fù)制到當(dāng)前狀態(tài)的data，實(shí)現(xiàn)重置效果：

Object.assign(this.$data, this.$options.data())

當(dāng)然，如果你只想重置data中的某一個(gè)對(duì)象或者屬性：

this.form = this.$options.data().form

擴(kuò)展

Object.assign(target, ...sources) 方法還可以用來(lái)合并對(duì)象：

<span style="color:#000000"><code class="language-js"><span style="color:#cc99cc">const</span> o1 <span style="color:#99cc99">=</span> <span style="color:#999999">{</span> a<span style="color:#999999">:</span> <span style="color:#f99157">1</span> <span style="color:#999999">}</span><span style="color:#999999">;</span>
<span style="color:#cc99cc">const</span> o2 <span style="color:#99cc99">=</span> <span style="color:#999999">{</span> b<span style="color:#999999">:</span> <span style="color:#f99157">2</span> <span style="color:#999999">}</span><span style="color:#999999">;</span>
<span style="color:#cc99cc">const</span> o3 <span style="color:#99cc99">=</span> <span style="color:#999999">{</span> c<span style="color:#999999">:</span> <span style="color:#f99157">3</span> <span style="color:#999999">}</span><span style="color:#999999">;</span>
?
<span style="color:#cc99cc">const</span> obj <span style="color:#99cc99">=</span> Object<span style="color:#999999">.</span><span style="color:#6699cc">assign</span><span style="color:#999999">(</span>o1<span style="color:#999999">,</span> o2<span style="color:#999999">,</span> o3<span style="color:#999999">)</span><span style="color:#999999">;</span>
console<span style="color:#999999">.</span><span style="color:#6699cc">log</span><span style="color:#999999">(</span>obj<span style="color:#999999">)</span><span style="color:#999999">;</span> <span style="color:#999999">// { a: 1, b: 2, c: 3 }</span>
console<span style="color:#999999">.</span><span style="color:#6699cc">log</span><span style="color:#999999">(</span>o1<span style="color:#999999">)</span><span style="color:#999999">;</span> ?<span style="color:#999999">// { a: 1, b: 2, c: 3 }, 注意目標(biāo)對(duì)象自身也會(huì)改變。</span>
</code></span>

如果對(duì)象中含有相同屬性，取最后一個(gè)屬性：

<span style="color:#000000"><code class="language-js"><span style="color:#cc99cc">const</span> o1 <span style="color:#99cc99">=</span> <span style="color:#999999">{</span> a<span style="color:#999999">:</span> <span style="color:#f99157">1</span><span style="color:#999999">,</span> b<span style="color:#999999">:</span> <span style="color:#f99157">1</span><span style="color:#999999">,</span> c<span style="color:#999999">:</span> <span style="color:#f99157">1</span> <span style="color:#999999">}</span><span style="color:#999999">;</span>
<span style="color:#cc99cc">const</span> o2 <span style="color:#99cc99">=</span> <span style="color:#999999">{</span> b<span style="color:#999999">:</span> <span style="color:#f99157">2</span><span style="color:#999999">,</span> c<span style="color:#999999">:</span> <span style="color:#f99157">2</span> <span style="color:#999999">}</span><span style="color:#999999">;</span>
<span style="color:#cc99cc">const</span> o3 <span style="color:#99cc99">=</span> <span style="color:#999999">{</span> c<span style="color:#999999">:</span> <span style="color:#f99157">3</span> <span style="color:#999999">}</span><span style="color:#999999">;</span>
?
<span style="color:#cc99cc">const</span> obj <span style="color:#99cc99">=</span> Object<span style="color:#999999">.</span><span style="color:#6699cc">assign</span><span style="color:#999999">(</span><span style="color:#999999">{</span><span style="color:#999999">}</span><span style="color:#999999">,</span> o1<span style="color:#999999">,</span> o2<span style="color:#999999">,</span> o3<span style="color:#999999">)</span><span style="color:#999999">;</span>
console<span style="color:#999999">.</span><span style="color:#6699cc">log</span><span style="color:#999999">(</span>obj<span style="color:#999999">)</span><span style="color:#999999">;</span> <span style="color:#999999">// { a: 1, b: 2, c: 3 } 屬性取最后一個(gè)對(duì)象的屬性</span></code></span>

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: