关于js 浅拷贝 深拷贝 以及赋值操作。

最近同事又碰到关于深浅拷贝以及赋值的问题,今天我也研究一下记录一下,加深一下记忆。

  举一个简单的例子:

  var people = {
    age:10,
    name:"小华",

    arr:[1,2,3]

  };
  做一个 赋值操作:

  var people2 = people;
  然后做一个浅拷贝操作:
  var people3 = {};
  for (var i in people){
    people3[i] = people[i]
  };
  然后最后再做一个深拷贝操作:
  function deepClone (obj) {

   if (typeof obj != "object") {
     return obj;
   }  

   var newObj = obj.constructor === Array ? [] : {}; //开辟一块新的内存空间

   for (var i in obj) {
     newObj [i] = deepClone(obj [i]); //通过递归实现深层的复制
   }

   return newObj;
  }
  var people4 = deepClone(people);

  ------------------------------------------------------重点分割线---------------------------------------------

  下面开始进行对原数据进行操作。(people2,3,4的值请自行console ^_^)

  people.age = 1;

  发现就只有people1的age发生改变,其他的都是10。改变 people 同时也会改赋值对象 people2,而改变浅拷贝得到的 people3 和深拷贝people4都没有改变。这就可以说明赋值得到的对象 people2 只是将指针改变,其引用的仍然是同一个对象,而浅拷贝得到的的 people3 和深拷贝的people4则是重新创建了新对象。

下面开始第二波操作: (people2,3,4的值请自行console ^_^)

  people.arr[0] = 5 

  接下来来看一下改变引用类型会是什么情况呢,我又改变了原始对象people的arr里面的数据,(arr是一个数组,也就是引用类型)。结果看输出可以看出来无论是赋值操作出来的people2还是浅拷贝的people3都会也都会改变。只有通过的深拷贝得到的people4没有改变。这是因为浅拷贝他只是复制一层对象的属性,并不包括对象里面的为引用类型的数据。所以就会出现people改变引用类型时,会使people3改变。

所以我们可以得出结论:

---              | 和原数据是否指向同一对象 | 第一层数据为基本数据类型 |原数据中包含子对象

赋值           | 是            | 改变会使原数据一同改变     | 改变会使原数据一同改变

浅拷贝       | 否                                         | 改变不会使原数据一同改变 | 改变会使原数据一同改变

深拷贝       | 否                                         | 改变不会使原数据一同改变 | 改变不会使原数据一同改变

原文地址:https://www.cnblogs.com/xyyyy/p/8466094.html

时间: 2024-10-08 18:25:36

关于js 浅拷贝 深拷贝 以及赋值操作。的相关文章

4个方面彻底说清JS的深拷贝/浅拷贝

首先,本文适用于业务需要,急需知道如何深拷贝JS对象的开发者.第二类,希望扎实JS基础,将来好去面试官前秀操作的好学者. 第一类 你只需要一行黑科技代码就可以实现深拷贝 var copyObj = { name: 'ziwei', arr : [1,2,3] } var targetObj = JSON.parse(JSON.stringify(copyObj)) 此时 copyObj.arr !== targetObj.arr 已经实现了深拷贝 别着急走,利用window.JSON的方法做深拷

JS中有关对象的继承以及实例化、浅拷贝深拷贝的奥秘

一.属性的归属问题 JS对象中定义的属性和方法如果不是挂在原型链上的方法和属性(直接通过如类似x的方式进行定义)都只是在该对象上,对原型链上的没有影响.对于所有实例共用的方法可直接定义在原型链上这样实例化的的时候就不用对每个实例定义该属性方法,所有的实例均具有该方的引用见最后的输出. function Myclass(){ this.x=" x in Myclass"; this.get=function(){}//每次实例化对象,每个对象的该方法都是独立的,是不相同的 } Mycla

JS中深拷贝与浅拷贝的区别,实现深拷贝的几种方法

JS中深拷贝与浅拷贝的区别,实现深拷贝的几种方法 如何区分深拷贝与浅拷贝,简单点来说,就是假设B复制了A,当修改A时,看B是否会发生变化,如果B也跟着变了,说明这是浅拷贝,拿人手短,如果B没变,那就是深拷贝,自食其力. 此篇文章中也会简单阐述到栈堆,基本数据类型与引用数据类型,因为这些概念能更好的让你理解深拷贝与浅拷贝. 我们来举个浅拷贝例子: let a=[0,1,2,3,4], b=a; console.log(a===b); a[0]=1; console.log(a,b); 嗯?明明b复

JS的连等赋值

文章标题这句话原本是在国外某JavaScript规范里看到的,当时并没有引起足够的重视,直到最近一次出现了bug发现JS里的连等赋值操作的特色(坑). 网上搜索一番发现一个非常好的连等赋值的( 来源1 , 来源2 )例子: var a = {n:1}; a.x = a = {n:2}; console.log(a.x); // 输出? 答案是: console.log(a.x); // undefined 答案 不知道各位有没有答对,至少我是答错了. 遂借此机会好好看看JS连等赋值是怎么回事 赋

JS中字符串的相关操作

(转自:http://www.cnblogs.com/zhaoxinxin/articles/1402733.html) 一.字符串的创建 创建一个字符串有几种方法. 最简单的是用引号将一组字符包含起来,可以将其赋值给一个字符串变量. var myStr = "Hello, String!"; 可以用双引号或单引号将字符串包含,但要注意,作为界定字符串的一对引号必须是相同的,不能混用. 像var myString = "Fluffy is a pretty cat.'; 这样

理解Javascript--作用域和赋值操作

作用域作为一个最基础的功能存在于各种编程语言中,它使得我们的编程更加灵活有趣.其基础功能就是存储变量中的值,然后可以对值进行访问和修改. 可能我们都知道作用域的一些概念,以及其一些扩展的一些内容闭包等,但是相对于这些可能我们去了解这些变量到底是存到了哪里,而我们的程序是如何访问到他们的会更加有趣. var a = 1; 首先我们要了解到在我们进行声明变量并进行赋值的时候到底谁参与了我们的整个流程. 1,引擎:它参与了整个JS程序的编译和执行. 2,编译器:它负责了语法分析和代码的生成. 3,作用

深入理解Javascript--作用域和赋值操作

作用域作为一个最基础的功能存在于各种编程语言中,它使得我们的编程更加灵活有趣.其基础功能就是存储变量中的值,然后可以对值进行访问和修改. 可能我们都知道作用域的一些概念,以及其一些扩展的一些内容闭包等,但是相对于这些可能我们去了解这些变量到底是存到了哪里,而我们的程序是如何访问到他们的会更加有趣. var a = 1; 首先我们要了解到在我们进行声明变量并进行赋值的时候到底谁参与了我们的整个流程. 1,引擎:它参与了整个JS程序的编译和执行. 2,编译器:它负责了语法分析和代码的生成. 3,作用

Angularjs总结(五)指令运用及常用控件的赋值操作

1.常用指令 1 <div ng-controller="jsyd-controller"> 2 <div style="float:left;width:100%; " ng-show="clickValue1=='登记'"> 3 4 <div ng-include src="'/partials/11.html'"></div> 5 6 </div> 7 <

$.extend()浅拷贝深拷贝

参考网址:http://bijian1013.iteye.com/blog/2255037 jQuery.extend() 函数用于将一个或多个对象的内容合并到目标对象. 注意:1. 如果只为$.extend()指定了一个参数,则意味着参数target被省略.此时,target就是jQuery对象本身.通过这种方式,我们可以为全局对象jQuery添加新的函数.2. 如果多个对象具有相同的属性,则后者会覆盖前者的属性值.   1 <!DOCTYPE html> 2 <html lang=&