js复制一个数组(浅复制、深复制)_小太阳..._js 复制数组

网络 02-07 2608

在js中，我们经常会用到数组复制，Array是引用类型，如果用arrA=arrB简单的把一个数组赋值，并没有创造出一个新数组，arrA和arrB其实指向的还是同一个地址，改变一个另一个也会随之改变，很明显这并不是我们想要的

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

下面介绍数组的浅复制（适用于数组并不复杂，即数组中没有嵌套对象或者嵌套数组）方法一：concat() concat（）方法用于连接两个或多个数组； concat() 方法不会更改现有数组，而是返回一个新数组，其中包含已连接数组的值。

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

方法二：slice() slice() 方法以新的数组对象，返回数组中被选中的元素; slice() 方法选择从给定的 start 参数开始的元素，并在给定的 end 参数处结束，但不包括; slice() 方法不会改变原始数组;

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

方法三：扩展运算符

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]

如果数组元素是对象或者数组，上面四种方法就会只拷贝数组或者对象的引用，如果我们对其中一个数组进行修改，另一个数组也会发生变化比如：

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 ] 值被影响

下面是深复制（可以完全拷贝一个数组，即使嵌套了对象或者数组，两者也不会互相影响）方法一：JSON.parse(JSON.stringify(arr))

但是该方法是有局限性的

会忽略 undefined会忽略 symbol不能序列化函数不能解决循环引用的对象

比如下面这个例子：

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

方法二：通用方法（数组或对象），拷贝的时候判断属性值的类型，如果是对象，继续递归调用深拷贝函数（简易版）

var deepCopy = function(obj) { // 判断是否是对象 if (typeof obj !== 'object') return; // 判断obj类型，根据类型新建一个对象或者数组 var newObj = obj instanceof Array ? [] : {} // 遍历对象，进行赋值 for (var key in obj) { if (obj.hasOwnProperty(key)) { let val = obj[key]; // 判断属性值的类型，如果是对象，递归调用deepCopy newObj[key] = typeof val === 'object' ? deepCopy(val) : val } } return newObj }

方法三：利用lodash的深拷贝函数 _.cloneDeep(value) 其中value就是要深拷贝的值

简单例子

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)