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

目录
  • 下面介绍数组的浅复制
    • 方法一：concat()
    • 方法二：slice()
    • 方法三：扩展运算符
    • 方法四： Object.assign()
  • 下面是深复制
    • 方法一：JSON.parse(JSON.stringify(arr))
    • 方法二：通用方法（数组或对象）
    • 方法三：利用lodash的深拷贝函数
  • 在Vue中使用
    • 安装
    • 在main.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];
        // 判断属性值的类型，如果是对象，递归调用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)

总结

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

赞 (0)

相关推荐

  • 详解JS深拷贝与浅拷贝

    一.预备知识 1.1.JS数据类型 基本数据类型:Boolean.String.Number.null.undefined 引用数据类型:Object.Array.Function.RegExp.Date等 1.2.数据类型的复制 基本数据类型的复制,是按值传递的 var a = 1; var b = a; b = 2; console.log(a); // 1 console.lob(b); // 2 引用数据类型的复制,是按引用传值 var obj1 = { a: 1; b: 2; }; v

  • JavaScript数组深拷贝和浅拷贝的两种方法

    例如这个例子: 复制代码 代码如下: var arr = ["One","Two","Three"]; var arrto = arr;arrto[1] = "test";document.writeln("数组的原始值:" + arr + "<br />");//Export:数组的原始值:One,test,Threedocument.writeln("数组的新值

  • js实现数组和对象的深浅拷贝

    前提:原始数据类型和对象类型赋值时的差异 JavaScript的数据类型分为原始数据类型和对象类型.二者在内存中存放的方式不同,导致了其赋值时差异.分别举个栗子 var x = 1; var y = x; //y获得了和x同样的值 y = 2; console.log(x); // 1 var m = [1,2]; //m存放的是指向[1,2]这个数组对象的引用地址 var n = m; //n也获得 [1,2]数组对象的引用地址 n[0] = 3; console.log(m); //[3,2

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

    目录 下面介绍数组的浅复制 方法一:concat() 方法二:slice() 方法三:扩展运算符 方法四: Object.assign() 下面是深复制 方法一:JSON.parse(JSON.stringify(arr)) 方法二:通用方法(数组或对象) 方法三:利用lodash的深拷贝函数 在Vue中使用 安装 在main.js中引入 使用 总结 在js中,我们经常会用到数组复制,Array是引用类型,如果用arrA=arrB简单的把一个数组赋值,并没有创造出一个新数组,arrA和arrB其

  • Js中forEach修改原数组与sort排序经典场景详解

    目录 forEach() 介绍 forEach() 能不能改变原数组? sort() 介绍 如果在使用 sort() 方法时不带参, sort()方法:带参时,自定义排序规则 sort 方法举例:将数组按里面某个字段从小到大排序 总结 forEach() 介绍 forEach()方法需要一个回调函数(这种函数,是由我们创建但是不由我们调用的)作为参数 回调函数中传递三个参数: 第一个参数,就是当前正在遍历的元素 第二个参数,就是当前正在遍历的元素的索引 第三个参数,就是正在遍历的数组 代码举例:

  • 在Python中等距取出一个数组其中n个数的实现方式

    应用场景: 实验中不断得到新数据,想将数据图形化,但随着时间推移,数据越来越多, 此时需要我们等距选择数据列表中固定数量的数据,来进行图形化. 注:保留首尾数据. import numpy as np a = np.arange(0, 10) b = np.arange(0, 15) c = np.arange(0, 20) d = np.arange(0, 30) e = np.arange(10, 40) f = np.arange(0, 100) def pick_arange(arang

  • 编写js扩展方法判断一个数组中是否包含某个元素

    在C#语法中判断集合是否包含某个元素可以使用Contains方法,但是类似的问题在javascript中要怎么处理呢,js中没有Contains方法. 我们可以利用js的原型扩展来封装一个我们自己的Contains方法. js代码: 复制代码 代码如下: <script type="text/javascript"> $(function () { Array.prototype.contains = function (element) { //利用Array的原型pro

  • js中实现字符串和数组的相互转化详解

    js中实现字符串和数组的相互转化详解

    最近看了一道JS的面试题,是这样描述的:利用var s1=prompt("请输入任意的字符串","")可以获取用户输入 的字符串,试编程将用户输入的字符串"反转",并且将字符串输出.         想了一下,字符串对象的方法中并没有实现反转的,但是数组中有,于是考虑了字符串和数组的相互转换问题.         JS中的内置对象中包括字符串对象(String)和数组对象(Array),这两个对象是可以通过它们对象的方法实现相互 转化的.对于St

  • JS中取二维数组中最大值的方法汇总

    在JavaScript中可以通过内置的 Math.max() 的最大值,但是要从多重数组中取出最大值,还是有一定的难度. 问题描述 假设你有一个数组,而且这个数组中包含了数字的子数组,而我们要做的是从数组中的每个子数组中返回其最大的那个最大数. 基本解决方案 function largestOfFour(arr) { var results = []; // 创建一个results变量来存储 // 创建一个外层循环,遍历外层数组 for (var n = 0; n < arr.length; n

  • JS中的二叉树遍历详解

    二叉树是由根节点,左子树,右子树组成,左子树和友子树分别是一个二叉树. 这篇文章主要在JS中实现二叉树的遍历. 一个二叉树的例子 var tree = { value: 1, left: { value: 2, left: { value: 4 } }, right: { value: 3, left: { value: 5, left: { value: 7 }, right: { value: 8 } }, right: { value: 6 } } } 广度优先遍历 广度优先遍历是从二叉树

  • php5对象复制、clone、浅复制与深复制实例详解

    本文实例讲述了php5对象复制.clone.浅复制与深复制.分享给大家供大家参考,具体如下: 对象复制的由来 为什么对象会有"复制"这个概念,这与PHP5中对象的传值方式是密切相关的,让我们看看下面这段简单的代码 PHP代码 /** * 电视机类 */ class Television { /** 屏幕高度 */ protected $_screenLength = 300; /** 屏幕宽度 */ protected $_screenHight = 200; /** 电视机外观颜色

  • Java复制(拷贝)数组的4种方法：arraycopy()方法、clone() 方法、copyOf()和copyOfRan

    所谓复制数组,是指将一个数组中的元素在另一个数组中进行复制.本文主要介绍关于 Java 里面的数组复制(拷贝)的几种方式和用法. 在 Java 中实现数组复制分别有以下 4 种方法: Arrays 类的 copyOf() 方法 Arrays 类的 copyOfRange() 方法 System 类的 arraycopy() 方法 Object 类的 clone() 方法 下面来详细介绍这 4 种方法的使用. 使用 copyOf() 方法和 copyOfRange() 方法 Arrays 类的 c

  • C++深复制和浅复制讲解

    目录 前言: 1.什么是浅复制 2.如何实现深复制 前言: 深复制和浅复制在python中同样存在,但是由于python中没有指针这个概念,所以当时学python时理解这个问题非常困难.实际上,通过这些天的学习,越发的认为C++的语法虽然复杂,但是由于其每个概念都比较清晰反而比python更好理解.python中很多语法都有些“模糊”,尤其是它的魔法函数部分,使用的时候总是怕自己理解错误从而造成误用. 1.什么是浅复制 在C++中深复制和浅复制最大的区别在“类包含指针类型的数据成员”时.由于默认

随机推荐