【js】深拷贝一文中的几个错误点

原文:https://www.cnblogs.com/wuhairui/p/10370227.html 得到网友反馈,试过后也再查了下资料: 1.JSON.parse(JSON.stringify(obj))方式:无法深拷贝对象中的函数结果(对象被深拷贝了,但是函数消失了): 2.{...obj}和Object.assign({},obj)一样.也可以进行一次深拷贝,但内部的拷贝无法完成. 结果(obj的b1被改了): 3.去网上找了一下.有个近乎完美深拷贝的简单解决方案,就是使用jquery…

js 深拷贝和浅拷贝

js 深拷贝和浅拷贝先举一下项目中遇到的两个例子: 例子1: var json = $.parseJSON(data.data);//data.data是接口返回的值var a = json.channels;var b = json.channels;console.log(a === b);//true 这个例子是浅拷贝,a.b两个对象是完全相等的,指向的内存地址也是一样的,a和b会互相影响,当b对象改变时,a也会跟着改变. 在项目中就吃了这个亏,a对象本来想要存一个原始值,b是一个在原始…

老生常谈之js深拷贝与浅拷贝

前言经常会在一些网站或博客看到"深克隆","浅克隆"这两个名词,其实这个很好理解,今天我们就在这里分析一下js深拷贝和浅拷贝. 浅拷贝我们先以一个例子来说明js浅拷贝: var n = {a: 1, b: 2} var m = n m.a = 12 console.log(n.a) // ? 上面显然 n.a 的值会变为 12,这就是js浅拷贝.浅拷贝只是拷贝的指向对象的指针,本质上还是指向同一个对象. 深拷贝同样我们还是以一个例子来说明啥叫 js deep…

vue.js 中使用（...）运算符报错的解决方法

vue.js 中使用(...)运算符报错的解决方法 Syntax Error:Unexpected token(XX:X) }, computed:{ ...mapGetters([ 'pageSize' ]) }, 这个错误是在项目中,不识别es6的扩展运算符,解决办法(四步走)如下: 第一步:安装babel-plugin-transform-object-rest-spread cnpm install babel-plugin-transform-object-rest-spread 第二…

关于JS深拷贝和浅拷贝

最近在前端开发中遇到一些问题,就是数组中的某个对象或某个对象的值改变之后,在不刷新页面的时候需要重新渲染值时,页面显示的还是原来的数据.比如: data{ A:[{id:1,num:1},{id:2,num:2},{id:3,num:3}] } function changeA(){ let B = this.data.B; B[1].num = 88 this.setData({ A:B }); console(this.data.A); } 这时候打印出来时已经改变的值.A:[{id:1,n…

js深拷贝你还不会吗

js深拷贝在讲正题之前我们要先了解数据存储的方式数据存储方式在讲之前我们要先知道值类型和引用类型的存储方式. 在JavaScript数据类型中有两种数据类型. 值类型:字符串(String).数字 (Number).布尔 (Boolean).空(Null).未定义(Undefined).Symbol .存放在栈内存中的简单数据段,数据大小确定,内存空间大小可以分配. 引用数据类型:对象 (Object) .数组 (Array) .函数 (Function) . 存放在堆内存中的对象,在栈内…

深入 js 深拷贝对象

前言对象是 JS 中基本类型之一,而且和原型链.数组等知识息息相关.不管是面试中,还是实际开发中我们都会碰见深拷贝对象的问题. 顾名思义,深拷贝就是完完整整的将一个对象从内存中拷贝一份出来.所以无论用什么办法,必然绕不开开辟一块新的内存空间. 通常有下面两种方法实现深拷贝: 迭代递归法序列化反序列化法我们会基于一个测试用例对常用的实现方法进行测试并对比优劣: let test = { num: 0, str: '', boolean: true, unf: undefined, nul:…

[转] js深拷贝和浅拷贝

一.数组的深浅拷贝在使用JavaScript对数组进行操作的时候,我们经常需要将数组进行备份,事实证明如果只是简单的将它赋予其他变量,那么我们只要更改其中的任何一个,然后其他的也会跟着改变,这就导致了问题的发生. var arr = ["One","Two","Three"]; var arrto = arr; arrto[1] = "test"; document.writeln("数组的原始值:" +…

JS 深拷贝

使用递归进行深拷贝 http://lingyu.wang/2014/03/20/js-interview-1/ Object.prototype.deepClone = function() { var isArray = function(obj) { return Object.prototype.toString.call(obj) === "[object Array]"; }; var isObj = function(obj) { return Object.prototy…

由js深拷贝引起的对内存空间的一些思考

数据类型 js常用数据类型分为基本类型和引用类型基本类型:null.undefined.数值型.字符串型.布尔型引用类型:数组.对象内存空间 var a = [1, 2, 3]; var b = a; b[2] = 4; a; // ?? 我们都知道结果是[1, 2, 4],因为b和a指向了同一个引用对象所以都可以改变该对象的值,我们用内存空间来深入理解一下. 我们知道在内存中存在两块区域,一个是栈stack,一个是堆heap. 通常我们的基本数据类型存储在栈中,而我们的引用数据类型存于堆…

理解JS深拷贝

前言: JS的拷贝(copy),之所以分为深浅两种形式,是因为JS变量的类型存在premitive(字面量)与reference(引用)两种区别.当然,大多数编程语言都存在这种特性. 众所周知,内存包含的结构中,有堆与栈.在JS里,字面量类型变量存放在栈中,储存的是它的值,而引用类型变量虽然在栈中也占有空间,但储存的只是一个内存地址(通过该地址可以索引找到真实结构所在的内存区域),它的真实结构是存在于堆中的.如下图所示: 结合图示来看,一般来说,浅拷贝只是拷贝了内存栈中的数据,深拷贝,则是要沿着…

js深拷贝与浅拷贝

1 基础知识:基本类型与引用类型 JS中可以把变量分成两部分,基本类型和引用类型. 基本类型包括:Undefined.Null.Boolean.Number和String: 引用类型值可能由多个值构成的对象. 在对基础类型数据进行拷贝时,实际相当于创建新的相同数据'hello',赋值给b var a='hello'; var b = a; b = 'world'; console.log(a);//"hello" 在对引用类型数据进行拷贝时,操作的不是实际的对象而是对象的引用,通过指针…

JS深拷贝/深克隆（面试用）

晒下我的比较浅显的深拷贝,没有考虑原型和循环引用,可以拷贝一些js原生类型,用于面试用. function deepClone(obj){ if(Object.prototype.toString.call(obj)==="[object Function]"){ let str=obj.toString(); /^function\s*\w*\s*$\s*$\s*\{(.*)/.test(str); let str1=RegExp.$1.slice(0,-1); return n…

js深拷贝、浅拷贝

浅拷贝: 只针对当前对象的属性进行拷贝,若当前对象的属性是引用类型时,这个不考虑,不进行拷贝.若属性是引用类型,拷贝后引用的是地址,如果进行更改,会影响拷贝的原对象属性. 深拷贝:针对当前对象的数据的所有引用结构都拷贝一份,数据在内存中是独立的.若属性是引用类型,如果进行更改,不会影响拷贝的原对象属性. js使用扩展方法实现深拷贝 Object.prototype.DeepCopy = function () { // 1, 创建一个对象 var temp = {}; // 2, 拷贝属性, 判…

在vue中子组件修改props引发的对js深拷贝和浅拷贝的思考

不管是react还是vue,父级组件与子组件的通信都是通过props来实现的,在vue中父组件的props遵循的是单向数据流,用官方的话说就是,父级的props的更新会向下流动到子组件中,反之则不行.也就是说,子组件不应该去修改props.但实际开发过程中,可能会有一些情况试图去修改props数据: 1.这个props只是传递一个初始值,子组件把它当做一个局部变量来使用,这种情况一般定义一个本地的data属性,将props的值赋值给它.如下: props: ['initialCounter'],…

js 深拷贝和浅拷贝理解

作者:进击的袋鼠链接:https://www.zhihu.com/question/23031215/answer/124017500来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明出处. 1,对于字符串类型,浅复制是对值的复制,对于对象来说,浅复制是对对象地址的复制,并没有开辟新的栈,也就是复制的结果是两个对象指向同一个地址,修改其中一个对象的属性,则另一个对象的属性也会改变,而深复制则是开辟新的栈,两个对象对应两个不同的地址,修改一个对象的属性,不会改变另一个对象的…

js深拷贝的实现方式

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>js继承深拷贝实现</title> </head> <body> <script> var obj = { name:'zjs', sex:'boy', study:function(){ console.log(thi…

js中字符串转json对象时报错： Uncaught SyntaxError: Unexpected token s in JSON at position 2

解决方法: js中获取jsp的返回值 var json='${channels}' var channels = JSON.parse(json);就报上面的错. json的值最终会转成这种json格式: '[{sc_it_id=, sc_server_port=7890}]',但使用parse这个方法,要求很严格,必须var str1 = '{ "sc_it_id":"","sc_server_port":"7890" }'…

js(JavaScript)使用${pageContext.request.contextPath}报错

前几天写程序在js文件中用到了${pageContext.request.contextPath}然后一直报错,没有办法post到服务器,原来js把这个当成字符串了,一直以为他是jquery的函数! ${pageContext.request.contextPath}貌似是EL表达式吧!只能在jsp页面中使用!!js文件里要得到服务器名称和程序根目录要用到js自带的命令如下: function getRealPath(){ //获取当前网址,如: http://localhost:8083/my…

面试之JS深拷贝的实现

在面试中你是否遇到过如下场景: Q:小朋友,你是否了解如何拷贝一个对象? R:此时,机智的你可能会想到 Object.assign({}, obj); Q:那如何深拷贝一个对象呢? R:机智的你 JSON.parse(JSON.stringify(obj)); Q:使用stringify这种方式有何弊端? 性能问题,stringify再解析其实需要耗费较多时间,特别是数据量大的时候. 一些类型无法拷贝,例如函数(不输出),正则(输出空对象),时间对象(输出时间字符串),Undefiend(不输出…

js Fetch返回数据res.json()报错问题

前言一直以来在简单的场景中经常使用fetch代替第三方请求库, fetch是JavaScript的原生函数, 简单.高效.快速.稳定.可定制等等诸多优点.一直也是用着很是舒服,直到有一天它竟然报错了. 什么是Fetch? 官方: Fetch API 提供了一个 JavaScript 接口,用于访问和操纵 HTTP 管道的一些具体部分,例如请求和响应.它还提供了一个全局 fetch() 方法,该方法提供了一种简单,合理的方式来跨网络异步获取资源. 还原现场因为业务需求简单,这里只封装了get和…

js深拷贝和浅拷贝

js深拷贝

// 判断是否为对象 function isObject(o) { return (typeof o === 'object' || typeof o === 'function') && o !== null } // 迭代递归法:深拷贝对象与数组 function deepClone(obj) { if (!isObject(obj)) { throw new Error('obj 不是一个对象!') } let isArray = Array.isArray(obj) let clo…

JS 深拷贝和浅拷贝概念，以及实现深拷贝的三种方式

一.理解堆栈,基本数据类型与引用数据类型 1.堆栈栈(stack):系统自动分配的内存空间,内存会由系统自动释放,用来存放函数的参数值,局部变量的值等,特点是先进后出. 堆(heap):系统动态分配的内存,内存大小不一,内存不会自动释放.一般由程序员分配释放,主要负责像Obejct这种变量类型的存储. 2.基本数据类型概念:存放在栈内存中的简单数据段,数据大小确定,内存空间大小确定. 6种基本数据类型:Undefined.Null.Boolean.Number.String.Symbol 3…

win10 安装node.js node.js 安装成功但npm -v 报错问题解决

错误症状官网下载node-v8 .node-v10 的msi 安装进行安装. npm -v 错误如下 0 info it worked if it ends with ok 1 verbose cli [ 'D:\\Program Files\\nodejs\\node.exe', 1 verbose cli 'D:\\Program Files\\nodejs\\node_modules\\npm\\bin\\npm-cli.js', 1 verbose cli 'prefix', 1 ver…

JS深拷贝继承

所谓深拷贝,就是子对象不紧继承父对象的非引用属性,还能继承父对象的引用属性(Object,Array),当子对象对继承的引用类型属性做修改时,父对象的引用类型不会被修改. 我们先写个浅拷贝的封装函数: function extendCopy(parent){ var child={}; for(var i in parent){ child[i]=parent[i]; } child.uber=parent; return child; } 接下来写个深拷贝的封装函数: function dee…

js深拷贝与浅拷贝的区别及实现

1. 对于基本数据类型其值在内存中占据着固定大小的空间,并被保存在栈内存中.当一个变量向另一个变量复制基本类型的值,会创建这个值的副本,并且我们不能给基本数据类型的值添加属性.其为深拷贝. 2. 对于引用类型浅拷贝:只复制指向某个对象的指针,而不复制对象本身,新旧对象共享一块内存: 改变一个对象,另一个会随之改变: 深拷贝:复制并创建一个一模一样的对象,不共享内存,修改新对象,旧对象保持不变. 01 浅拷贝的实现 var arr = [1, 2, 3, '4']; var arr2 = a…

JS深拷贝拷贝的区别？

拷贝拷贝引用,共享内存深拷贝拷贝实例,不共享内存 1. 浅拷贝:当一个对象拷贝另一个对象的数据时,只要一个对象的数据发生改变时,另一个对象的数据也会发生改变,因为浅拷贝拷贝的是引用的地址实现方式: ES6 Object.assign()与扩展运算符...,两者都是只有是多层时才是浅拷贝,如果是一层还是深拷贝参数1:空对象参数2:需要拷贝的对象简单的赋值 3. 深拷贝:当一个对象拷贝另一个对象数据时,其中一个对象的数据发生改变时,不会影响另一个对象数据的改变实现方法: $.e…

关于js中onload事件的部分报错。

当使用onload获取元素时,建议在onload事件之前定义需要获取的元素名称,在onload里面只执行获取操作,这样获取到的元素在后面才能顺利使用. <!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="content-type" content="text/html" charset="UTF-8"> <ti…

JS中常见的几种报错类型

1.SyntaxError(语法错误) 解析代码时发生的语法错误 var 1a; //Uncaught SyntaxError: Invalid or unexpected token 变量名错误 console.log 'hello'); //Uncaught SyntaxError: Unexpected string 缺少括号 2.ReferenceError(引用错误) console.log(a); //Uncaught ReferenceError: a is not defined…

【【js】深拷贝一文中的几个错误点】的更多相关文章