目录下面介绍数组的浅复制方法一:concat()方法二:slice()方法三:扩展运算符方法四: Object.assign()下面是深复制方法一:JSON.parse(j
在js中,我们经常会用到数组复制,Array是引用类型,如果用arrA=arrB简单的把一个数组赋值,并没有创造出一个新数组,arrA和arrB其实指向的还是同一个地址,改变一个另一个也会随之改变,很明显这并不是我们想要的
var arr = [1, 2, 3];
var newArr = arr;
arr.push(4);
console.log(newArr1); // [1, 2, 3, 4]
(适用于数组并不复杂,即数组中没有嵌套对象或者嵌套数组)
var arr = [1, 2, 3];
var newArr = arr.concat();
arr.push(4);
console.log(newArr); // [1, 2, 3]
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]
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 ] 值被影响
(可以完全拷贝一个数组,即使嵌套了对象或者数组,两者也不会互相影响)
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 ]
但是该方法是有局限性的
比如下面这个例子:
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
}
_.cloneDeep(value)
其中value就是要深拷贝的值
简单例子
var objects = [{ 'a': 1 }, { 'b': 2 }];
var deep = _.cloneDeep(objects);
console.log(deep[0] === objects[0]);
// => false
npm i --save lodash
import _ from 'lodash';
Vue.prototype._ = _;
let newObj = this._.cloneDeep(oldObj)
以上为个人经验,希望能给大家一个参考,也希望大家多多支持编程网。
--结束END--
本文标题: js中如何复制一个数组(浅复制、深复制)
本文链接: https://lsjlt.com/news/209339.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
2024-01-12
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
0