Javascript和jQuery的深浅拷贝详解

目录
  • JS的浅拷贝
  • JS的深拷贝
  • jQuery的深浅拷贝
  • 总结

深浅拷贝在引用数据类型（数组对象）复制过程中产生的问题。

JS的浅拷贝

直接复制拷贝的是数组/对象的内存地址，本质上是一个引用数据类型，所有的变量存储的是相同的内存地址，操作的是同一个存储空间，任意一个变量的操作，其他变量都会受影响。如下所示：

const arr1 = ['北京', '上海', '广州', '深圳', '武汉'];
const arr2 = arr1;
console.log(arr1);
console.log(arr2);

变量arr1中存储的是数组的内存地址，浅拷贝是将变量arr1中存储的数组的内存地址赋值给变量arr2存储，也就是变量arr2和变量arr1存储的是相同的内存地址，通过其中一个变量操作数组，另一个变量也受影响，将arr1里的北京改为天津，那么arr2里的北京也就变成了天津。

JS的深拷贝

复制拷贝的是数组/对象存储的数值数据，本质上执行几次深拷贝就有几个独立的引用数据类型，存储的是不同的内存地址，操作的是不同的存储空间，一个变量操作引用数据类型对其他变量没有影响，如下所示：

const arr1 = ['北京', '上海', '广州', '深圳', '武汉'];
//创建一个新的引用数据类型
const arr3 = [];
//循环遍历arr1将arr1中的存储获取之后，存储到arr3中
arr1.forEach(item => {
   arr3.push( item );
})

arr3是新的内存地址，只是存储的数据数值和arr1相同，arr1的操作是arr1内存地址对应的存储空间，和arr3的存储空间没有关系，也没有影响。arr1里的上海改为成都，arr3里面的数值 不发生任何变化，所以，修改arr3里的数据，arr1里也同样没有变化。

jQuery的深浅拷贝

jQuery中的深浅拷贝比较特殊

1、jQuery中没有封装传统意义上的浅拷贝的函数

2、jQuery中封装的$.extend()默认执行的就是传统意义上的深拷贝

3、jQuery中的所谓的深浅拷贝，指的是 一维数据  深拷贝，二维数据  浅拷贝

4、jQuery中深浅拷贝的语法形式

const 变量 = 数组/对象;
$.extend(变量 , 原始数组/对象);
//浅拷贝，一维数据 深拷贝，多维数据  浅拷贝
$.extend(true, 变量, 原始数组/对象);
//深拷贝，一维数据 多维数据 都是深拷贝

如下所示：

//原始数组
const arr1 = ['北京' , '上海' , '广州' , '深圳' , '武汉' , [100,200,300,400] , {name:'王昭没有君啊' , age:22 , sex:'男'} ];
//jQuery的浅拷贝
//创建一个arr2
const arr2 = [];
//将arr1中的数据按照jQuery的浅拷贝语法复制到arr2中
//执行的是jQuery的浅拷贝
$.extend( arr2 , arr1 );
//创建一个arr2
const arr3 = [];
//将arr1中的数据按照jQuery的深拷贝语法复制到arr3中
//执行的是jQuery的深拷贝
$.extend(true, arr3, arr1);

总结

本篇文章就到这里了，希望能够给你带来帮助，也希望您能够多多关注我们的更多内容!

赞 (0)

相关推荐

  • JavaScript与jQuery中文档就绪函数的区别

    JavaScript与jQuery中文档就绪函数的区别

    目录 1.文档就绪函数 2.window.onload 与 $(document).ready()的区别 1.文档就绪函数 JavaScript 的文档就绪函数: <script>     window.onload = function() {         alert("欢迎!")     } </script> jQuery 中的文档就绪函数: // 写法1 <script>     $(document).ready(function()

  • js使用文档就绪函数动态改变页面内容示例【innerHTML、innerText】

    js使用文档就绪函数动态改变页面内容示例【innerHTML、innerText】

    本文实例讲述了js使用文档就绪函数动态改变页面内容.分享给大家供大家参考,具体如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script> /*文档就绪函数*/ /*动态修改网页的内容*/ window.onload = function () { va

  • JavaScript与JQuery框架基础入门教程

    目录 一,JS对象 二,DOM –1,作用 –2,测试 三,Jquery –1,概述 –2,使用步骤 –3,入门案例 –4,jQuery的文档就绪 四,JQuery的语法 –1,选择器 –2,常用函数 –3,常用事件 –4,练习 总结 一,JS对象 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>测试 js的创建对象</title> <s

  • Javascript和jQuery的深浅拷贝详解

    目录 JS的浅拷贝 JS的深拷贝 jQuery的深浅拷贝 总结 深浅拷贝在引用数据类型(数组对象)复制过程中产生的问题. JS的浅拷贝 直接复制拷贝的是数组/对象的内存地址,本质上是一个引用数据类型,所有的变量存储的是相同的内存地址,操作的是同一个存储空间,任意一个变量的操作,其他变量都会受影响.如下所示: const arr1 = ['北京', '上海', '广州', '深圳', '武汉']; const arr2 = arr1; console.log(arr1); console.log(

  • 关于JavaScript和jQuery的类型判断详解

    对于类型的判断,JavaScript用typeof来进行. 栗子: console.log(typeof null); //object console.log(typeof []); //object console.log(typeof {}); //object console.log(typeof new Date()); //object console.log(typeof new Object); //object console.log(typeof function(){});

  • javascript截图 jQuery插件imgAreaSelect使用详解

    为了使用户能自定义个人头像,需要提供一个对上传图片的截图功能,当前很多网站特别是SNS类网站都提供这样的功能,非常实用.主要实现的形式有两种,一种是flash截图,另一种就是javascript截图,两种方法各有秋千,关于Flash截图可以参考一下UcHome程序中头像上传功能,但这不是我要讨论的话题,我这里主要是如何实现javascript截图,利用jQuery的imgAreaSelect插件,轻松实现自定义头像[avatar]javascript截图功能. 一,准备: 两个JS文件 1,jq

  • JavaScript数组及非数组对象的深浅克隆详解原理

    目录 什么是浅克隆.深克隆 1.对数组进行克隆 1.1 浅克隆 1.2 深克隆 2.对非数组对象进行克隆 2.1 浅克隆 2.2 深克隆 3.整合深克隆函数 什么是浅克隆.深克隆 浅克隆:直接将存储在栈中的值赋值给对应变量,如果是基本数据类型,则直接赋值对应的值,如果是引用类型,则赋值的是地址. 深克隆:将数据赋值给对应的变量,从而产生一个与源数据不相干的新数据(数据地址已变化).即对象各个层级的属性. JavaScript中基本数据类型使用符号"="可以进行克隆,引用数据类型使用符号

  • jQuery siblings()用法实例详解

    jQuery siblings()用法实例详解

    siblings() 获得匹配集合中每个元素的同胞,通过选择器进行筛选是可选的. jQuery 的遍历方法siblings() $("给定元素").siblings(".selected") 其作用是筛选给定的同胞同类元素(不包括给定元素本身) 例子:网页选项栏 当点击任意一个选项卡是,其他2个选项卡就会改变样式,其内容也会隐藏. 下面是html代码. <body> <ul id="menu"> <li class=

  • Javascript的无new构建实例详解

    Javascript的无new构建实例详解

    看jquery源代码第一步的时候,对于jquery对象的创建就看的云里雾里,琢磨半天终于有点感觉了,在此记录下 第一种方式: var A = function(){ return A.prototype.init(); } A.prototype = { init:function(){ this.age = 50; console.log(this); return this; }, age:100 } console.log(A() === new A()); 1.分析下结果为什么为true

  • jQuery Validate验证框架详解(推荐)

    jQuery Validate验证框架详解(推荐)

    jQuery Validate 插件为表单提供了强大的验证功能,让客户端表单验证变得更简单,同时提供了大量的定制选项,满足应用程序各种需求. 一.导入js库 <script type="text/javascript" src="<%=path %>/validate/jquery-1.6.2.min.js"></script> <script type="text/javascript" src=&qu

  • jQuery stop()用法实例详解

    近期查看前辈的代码,发现在使用animate()的时候前面需要加上stop(),来防止移进移出的闪动问题,但却不知道stop()里面参数的真正意思,今天查了下stop()中参数的意义和具体使用方法,分享给大家. stop(true)等价于stop(true,false): 停止被选元素的所有加入队列的动画. stop(true,true):停止被选元素的所有加入队列的动画,但允许完成当前动画. stop()等价于stop(false,false):停止被选元素当前的动画,但允许完成以后队列的所有

  • jQuery Ajax自定义分页组件(jquery.loehpagerv1.0)实例详解

    jQuery Ajax自定义分页组件(jquery.loehpagerv1.0)实例详解

    简单的两个步骤即可实现分页功能 <script src="<%=basePath%>/resources/js/jquery-1.7.1.min.js"></script> <script src="<%=basePath%>/resources/js/jquery.loehpagerv1.0.js"></script> <script type="text/JavaScript

  • 使用JavaScript开发跨平台的桌面应用详解

    使用JavaScript开发跨平台的桌面应用详解

    任何可以使用JavaScript来编写的应用,最终会由JavaScript编写.--Atwood定律 Atwood's Law是Jeff Atwood在2007年提出的:"any application that can be written in JavaScript, will eventually be written in JavaScript.".据说,这只是当时开的一个玩笑.不过,这个玩笑似乎渐渐变成了现实.从各种华丽的网页框架,到功能强大的库,到了现在的机器学习,服务器开

随机推荐