广告
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >js中如何复制一个数组(浅复制、深复制)
  • 956
分享到

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

js复制数组js浅复制js深复制 2023-05-15 17:05:13 956人浏览 八月长安
摘要

目录下面介绍数组的浅复制方法一: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]

下面介绍数组的浅复制

(适用于数组并不复杂,即数组中没有嵌套对象或者嵌套数组)

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

总结

以上为个人经验,希望能给大家一个参考,也希望大家多多支持编程网。

--结束END--

本文标题: js中如何复制一个数组(浅复制、深复制)

本文链接: https://www.lsjlt.com/news/209339.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • js中如何复制一个数组(浅复制、深复制)
    目录下面介绍数组的浅复制方法一:concat()方法二:slice()方法三:扩展运算符方法四: Object.assign()下面是深复制方法一:JSON.parse(J...
    99+
    2023-05-15
    js复制数组 js浅复制 js深复制
  • JavaScript数组中的深复制与浅复制是什么
    本篇内容介绍了“JavaScript数组中的深复制与浅复制是什么”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所...
    99+
    2022-10-19
  • js中怎么复制一个数组
    这篇“js中怎么复制一个数组”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“js中怎么复制一个数组”文章吧。在js中,我们经常...
    99+
    2023-07-06
  • JS的深浅复制详细
    目录1、浅复制的意思2、深复制的意思3、使用深复制的原由4、可实现深复制的几种方法实现方式一:JSON的序列化与反序列化实现方式二:Object.assign()实现方式三:扩展运算...
    99+
    2022-11-12
  • 深入浅析Java中对象的深复制与浅复制
    本篇文章为大家展示了深入浅析Java中对象的深复制与浅复制,内容简明扼要并且容易理解,绝对能使你眼前一亮,通过这篇文章的详细介绍希望你能有所收获。 Java对象深复制与浅复制实例详解我们在遇到一些业务场景的时候经常需要对对象进行复...
    99+
    2023-05-31
    java 对象 中对
  • C++中深复制和浅复制是什么
    这篇文章主要为大家展示了“C++中深复制和浅复制是什么”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“C++中深复制和浅复制是什么”这篇文章吧。1、什么是浅复制在C++中深复制和浅复制最大的区别在...
    99+
    2023-06-29
  • Python中的赋值与浅复制与深复制之间
    #赋值与浅复制一层列表 """a = [1, 2]    b = a   #赋值c = a.copy() #浅复制a.append(3)     print(b)  #父对象改变print(c)  #父对象不变'''[1, 2, 3][1...
    99+
    2023-01-30
    赋值 Python
  • python中的深复制和浅复制是什么意思
    本篇内容介绍了“python中的深复制和浅复制是什么意思”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!0、定义:    ...
    99+
    2023-06-04
  • js怎么复制数组一部分
    本篇内容介绍了“js怎么复制数组一部分”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!当我们想要复制数组之间...
    99+
    2022-10-19
  • JS对象复制(深拷贝和浅拷贝)
    目录一、浅拷贝1、Object.assign(target,source,source...)2、扩展运算符(spread)二、深拷贝1、使用对象序列化 JSON.stringify...
    99+
    2022-11-12
  • php如何复制一个对象数组中
    随着PHP作为一种优秀的后端语言的不断普及,它的应用范围也越来越广泛,PHP中的对象数组是一个非常常见的数据类型,在实际开发中,我们经常需要对对象数组进行赋值或者拷贝。本文将介绍PHP中如何复制一个对象数组,希望能够帮助PHP开发者更好地进...
    99+
    2023-05-22
  • Java中对象的深复制和浅复制的详细介绍
    这篇文章主要介绍“Java中对象的深复制和浅复制的详细介绍”,在日常操作中,相信很多人在Java中对象的深复制和浅复制的详细介绍问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”Java中对象的深复制和浅复制的详...
    99+
    2023-06-17
  • js如何多次复制一个字符串
    小编给大家分享一下js如何多次复制一个字符串,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!如何多次复制一个字符串JS 字符串允许简单的重复,与纯手工复制字符串不同...
    99+
    2023-06-27
  • Java中的“浅复制”与“深复制”的区别与实现(附代码)
    将一个对象的引用复制给另一个对象,一共有三种方式。第一种方式是直接赋值,第二种方式是浅复制,第三种方式是深复制。1.直接赋值在Java中,A a1 = a2,这实际上复制的是引用,也就是说 a1 和 a2指向的是同一个对象。因此,当a1变化...
    99+
    2016-02-27
    java基础 java 深复制 浅复制
  • 深入浅析Android中的ListView复用机制
    这篇文章给大家介绍深入浅析Android中的ListView复用机制,内容非常详细,感兴趣的小伙伴们可以参考借鉴,希望对大家能有所帮助。1.ListView的复用机制  ListView是我们经常使用的一个控件,虽然说都会用,但是...
    99+
    2023-05-31
    android listview roi
  • js如何实现一键复制功能
    这篇文章主要介绍了js如何实现一键复制功能,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。项目描述:最近做一个移动端活动页面,用户抽奖后会生成...
    99+
    2022-10-19
  • 怎么复制一个RAC CDB数据库
    本篇内容介绍了“怎么复制一个RAC CDB数据库”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!具体的复制操...
    99+
    2022-10-19
  • oracle 如何把一个表中的数据复制到另一个表中
    复制旧表的数据到新表(假设两个表结构不一样)INSERT INTO 新表(字段1,字段2,.......) SELECT 字段1,字段2,...... FROM 旧表  ...
    99+
    2022-10-18
  • 如何在java中对数组进行复制
    本篇文章为大家展示了如何在java中对数组进行复制,内容简明扼要并且容易理解,绝对能使你眼前一亮,通过这篇文章的详细介绍希望你能有所收获。1、System.arraycopy的用法:public static void&...
    99+
    2023-05-30
    java
  • mongodb如何复制数据
    MongoDB提供了多种方式来复制数据:1. **复制集(Replica Set)**:复制集是MongoDB中最常用的复制方式。它...
    99+
    2023-09-06
    mongodb
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作