淺拷貝 當我們想要複製一段數據的時候嗎，我們就會用到拷貝；拷貝數據又分為了淺拷貝和深拷貝，淺拷貝指複製對象或數組的頂層結構，如果對象或數組中有引用類型的屬性值，複製的是引用（地址）而非值；而深拷貝則是遞歸複製完整的對象或數組，包括嵌套的子對象或子數組，生成一個全新的對象，新對象和原對象的引用地址不同 ...
淺拷貝
當我們想要複製一段數據的時候嗎，我們就會用到拷貝；拷貝數據又分為了淺拷貝和深拷貝，淺拷貝指複製對象或數組的頂層結構，如果對象或數組中有引用類型的屬性值，複製的是引用（地址）而非值；而深拷貝則是遞歸複製完整的對象或數組，包括嵌套的子對象或子數組，生成一個全新的對象，新對象和原對象的引用地址不同。
javascript中的實現
JavaScript 中可以使用不同方法實現對象的淺拷貝。淺拷貝只複製對象的第一層屬性，不會複製嵌套對象內部的屬性。以下是幾種常見的淺拷貝方法：
1. 擴展運算符（Spread Operator）：
使用擴展運算符 ... 可以創建一個對象的淺拷貝：
const originalObj = { name: 'John', age: 30 };
const newObj = { ...originalObj };
newObj.name = 'Jane';
console.log(originalObj.name); // 輸出 'John'，原始對象不受影響
console.log(newObj.name); // 輸出 'Jane'，新對象被修改
2. Object.assign() 方法：
Object.assign() 方法可以將一個或多個對象的屬性複製到目標對象中，也可以用來創建對象的淺拷貝：
const originalObj = { name: 'John', age: 30 };
const newObj = Object.assign({}, originalObj);
newObj.name = 'Jane';
console.log(originalObj.name); // 輸出 'John'，原始對象不受影響
console.log(newObj.name); // 輸出 'Jane'，新對象被修改
這些方法都可以用來創建對象的淺拷貝，但請註意，如果對象中包含嵌套對象，這些嵌套對象仍然是引用關係，所以修改嵌套對象會影響到原始對象。如果需要深拷貝，即遞歸複製對象及其嵌套對象的屬性，需要使用其他方法，如 Lodash 的 _.cloneDeep() 方法。
vue.js中使用擴展運算符實現淺拷貝
let searchForm = {...this.searchForm};
this.searchForm是一個對象，通過{...this.searchForm}這個表達式，創建了一個新對象，新對象包含了與this.searchForm相同的屬性和屬性值。
這個操作實際上是在創建 searchForm 對象的副本，而不是將原始對象直接賦值給 searchForm。這意味著如果你後續修改 searchForm，不會影響到原始的 this.searchForm 對象，因為它們是兩個不同的對象。
這種操作通常用於對象或數組的複製，以便在不影響原始數據的情況下進行修改。這是一種淺拷貝，因為它只複製了對象的第一層屬性，如果對象中包含了嵌套對象，嵌套對象仍然是引用，修改嵌套對象會影響到原始對象。
以下是一個示例：
let originalObj = { name: 'John', age: 30 };
let newObj = { ...originalObj };
newObj.name = 'Jane';
console.log(originalObj.name); // 輸出 'John'，原始對象不受影響
console.log(newObj.name); // 輸出 'Jane'，新對象被修改
這是Vue.js中常見的一種數據處理方式，通常用於確保在處理數據時不會直接修改原始數據，以便在需要時進行撤銷或回滾操作。
作者：倉儲大叔，張占嶺，
榮譽：微軟MVP
QQ：853066980
支付寶掃一掃，為大叔打賞!
