1.背景介绍

  javascript分原始类型与引用类型。Array是引用类型,直接用“=”号赋值的话,只是把源数组的地址(或叫指针)赋值给目的数组,指向的是同一个内存地址,其中一个改变另一个也会改变。并没有实现数组的数据的拷贝。这种方式的实现属于浅拷贝。

  深拷贝是开辟新的储存空间,两个对象对应两个不同的地址,修改一个对象的属性,不会改变另一个对象的属性。

2.使用方法

数组浅拷贝:

var arr1 = [1, 2, 3, 4];
var arr2 = arr1;
arr1[0] = 6; //数组是用堆去保存的,相等的时候只是把存放的地址拷贝过去了,两个指向了同一个地址,所以在改变其中一个的值,其他的也跟着改变了
console.log(arr2[0]); //输出结果为6
console.log(arr1); //[6, 2, 3, 4]
console.log(arr2); //[6, 2, 3, 4]

数组深拷贝:

1.JSON.stringify和JSON.parse方法

var arr1 = [1, 2, 3, 4];
var arr2 = JSON.parse(JSON.stringify(arr1)) //先将数组转为字符串,然后转成js对象
arr1[0] = 6;
console.log(arr2[0]); //输出结果为1
console.log(arr1); //[6, 2, 3, 4]
console.log(arr2); //[1, 2, 3, 4]

2.slice方法

var arr1 = [1, 2, 3, 4];
var arr2 = arr1.slice(0); //从0开始到末尾截取数组,然后返回一个新的数组
arr1[0] = 6;
console.log(arr2[0]); //输出结果为1
console.log(arr1); //[6, 2, 3, 4]
console.log(arr2); //[1, 2, 3, 4]

3.concat方法

var arr1 = [1, 2, 3, 4];
var arr2 = arr1.concat(); //连接数组,如果连接的是一个空,那么也是返回了新的本身的数组
arr1[0] = 6;
console.log(arr2[0]); //输出结果为1
console.log(arr1); //[6, 2, 3, 4]
console.log(arr2); //[1, 2, 3, 4]

4.map方法

var arr1 = [1, 2, 3, 4];
var arr2 = arr1.map(function(value){
return value;
}) //使用map方法遍历数组然后返回新的数组,里面的值不变
arr1[0] = 6;
console.log(arr2[0]) //输出结果为1
console.log(arr1); //[6, 2, 3, 4]
console.log(arr2); //[1, 2, 3, 4]

5.ES6语法

var arr1 = [1, 2, 3, 4];
var [ ...arr2 ] = arr1; //ES6扩展运算符实现数组的深拷贝
arr1[0] = 6;
console.log(arr2[0]); //输出结果为1
console.log(arr1); //[6, 2, 3, 4]
console.log(arr2); //[1, 2, 3, 4]

6.用for循环遍历复制

var arr1 = [1, 2, 3, 4];
var arr2 = [];
for(i=0;i<arr1.length;i++){
  arr2.push(arr1[i])
}
arr1[0] = 6;
console.log(arr2[0]); //输出结果为1
console.log(arr1); //[6, 2, 3, 4]
console.log(arr2); //[1, 2, 3, 4]

简单来说,深拷贝主要是将另一个对象的属性值拷贝过来之后,另一个对象的属性值并不受到影响,因为此时它自己在堆中开辟了自己的内存区域,不受外界干扰。
浅拷贝主要拷贝的是对象的引用值,当改变对象的值,另一个对象的值也会发生变化。

那具体使用情况该使用浅拷贝还是深拷贝呢,没有一成不变的规则,一切都取决于具体需求~

js 数组的浅拷贝和深拷贝的更多相关文章

  1. JS 数组以及对象的深拷贝总结

    javascript 数组以及对象的深拷贝(复制数组或复制对象)的方法 前言 在js中,数组和对象的复制如果使用=号来进行复制,那只是浅拷贝.如下图演示:  如上,arr的修改,会影响arr2的值,这 ...

  2. 浅谈JS中的浅拷贝与深拷贝

    前端工程师应该都比较熟悉浅拷贝和深拷贝的概念,在日常业务代码的过程中,特别是做数据处理的时候,经常行的会遇到,比如如何在不修改原对象的基础上,重新生成一个一模一样的对象,加以利用,又或是,如何巧妙地运 ...

  3. JS 数组、对象的深拷贝

    博客地址:https://ainyi.com/72 JavaScript 程序中,对于简单的数字.字符串可以通过 = 赋值拷贝 但是对于数组.对象.对象数组的拷贝,就有浅拷贝和深拷贝之分 浅拷贝就是当 ...

  4. Java 数组的浅拷贝和深拷贝

    浅拷贝: 在堆内存中不会分配新的空间,而是增加一个引用变量和之前的引用指向相同的堆空间. int[] a = {1,2,3,4,5}; int[]b = a; public class Test { ...

  5. js对象的浅拷贝与深拷贝

    浅拷贝和深拷贝都是对于JS中的引用类型而言的,浅拷贝就只是复制对象的引用(堆和栈的关系,原始(基本)类型Undefined,Null,Boolean,Number和String是存入堆,直接引用,ob ...

  6. JS中的浅拷贝与深拷贝

    浅拷贝与深拷贝的区别: 浅拷贝: 对基本类型和引用类型只进行值的拷贝,即,拷贝引用对象的时候,只对引用对象的内存地址拷贝,新旧引用属性指向同一个对象,修改任意一个都会影响所有引用当前对象的变量. 深拷 ...

  7. js中的浅拷贝和深拷贝

    说说最近所学:浅拷贝和深拷贝也叫做浅克隆和深克隆,深浅主要针对的是对象的"深度",常见的对象都是"浅"的,也就是对象里的属性就是单个的属性,而"深&q ...

  8. 浅谈js中的浅拷贝和深拷贝

    在js中如何把一个对象里的属性和方法复制给另一个对象呢? 下面举一个例子来说明: var person={name:'chen',age:18}; var son={sex:'男'}; functio ...

  9. 全面聊聊JavaScript的浅拷贝和深拷贝

    一.背景      首先我们可以看下面这段简单的代码: var obj = {name:'程序猿',sex:'男'}; var arr = ['程序猿','程序媛']; var copyobj = o ...

随机推荐

  1. SPU与SKU概念

    1. 什么是SPU SPU 是商品信息聚合的最小单位,是一组可复用.易检索的标准化信息的集合,该集合描述了一个产品的特性.即:某一款商铺的公共属性. 通俗点讲,属性值.特性相同的货品就可以称为一个 S ...

  2. Linux内核4.19.1编译

    linux内核编译 1.1 大致步骤 下载linux内核4.19.1 官网链接: https://www.kernel.org/ 官网下载经常速度太慢,无法下载,提供另一个链接: http://ftp ...

  3. Linux 网络协议栈开发基础篇—— 网桥br0

    一.桥接的概念 简单来说,桥接就是把一台机器上的若干个网络接口"连接"起来.其结果是,其中一个网口收到的报文会被复制给其他网口并发送出去.以使得网口之间的报文能够互相转发. 交换机 ...

  4. Android Studio & zh-Hans

    Android Studio & zh-Hans https://developer.android.com/studio?hl=zh-cn https://developer.android ...

  5. 微信公众号 & 付费阅读

    微信公众号 & 付费阅读 付费功能 付费阅读 付费功能使用说明 1.付费功能介绍 开通了付费功能的公众号,运营者可以在编辑时对原创文章的部分或全部内容设置收费.对于付费图文,用户未付费前可免费 ...

  6. windows10 WSL

    搭建WSL linux下的home目录,映射windows的目录地址 用户家目录 ➜ ~ pwd /home/ajanuw C:\Users\ajanuw\AppData\Local\Packages ...

  7. 同步vscode的setting.json和extensions

    vc 详情 $ npm i -g vscode-config $ vc config --token <your github token> $ vc config --id <yo ...

  8. 彻底解决Asp.netCore WebApi 3.1 跨域时的预检查204 options重复请求的问题

    Asp.netCore WebApi 3.1 跨域的预检查options问题 1:我们直接使用core跨域的中间件 ,注入跨域服务, services.AddCors(options => { ...

  9. JVM必不可少的知识

    1.Java垃圾回收机制 对象被判断为垃圾的标准:没有被其他对象引用 2.判断对象是否可被回收 (1)引用计数算法 判断对象的引用数量 通过判断对象的引用数量来决定对象是否可以被回收 每个对象实例都有 ...

  10. Linux进程管理工具Supervisor的安装配置

    目录 Linux进程管理工具Supervisor的安装配置 简介 安装Python包管理工具 安装Supervisor 配置 配置文件参数说明 配置进程管理 启动supervisor 控制进程 交互终 ...