返回顶部
首页 > 资讯 > 前端开发 > 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://lsjlt.com/news/209339.html(转载时请注明来源链接)

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

猜你喜欢
  • js中如何复制一个数组(浅复制、深复制)
    目录下面介绍数组的浅复制方法一:concat()方法二:slice()方法三:扩展运算符方法四: Object.assign()下面是深复制方法一:JSON.parse(J...
    99+
    2023-05-15
    js复制数组 js浅复制 js深复制
  • JavaScript数组中的深复制与浅复制是什么
    本篇内容介绍了“JavaScript数组中的深复制与浅复制是什么”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所...
    99+
    2024-04-02
  • js中怎么复制一个数组
    这篇“js中怎么复制一个数组”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“js中怎么复制一个数组”文章吧。在js中,我们经常...
    99+
    2023-07-06
  • JS的深浅复制详细
    目录1、浅复制的意思2、深复制的意思3、使用深复制的原由4、可实现深复制的几种方法实现方式一:JSON的序列化与反序列化实现方式二:Object.assign()实现方式三:扩展运算...
    99+
    2024-04-02
  • C++深复制和浅复制讲解
    目录前言:1、什么是浅复制2、如何实现深复制前言: 深复制和浅复制在python中同样存在,但是由于python中没有指针这个概念,所以当时学python时理解这个问题非常困难。实际...
    99+
    2024-04-02
  • 深入浅析Java中对象的深复制与浅复制
    本篇文章为大家展示了深入浅析Java中对象的深复制与浅复制,内容简明扼要并且容易理解,绝对能使你眼前一亮,通过这篇文章的详细介绍希望你能有所收获。 Java对象深复制与浅复制实例详解我们在遇到一些业务场景的时候经常需要对对象进行复...
    99+
    2023-05-31
    java 对象 中对
  • C++中深复制和浅复制是什么
    这篇文章主要为大家展示了“C++中深复制和浅复制是什么”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“C++中深复制和浅复制是什么”这篇文章吧。1、什么是浅复制在C++中深复制和浅复制最大的区别在...
    99+
    2023-06-29
  • python变量及浅复制与深复制
    一、变量及定义:     变量定义:一段存放在内存特定区域的空间,在python中变量名没有类型,引用的对象有类型之分;     命名规则:字母或下划线开头,不能以数字开头。     特殊变量:以单下划线(_)开头的变量 不能被 from ...
    99+
    2023-01-31
    变量 python
  • PHP数组的复制策略:深度复制与浅复制,解析与性能对比
    在 php 中,数组复制有两种策略:深度复制和浅复制。深度复制创建源数组的独立副本,对其中一个数组的更改不会影响另一个数组。浅复制仅复制数组的引用,对其中一个数组的更改会反映在另一个数组...
    99+
    2024-05-02
    深度复制 浅复制
  • php如何复制一个对象数组中
    随着PHP作为一种优秀的后端语言的不断普及,它的应用范围也越来越广泛,PHP中的对象数组是一个非常常见的数据类型,在实际开发中,我们经常需要对对象数组进行赋值或者拷贝。本文将介绍PHP中如何复制一个对象数组,希望能够帮助PHP开发者更好地进...
    99+
    2023-05-22
  • JavaScript 赋值,浅复制和深复制的区别
    目录一、变量赋值1.1 原始值和引用值1.2 赋值二、浅复制(Shallow Copy)2.1 原生 JavaScript 中的浅复制Object.assign()2.2 浅复制的手...
    99+
    2024-04-02
  • Java 浅复制和深复制的实例详解
    Java 浅复制和深复制的实例详解1 浅复制和深复制区别浅复制:浅复制只是复制本对象的原始数据类型,如int、float、String,对于数组和对象引用等是不会复制的。因此浅复制是有风险的。深复制:不但对原始数据类型进行复制,对于对象中的...
    99+
    2023-05-31
    java 浅复制 深复制
  • 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
  • 如何复制数组?
    复制数组的方法包括:直接赋值(基本类型数组)使用 array.copy() 方法创建新数组并逐个元素复制 如何复制数组? 复制数组是编程中的一项常见任务,可以在各种情况下使用。本文将探...
    99+
    2024-05-23
    复制数组 赋值/切片 python c#
  • js怎么复制数组一部分
    本篇内容介绍了“js怎么复制数组一部分”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!当我们想要复制数组之间...
    99+
    2024-04-02
  • JS对象复制(深拷贝和浅拷贝)
    目录一、浅拷贝1、Object.assign(target,source,source...)2、扩展运算符(spread)二、深拷贝1、使用对象序列化 JSON.stringify...
    99+
    2024-04-02
  • Java中对象的深复制和浅复制的详细介绍
    这篇文章主要介绍“Java中对象的深复制和浅复制的详细介绍”,在日常操作中,相信很多人在Java中对象的深复制和浅复制的详细介绍问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”Java中对象的深复制和浅复制的详...
    99+
    2023-06-17
  • python3-列表的深浅复制
    # Auther: Aaron Fannames = ["aaron", "alex", "james", "meihengfan"]#复制一份列表#浅复制 (注意,这只是一个浅复制,只能复制第一层列表里面的东西,如果列表里面还有一层列表,...
    99+
    2023-01-31
    深浅 列表
  • js如何多次复制一个字符串
    小编给大家分享一下js如何多次复制一个字符串,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!如何多次复制一个字符串JS 字符串允许简单的重复,与纯手工复制字符串不同...
    99+
    2023-06-27
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作