淺拷貝

當我們想要複製一段數據的時候嗎，我們就會用到拷貝；拷貝數據又分為了淺拷貝和深拷貝，淺拷貝指複製對象或數組的頂層結構，如果對象或數組中有引用類型的屬性值，複製的是引用（地址）而非值；而深拷貝則是遞歸複製完整的對象或數組，包括嵌套的子對象或子數組，生成一個全新的對象，新對象和原對象的引用地址不同。

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

支付寶掃一掃，為大叔打賞!