淺拷貝
當(dāng)我們想要復(fù)制一段數(shù)據(jù)的時(shí)候嗎，我們就會(huì)用到拷貝；拷貝數(shù)據(jù)又分為了淺拷貝和深拷貝，淺拷貝指復(fù)制對(duì)象或數(shù)組的頂層結(jié)構(gòu)，如果對(duì)象或數(shù)組中有引用類(lèi)型的屬性值，復(fù)制的是引用（地址）而非值；而深拷貝則是遞歸復(fù)制完整的對(duì)象或數(shù)組，包括嵌套的子對(duì)象或子數(shù)組，生成一個(gè)全新的對(duì)象，新對(duì)象和原對(duì)象的引用地址不同。
javascript中的實(shí)現(xiàn)
JavaScript 中可以使用不同方法實(shí)現(xiàn)對(duì)象的淺拷貝。淺拷貝只復(fù)制對(duì)象的第一層屬性，不會(huì)復(fù)制嵌套對(duì)象內(nèi)部的屬性。以下是幾種常見(jiàn)的淺拷貝方法：
1. 擴(kuò)展運(yùn)算符（Spread Operator）：
使用擴(kuò)展運(yùn)算符 ... 可以創(chuàng)建一個(gè)對(duì)象的淺拷貝：
const originalObj = { name: 'John', age: 30 };
const newObj = { ...originalObj };
newObj.name = 'Jane';
console.log(originalObj.name); // 輸出 'John'，原始對(duì)象不受影響
console.log(newObj.name); // 輸出 'Jane'，新對(duì)象被修改
2. Object.assign() 方法：
Object.assign() 方法可以將一個(gè)或多個(gè)對(duì)象的屬性復(fù)制到目標(biāo)對(duì)象中，也可以用來(lái)創(chuàng)建對(duì)象的淺拷貝：
const originalObj = { name: 'John', age: 30 };
const newObj = Object.assign({}, originalObj);
newObj.name = 'Jane';
console.log(originalObj.name); // 輸出 'John'，原始對(duì)象不受影響
console.log(newObj.name); // 輸出 'Jane'，新對(duì)象被修改
這些方法都可以用來(lái)創(chuàng)建對(duì)象的淺拷貝，但請(qǐng)注意，如果對(duì)象中包含嵌套對(duì)象，這些嵌套對(duì)象仍然是引用關(guān)系，所以修改嵌套對(duì)象會(huì)影響到原始對(duì)象。如果需要深拷貝，即遞歸復(fù)制對(duì)象及其嵌套對(duì)象的屬性，需要使用其他方法，如 Lodash 的 _.cloneDeep() 方法。
vue.js中使用擴(kuò)展運(yùn)算符實(shí)現(xiàn)淺拷貝
let searchForm = {...this.searchForm};
-
this.searchForm是一個(gè)對(duì)象，通過(guò){...this.searchForm}這個(gè)表達(dá)式，創(chuàng)建了一個(gè)新對(duì)象，新對(duì)象包含了與this.searchForm相同的屬性和屬性值。
這個(gè)操作實(shí)際上是在創(chuàng)建 searchForm 對(duì)象的副本，而不是將原始對(duì)象直接賦值給 searchForm。這意味著如果你后續(xù)修改 searchForm，不會(huì)影響到原始的 this.searchForm 對(duì)象，因?yàn)樗鼈兪莾蓚€(gè)不同的對(duì)象。
這種操作通常用于對(duì)象或數(shù)組的復(fù)制，以便在不影響原始數(shù)據(jù)的情況下進(jìn)行修改。這是一種淺拷貝，因?yàn)樗粡?fù)制了對(duì)象的第一層屬性，如果對(duì)象中包含了嵌套對(duì)象，嵌套對(duì)象仍然是引用，修改嵌套對(duì)象會(huì)影響到原始對(duì)象。
以下是一個(gè)示例：文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-705839.html
let originalObj = { name: 'John', age: 30 };
let newObj = { ...originalObj };
newObj.name = 'Jane';
console.log(originalObj.name); // 輸出 'John'，原始對(duì)象不受影響
console.log(newObj.name); // 輸出 'Jane'，新對(duì)象被修改
這是Vue.js中常見(jiàn)的一種數(shù)據(jù)處理方式，通常用于確保在處理數(shù)據(jù)時(shí)不會(huì)直接修改原始數(shù)據(jù)，以便在需要時(shí)進(jìn)行撤銷(xiāo)或回滾操作。文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-705839.html
到了這里，關(guān)于vue~對(duì)象的淺拷貝的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
