在js中，我們經(jīng)常會(huì)用到數(shù)組復(fù)制，Array是引用類型，如果用arrA=arrB簡(jiǎn)單的把一個(gè)數(shù)組賦值，并沒有創(chuàng)造出一個(gè)新數(shù)組，arrA和arrB其實(shí)指向的還是同一個(gè)地址，改變一個(gè)另一個(gè)也會(huì)隨之改變，很明顯這并不是我們想要的

? var arr = [1, 2, 3];
? var newArr = arr;
? arr.push(4);
? console.log(newArr1); ?// [1, 2, 3, 4]

下面介紹數(shù)組的淺復(fù)制

（適用于數(shù)組并不復(fù)雜，即數(shù)組中沒有嵌套對(duì)象或者嵌套數(shù)組）

方法一：concat()

• concat（）方法用于連接兩個(gè)或多個(gè)數(shù)組；
• concat() 方法不會(huì)更改現(xiàn)有數(shù)組，而是返回一個(gè)新數(shù)組，其中包含已連接數(shù)組的值。

? var arr = [1, 2, 3];
? var newArr = arr.concat();
? arr.push(4);
? console.log(newArr); // [1, 2, 3]

方法二：slice()

• slice() 方法以新的數(shù)組對(duì)象，返回?cái)?shù)組中被選中的元素;
• slice() 方法選擇從給定的 start 參數(shù)開始的元素，并在給定的 end 參數(shù)處結(jié)束，但不包括;
• slice() 方法不會(huì)改變?cè)紨?shù)組;

? var arr = [1, 2, 3];
? var newArr = arr.slice();
? arr[0] = 10;
? console.log(arr);// [10, 2, 3]
? console.log(newArr);// [1, 2, 3]

方法三：擴(kuò)展運(yùn)算符

? var arr = [1, 2, 3];
? var [ ...newArr ] = arr;
? arr[0] = 10;
? console.log(arr); // [10, 2, 3]
? console.log(newArr);// [1, 2, 3]

方法四： Object.assign()

?var arr = [1, 2, 3];
?var newArr = Object.assign([], arr);
?arr[0] = 10;
?console.log(arr);// [10, 2, 3]
?console.log(newArr);// [1, 2, 3]

如果數(shù)組元素是對(duì)象或者數(shù)組，上面四種方法就會(huì)只拷貝數(shù)組或者對(duì)象的引用，如果我們對(duì)其中一個(gè)數(shù)組進(jìn)行修改，另一個(gè)數(shù)組也會(huì)發(fā)生變化

比如：

? var arr = [ { a: 1 }, [ 1, 2 ], 3 ];
? let newArr = arr.concat();
? arr[0].a = 2;
? console.log(arr); // [ { a: 2 }, [ 1, 2 ], 3 ]
? console.log(newArr);// [ { a: 2 }, [ 1, 2 ], 3 ] 值被影響

下面是深復(fù)制

（可以完全拷貝一個(gè)數(shù)組，即使嵌套了對(duì)象或者數(shù)組，兩者也不會(huì)互相影響）

方法一：JSON.parse(JSON.stringify(arr))

? var arr = [ { a: 1 }, [ 1, 2 ], 3 ];
? // let newArr = JSON.parse(JSON.stringify(arr));
? let newArr = arr.concat();
? arr[0].a = 2;
? console.log(arr); // [ { a: 2 }, [ 1, 2 ], 3 ]
? console.log(newArr);// [ { a: 1 }, [ 1, 2 ], 3 ]

但是該方法是有局限性的

• 會(huì)忽略 undefined
• 會(huì)忽略 symbol
• 不能序列化函數(shù)
• 不能解決循環(huán)引用的對(duì)象

比如下面這個(gè)例子：

let a = {
? age: undefined,
? sex: Symbol('male'),
? jobs: function() {},
? name: 'sun'
}
let b = JSON.parse(JSON.stringify(a))
console.log(b) // {name: "sun"}

方法二：通用方法（數(shù)組或?qū)ο螅?/h3>

拷貝的時(shí)候判斷屬性值的類型，如果是對(duì)象，繼續(xù)遞歸調(diào)用深拷貝函數(shù)（簡(jiǎn)易版）

? var deepCopy = function(obj) {
? ? // 判斷是否是對(duì)象
? ? if (typeof obj !== 'object') return;
? ? // 判斷obj類型，根據(jù)類型新建一個(gè)對(duì)象或者數(shù)組
? ? var newObj = obj instanceof Array ? [] : {}
? ? // 遍歷對(duì)象，進(jìn)行賦值
? ? for (var key in obj) {
? ? ? if (obj.hasOwnProperty(key)) {
? ? ? ? let val = obj[key];
? ? ? ? // 判斷屬性值的類型，如果是對(duì)象，遞歸調(diào)用deepCopy
? ? ? ? newObj[key] = typeof val === 'object' ? deepCopy(val) : val
? ? ? }
? ? }
? ? return newObj
? }

方法三：利用lodash的深拷貝函數(shù)

_.cloneDeep(value)

其中value就是要深拷貝的值

簡(jiǎn)單例子

var objects = [{ 'a': 1 }, { 'b': 2 }];
var deep = _.cloneDeep(objects);
console.log(deep[0] === objects[0]);
// => false

在Vue中使用

安裝

npm i --save lodash

在main.js中引入

import _ from 'lodash';
Vue.prototype._ = _;

使用

let newObj = this._.cloneDeep(oldObj)

總結(jié)

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

最新評(píng)論