js中的赋值 浅拷贝和深拷贝详细

目录
  • 1、js内存
  • 2、赋值
  • 3、浅拷贝
  • 4、深拷贝

前言:

在学习下面文章前我们简单了解一下的内存的知识，以下先简要提一下

1、js内存

js内存，或者说大部分语言的内存都分为栈和堆。基本数据类型的变量值分配在栈上，引用数据类型的变量值分配在堆上，栈中只是存储具体堆中对象的地址。

2、赋值

对于基本数据类型，赋值操作是拷贝，即新旧变量不会相互影响。

var a = 1;
var b = a;
b = 2;
console.log(b); // 2

对于引用数据类型，赋值操作只是在栈中新增一个指向堆中对象的变量，即复制引用地址。新旧变量之间会互相影响，即在新变量上改变对象值，旧变量对应值也会改变。

var a = {
    name: "mike"
};
var b = a;
b.name = "jack";
console.log(a); // {name: "jack"}

3、浅拷贝

对于基本数据类型和不具有嵌套对象的数据，均是拷贝操作，新旧变量之间不会相互影响。

var a = {
    name: "mike"
};
var b = {};
b.name = a.name;
b.name = "jack";
console.log(a) // {name: "mike"}

但是对于具有嵌套对象的数据，浅拷贝只拷贝第一层对象，深层次的值仍然是复制引用地址。

var a = {
    name: "mike",
    language: {
        first: "english",
        second: "chinese"
    }
};
var b = {};
b.name = a.name;
b.name = "jack";
b.language = a.language;
b.language.first = "japanese"
console.log(a) // { language : {first: "japanese", second: "chinese"}}

js实现浅拷贝，思想：遍历target的每个属性，将起属性名和值赋值给新变量。
如果你明白了赋值的含义，那么在代码的第四行，当此时的target[key]的值是对象的时候，通过赋值赋予新变量，本质上是复制引用数据类型在堆中的地址，就不难理解为什么浅拷贝对于是否是嵌套对象的有不同结果了。

function shallowCopy(target) {
    let result = {};
    for (const key in target) {
        result[key] = target[key];
    }
    return result;
}

4、深拷贝

深拷贝是完完全全的拷贝，新旧变量之间不会相互影响。
对于参数是否是对象有不同的处理方法，如果是对象，对于对象的每个属性和值赋值然后递归处理; 否则直接返回。

function clone(target) {
    if (typeof target === "object") {
        //判断是否是数组
        let result = Array.isArray(target)? [] : {};
        for (const key in target) {
            result[key] = clone(target[key]);
        }
        return  result;
    } else {
        return target;
    }
}

到此这篇关于js中的赋值 浅拷贝和深拷贝详细的文章就介绍到这了,更多相关js中的赋值 浅拷贝和深拷贝内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • javascript 关于赋值、浅拷贝、深拷贝的个人理解

    一.栈.堆.指针地址 栈内存:个人理解是,基本数据类型和引用数据类型都会用到的一个空间,这个空间以key-value形式存在,value本身不可修改,只能赋值替换: 堆内存:堆,就是堆积,每一个被开辟的空间可以想象成一个空纸盒子,纸盒子所在的纸盒子堆就是 "堆" .基本数据类型没有堆的概念.堆,只针对引用数据类型.存储方式应该是以对象(object)形式保存,对象内容包含key-value形式数据,value本身同样不可修改,只能赋值替换: 指针地址:针对引用数据类型在栈保存的值就是指

  • JS赋值、浅拷贝和深拷贝（数组和对象的深浅拷贝）实例详解

    本文实例讲述了JS赋值.浅拷贝和深拷贝(数组和对象的深浅拷贝).分享给大家供大家参考,具体如下: 深拷贝和浅拷贝是只针对Object和Array这样的引用数据类型的.  浅拷贝 只是拷贝了基本类型的数据,而引用类型数据,复制后也是会发生引用,我们把这种拷贝叫做浅拷贝(浅复制) 浅拷贝只复制指向某个对象的指针,而不复制对象本身,新旧对象还是共享同一块内存.但深拷贝会另外创造一个一模一样的对象,新对象跟原对象不共享内存,修改新对象不会改到原对象. 赋值和浅拷贝的区别 当我们把一个对象赋值给一个新的变

  • js中的赋值 浅拷贝和深拷贝详细

    目录 1.js内存 2.赋值 3.浅拷贝 4.深拷贝 前言: 在学习下面文章前我们简单了解一下的内存的知识,以下先简要提一下 1.js内存 js内存,或者说大部分语言的内存都分为栈和堆.基本数据类型的变量值分配在栈上,引用数据类型的变量值分配在堆上,栈中只是存储具体堆中对象的地址. 2.赋值 对于基本数据类型,赋值操作是拷贝,即新旧变量不会相互影响. var a = 1; var b = a; b = 2; console.log(b); // 2 对于引用数据类型,赋值操作只是在栈中新增一个指

  • 对Python中列表和数组的赋值,浅拷贝和深拷贝的实例讲解

    对Python中列表和数组的赋值,浅拷贝和深拷贝的实例讲解 列表赋值: >>> a = [1, 2, 3] >>> b = a >>> print b [1, 2, 3] >>> a[0] = 0 >>> print b [0, 2, 3] 解释:[1, 2, 3]被视作一个对象,a,b均为这个对象的引用,因此,改变a[0],b也随之改变 如果希望b不改变,可以用到切片 >>> b = a[:] &

  • Python中字典的浅拷贝与深拷贝用法实例分析

    Python中字典的浅拷贝与深拷贝用法实例分析

    本文实例讲述了Python中字典的浅拷贝与深拷贝用法.分享给大家供大家参考,具体如下: 最近发现的一个很值得记录的东西就是python字典的浅拷贝问题 首先,明确一下什么是浅拷贝,什么是深拷贝: 简单的来说就是,在有指针的情况下,浅拷贝只是增加了一个指针指向已经存在的内存,而深拷贝就是增加一个指针并且申请一个新的内存,使这个增加的指针指向这个新的内存 也就是说,在浅拷贝情况下,不同引用指向的是同一块内存,改其中一个引用,那么其他引用也会跟着改变 应用到python 的字典复制过程: # codi

  • Python 的赋值,浅拷贝和深拷贝详解

    Python 的赋值,浅拷贝和深拷贝详解

    目录 先明确几点 赋值 浅拷贝 深拷贝 总结 先明确几点 不可变类型:该数据类型对象所指定内存中的值不可以被改变. (1).在改变某个对象的值时,由于其内存中的值不可以被改变,所以,会把原来的值复制一份再进行改变,这样就会计算机会开辟一段新的内存空间来存储新的值. 可变类型:该数据类型的对象所指定的地址上面的值可以被改变. (1).变量被改变后,其所指向的内存地址上面的值,直接被改变,没有发生复制行为,也没有发生开辟新的内存地址行为,不会重新开辟空间. 变量:是一个系统表的元素,拥有指向对象的连

  • js中opener与parent的区别详细解析

    opener即谁打开我的,比如A页面利用window.open弹出了B页面窗口,那么A页面所在窗口就是B页面的opener,在B页面通过opener对象可以访问A页面. parent表示父窗口,比如一个A页面利用iframe或frame调用B页面,那么A页面所在窗口就是B页面的parent.在JS中,window.opener只是对弹出窗口的母窗口的一个引用.比如:a.html中,通过点击按钮等方式window.open出一个新的窗口b.html.那么在b.html中,就可以通过window.o

  • Node.js中的缓冲与流模块详细介绍

    缓冲(buffer)模块 js起初就是为浏览器而设计的,所以能很好的处理unicode编码的字符串,但不能很好的处理二进制数据.这是Node.js的一个问题,因为Node.js旨在网络上发送和接收经常是以二进制格式传输的数据.比如: - 通过TCP连接发送和接收数据:  - 从图像或者压缩文件读取二进制数据:  - 从文件系统读写数据:  - 处理来自网络的二进制数据流 而Buffer模块为Node.js带来了一种存储原始数据的方法,于是可以再js的上下文中使用二进制数据.每当需要在Node.j

  • js中window.open()的所有参数详细解析

    [1.最基本的弹出窗口代码]  复制代码 代码如下: <SCRIPT LANGUAGE="javascript">  <!--  window.open ('page.html')  -->  </SCRIPT> 因为着是一段javascripts代码,所以它们应该放在<SCRIPT LANGUAGE="javascript">标签和</script>之间.<!-- 和 -->是对一些版本低的浏

  • js中AppendChild与insertBefore的用法详细解析

    appendChild定义appendChild(newChild: Node) : NodeAppends a node to the childNodes array for the node.Supported: IE 5.0+, Mozilla 1.0+, Netscape 6.0+, Safari 1.0+, Opera 7.0+添加一个节点到指定的节点的子节点数组中,读起来好象有点拗口,简单地说就是将元素添加到指定的节点中 appendChild用法target.appendChil

  • JS中准确判断变量类型的方法

    这是一个高频面试题,我们开发中也进程会遇到,今天我们来实现一个函数getValType(val)用来获取一个变量的类型.从1. JS基础变量类型.2. Js中判断变量的函数. 3. 实现getValType函数.3个方面来分析实现. Js基础变量类型 在 JS 中,有 5 种基本数据类型和 1 种复杂数据类型,基本数据类型有:Undefined, Null, Boolean, Number和String:复杂数据类型是Object,Object中还细分了很多具体的类型,比如:Array, Fun

  • 如何使用RoughViz可视化Vue.js中的草绘图表

    如何使用RoughViz可视化Vue.js中的草绘图表

    介绍 图表是数据的图形表示,用于使数据集更易于阅读,并且易于区分各部分.虽然大多数用户习惯于看到简洁而正式的图表,但一些用户更喜欢看到手绘或素描的图表,这就是 roughViz 的用武之地. roughViz 是一个基于 D3.js 和 Rough.js 的 JavaScript 库.该库旨在帮助构建看起来像草图或手绘图的图表,如下例所示. 在本指南中,你将学习如何使用 vue-roughviz 在 Vue.js 应用程序中显示类似草图的图表,以及如何使用 vue-cli 配置 Vue 应用程序

随机推荐