当前位置:网站首页 > Vue.js开发 > 正文

js slice深拷贝(js深拷贝和浅拷贝的方法)



深拷贝和浅拷贝是只针对Object和Array这样的引用数据类型的。

浅拷贝创建一个新对象,该对象有着原始对象属性值的一份精确拷贝。如果属性是基本类型,拷贝的就是基本类型的值,如果属性是引用类型,拷贝的就是内存地址 ,所以如果其中一个对象改变了这个地址,就会影响到另一个对象

示例代码:

从上面的示例可以看出,当newPeople的name属性修改后,原来的people也发生了变化,这是因为新创建的对象与旧对象具有相同的内存地址

深拷贝是将一个对象从内存中完整的拷贝一份出来,从堆内存中开辟一个新的区域存放新对象,且修改新对象不会影响原对象

示例代码:

从上面的例子可以看出,深拷贝后,修改新对象,不会影响原对象。

方法用于将所有可枚举属性的值从一个或多个源对象分配到目标对象。它将返回目标对象。Object.assign() 进行的是浅拷贝,拷贝的是对象的属性的引用,而不是对象本身。

语法:

如果目标对象中的属性具有相同的键,则属性将被源对象中的属性覆盖。后面的源对象的属性将类似地覆盖前面的源对象的属性。

示例:

当对象object只有一层的时候,是深拷贝,示例代码如下:

concat()方法用于合并两个或多个数组。此方法不会更改现有数组,而是返回一个新数组。

语法:

示例代码:

slice() 方法返回一个新的数组对象,这一对象是一个由 begin 和 end 决定的原数组的浅拷贝(包括 begin,不包括end)。原始数组不会被改变。

语法:

示例代码:

直接使用“=”赋值可以实现浅拷贝,示例代码如下:

JSON是一种语法,用来序列化对象、数组、数值、字符串、布尔值和 null 。它基于JavaScript语法,但与之不同:JavaScript不是JSON,JSON也不是JavaScript。

JSON对象包含两个方法:用于解析JSON的parse()方法,以及将对象/值转换为JSON字符串的stringify()方法,下面对这两种方法进行一些介绍。

方法用来解析JSON字符串,构造由字符串描述的JavaScript值或对象。提供可选的 reviver 函数用以在返回之前对所得到的对象执行变换(操作)。

语法:

示例:

方法将一个 JavaScript 对象或值转换为 JSON 字符串,如果指定了一个 replacer 函数,则可以选择性地替换值,或者指定的 replacer 是数组,则可选择性地仅包含数组指定的属性。

语法:

示例:

深拷贝示例代码:

用JSON.stringify将对象转成JSON字符串,再用JSON.parse()把字符串解析成对象,这样新的对象产生了,实现深拷贝。这种方法虽然可以实现数组或对象深拷贝,但不能处理函数。

由上面例子可以看出,函数并没有被拷贝在arr2中。这是因为 JSON.stringify() 方法是将一个JavaScript值(对象或者数组)转换为一个 JSON字符串,不能接受函数。

Lodash是一个JavaScript库,提供了多个实用程序功能,而Lodash库中最常用的功能之一是cloneDeep()方法。此方法有助于深度克隆对象,还可以克隆JSON.stringify()方法的局限性,即不可序列化的属性。

示例代码:

到此这篇关于JavaScript中深拷贝与浅拷贝详解的文章就介绍到这了,更多相关JavaScript深拷贝与浅拷贝内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

到此这篇js slice深拷贝(js深拷贝和浅拷贝的方法)的文章就介绍到这了,更多相关内容请继续浏览下面的相关推荐文章,希望大家都能在编程的领域有一番成就!

版权声明


相关文章:

  • Vue安装下列说法正确的是(用来安装vue模块的正确命令是)2025-05-17 18:27:09
  • pcie 5.0 和pcie 4区别(pcie 4.0 5.0)2025-05-17 18:27:09
  • red hat linux官网(red hat linux9.0)2025-05-17 18:27:09
  • 批处理命令教程 pdf(批处理教程(最全版).pdf免费)2025-05-17 18:27:09
  • vue2.0脚手架的安装(vuecli脚手架安装)2025-05-17 18:27:09
  • vue 组件插槽(vue插槽用法)2025-05-17 18:27:09
  • vue 安装脚手架(vue2.0脚手架的安装)2025-05-17 18:27:09
  • vue路由守卫面试题(vue的路由守卫实现原理)2025-05-17 18:27:09
  • ubuntu16.04安装cmake(ubuntu16.04安装教程)2025-05-17 18:27:09
  • 安装node环境 vue npm(怎样安装node.js环境)2025-05-17 18:27:09
  • 全屏图片