重要:什么是拷貝？之前也寫過類似的文章，大家可以看《理解js的深拷貝和淺拷貝原理和實現的方法》

首先來直觀的感受一下什么是拷貝。

let arr = [1, 2, 3];

let newArr = arr;

newArr[0] = 100;

console.log(arr);//[100, 2, 3]

這是直接賦值的情況，不涉及任何拷貝。當改變newArr的時候，由于是同一個引用，arr指向的值也跟著改變。

現在進行淺拷貝:

let arr = [1, 2, 3];

let newArr = arr.slice();

newArr[0] = 100;

console.log(arr);//[1, 2, 3]

當修改newArr的時候，arr的值并不改變。什么原因?因為這里newArr是arr淺拷貝后的結果，newArr和arr現在引用的已經不是同一塊空間啦！

這就是淺拷貝！

但是這又會帶來一個潛在的問題:

let arr = [1, 2, {val: 4}];

let newArr = arr.slice();

newArr[2].val = 1000;

console.log(arr);//[ 1, 2, { val: 1000 } ]

咦!不是已經不是同一塊空間的引用了嗎？為什么改變了newArr改變了第二個元素的val值，arr也跟著變了。

這就是淺拷貝的限制所在了。它只能拷貝一層對象。如果有對象的嵌套，那么淺拷貝將無能為力。但幸運的是，深拷貝就是為了解決這個問題而生的，它能

解決無限極的對象嵌套問題，實現徹底的拷貝。當然，這是我們下一篇的重點。現在先讓大家有一個基本的概念。

接下來，我們來研究一下JS中實現淺拷貝到底有多少種方式？

1. 手動實現

const shallowClone = (target) => {

if (typeof target === 'object' && target !== null) {

const cloneTarget = Array.isArray(target) ? []: {};

for (let prop in target) {

if (target.hasOwnProperty(prop)) {

cloneTarget[prop] = target[prop];

}

}

return cloneTarget;

} else {

return target;

}

}

2. Object.assign

但是需要注意的是，Object.assgin() 拷貝的是對象的屬性的引用，而不是對象本身。

let obj = { name: 'sy', age: 18 };

const obj2 = Object.assign({}, obj, {name: 'sss'});

console.log(obj2);//{ name: 'sss', age: 18 }

3. concat淺拷貝數組

let arr = [1, 2, 3];

let newArr = arr.concat();

newArr[1] = 100;

console.log(arr);//[ 1, 2, 3 ]

4. slice淺拷貝

開頭的例子不就說的這個嘛！

5. …展開運算符

let arr = [1, 2, 3];

let newArr = [...arr];//跟arr.slice()是一樣的效果

更多相關文章推薦：

總結

以上是生活随笔為你收集整理的js 浅拷贝直接赋值_第二十二篇 JS中浅拷贝的方法有哪些？的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。