js复制一个数组(浅复制、深复制)
在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))
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];// 判断属性值的类型,如果是对象,递归调用deepCopynewObj[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)
js复制一个数组(浅复制、深复制)相关推荐
- JavaScript之浅复制【拷贝】与深复制【拷贝】【二】
下面了解下什么浅复制[拷贝]和深复制[拷贝],通过下面的阅读你将了解到: 1.什么是浅复制以及使用场景 2.什么是深复制以及使用场景 3.浅复制和深复制有哪些方式 复制代码 一.我们先来了解下,Jav ...
- python学习 - copy模块的浅复制(copy)与深复制(deepcopy)
python学习 - copy模块的浅复制(copy)与深复制(deepcopy) 简介 copy.copy()详解 copy.deepcopy()详解 简介 在使用列表或者字典进行传递参数的时候,可 ...
- js从一个数组中筛选出另一个数组中存在的值
js从一个数组中筛选出另一个数组中存在的值 这里从arr中筛选arr1中存在的值,arr2为筛选结果数组 let arr=["1","2","3&qu ...
- js向一个数组中添加元素
js向一个数组中添加元素 1,向数组开头添加元素 unshift() 方法可向数组的开头添加一个或更多元素,并返回新的长度 unshift() 方法将把它的参数插入 arrayObject 的头部,并 ...
- js判断一个数组是否为另一个数组的子集
一.利用every()和includes() /*js判断一个数组是否为另一个数组的子集*/ let arr1=[1,2,3,null,NaN,undefined,Infinity,'']; let ...
- java 复制一个数组_浅谈Java中复制数组的方式
在Java里面,可以用复制语句"A=B"给基本类型的数据传递值,但是如果A,B是两个同类型的数组,复制就相当于将一个数组变量的引用传递给另一个数组:如果一个数组发生改变,那么引用同 ...
- java clone 深复制_Java的clone():深复制与浅复制
Java中要想自定义类的对象可以被复制,自定义类就必须实现Cloneable中的clone()方法,如下: 1 public class Student implements Cloneable { ...
- vue+js 从一个数组中删除在另一个数组中已存在对象;
数组,对象常用的删除方法: 1.根据一个数组元素,删除另一个数组中的对象: var a = [{ id: 15 }, { id: -1 }, { id: 0 }, { id: 3 }, { id: 1 ...
- oracle复制一个表的结构图,Oracle复制表结构
Oracle复制表结构 如下,表a是数据库中已经存在的表,b是准备根据表a进行复制创建的表: 1.只复制表结构的sql create table b as select * from a where ...
- 前端js获取一个数组中的连续数字
var oldArr = [1,2,3,7,8,9,15,17,18,19];//根据这个数组可以得到一下一个二维数组var newArr = [[1,2,3],[7,8,9],[15],[17,18 ...
最新文章
- Spring MVC那点事儿
- 【软件工程】5.8 黑盒白盒测试
- 通过/proc/PID/status查看进程内存占用情况
- PC SERVER 序列号查询
- 他不怕被拒绝_【保险知识】高情商保险营销,再也不怕被拒绝!
- mysql 前缀索引 语法_PHP 之Mysql优化
- 链接脚本文件(*.lds)
- 近15亿元融资,够不够匹克“翻身”?
- 字典的修改,删除,查找,遍历操作
- 解析Pinterest:兴趣乐园背后的大文章
- CSU 8月月赛 Decimal 小数化分数
- 各国市场分析(越南,智利)
- axio使用get方法之传递对象数组问题及解决方法
- 笔记(一)Home Assistant简介
- 区块链知识转载博文1: 共识算法之争(PBFT,Raft,PoW,PoS,DPoS,Ripple)
- burp 安装 license key not recognized
- 65岁的程序员大神求职被歧视!HR:我们不想招大爷~
- (C)输入一个字符串(串长不超过60),删除字符串中所有的空格符
- BZOJ 3238 [Ahoi2013]差异
- 影响未来十年的2020十大科技趋势,除了AI与区块链,还有哪些?