js中如何复制一个数组(浅复制、深复制)

来源：jb51　　时间：2023/4/14 9:17:53　　对本文有异议

下面介绍数组的浅复制

（适用于数组并不复杂，即数组中没有嵌套对象或者嵌套数组）

方法一：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))

? 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 ]

但是该方法是有局限性的

会忽略 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)

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持w3xue。

友情链接：直通硅谷　点职佳　北美留学生论坛

JavaScript热门文章

echarts 饼图 + 全屏显示

js正则匹配以{开头,以}结尾的表达式怎么写？-附源码

echarts 实现数据(tooltip)自动轮播插件

Js设置博客园主题色(theme-color)

elementUI 设置input的只读或禁用的方法

超级好用的流程图js框架值得收藏

layui table+复杂表头+合并单元格

获取地理位置

如何使用JavaScript导入和导出Excel文件

WebStorm eslint插件报错解决 - TypeError: this.CliEngine is not a constructor

JavaScript推荐文章

一些八股：1.fetch 的理解。2.let、const、var

电子表格转身购物车：三步轻松实现

Canvas简历编辑器-图形绘制与状态管理(轻量级DOM)

IntersectionObserver + scrollIntoView 实现电梯导航 - xingba-coder

可视化—gojs 超多超实用经验分享(三)

PixiJS源码分析系列：第一章从最简单的例子入手

WebRTC入门

前端 Array.sort() 源码学习

【技巧】JS代码这么写，前端小姐姐都会爱上你

【JS】await异常捕获，这样做才完美

目录