JS对象复制(深拷贝和浅拷贝)

 更新时间:2021年04月29日 09:42:58   作者:浅笑·  
这篇文章主要介绍了JS对象复制(深拷贝和浅拷贝),并附有详细代码,感兴趣的小伙伴们,可以参考下

一、浅拷贝

1、Object.assign(target,source,source...)

a、可支持多个对象复制

b、如果source和target属性相同 source会复制target的属性

c、target只能为Object对象

var obj = {a:1,b:2}
undefined
Object.assign({c:3},obj)
{c: 3, a: 1, b: 2}
obj
{a: 1, b: 2} 
兼容性写法if(Object.assign){//兼容}else{//不兼容}

2、扩展运算符(spread)

支持将多个对象复制到一个对象上“

var obj1 = { foo: "foo" };
var obj2 = { bar: "bar" };
 
var copySpread = { ...obj1, ...obj2 }; // Object {foo: "foo", bar: "bar"}
copySpread 
{foo: "foo", bar: "bar"}
var obj = {a:1,b:2,c:3}
var objs = {...obj}
objs
{a: 1, b: 2, c: 3}
objs.a=10
10
objs
{a: 10, b: 2, c: 3}
obj
{a: 1, b: 2, c: 3}

二、深拷贝

1、使用对象序列化 JSON.stringify()和JSON.parse()

注意:此方法仅在原对象包含可序列化值类型且没有任何循环引用时才有效。不可序列化值类型的一个例子是Date对象 -JSON.parse只能将其解析为字符串而无法解析回其原始的Date对象 或者对象中属性值为function

var obj = {a:1,b:[1,2,3],c:{e:3},bool:false}
undefined
var objs = JSON.parse(JSON.stringify(obj))
undefined
objs
{a: 1, b: Array(3), c: {…}, bool: false}
objs.bool = true
true
objs
{a: 1, b: Array(3), c: {…}, bool: true}
obj
{a: 1, b: Array(3), c: {…}, bool: false}

2、使用递归,对对象属性进行判断

function deepClone(obj) {
  var copy;
 
  // 如果 obj 是 null、undefined 或 不是对象,直接返回 obj
  // Handle the 3 simple types, and null or undefined
  if (null == obj || "object" != typeof obj) return obj;
 
  // Handle Date
  if (obj instanceof Date) {
    copy = new Date();
    copy.setTime(obj.getTime());
    return copy;
  }
 
  // Handle Array
  if (obj instanceof Array) {
    copy = [];
    for (var i = 0, len = obj.length; i < len; i++) {
        copy[i] = clone(obj[i]);
    }
    return copy;
  }
 
  // Handle Function
  if (obj instanceof Function) {
    copy = function() {
      return obj.apply(this, arguments);
    }
    return copy;
  }
 
  // Handle Object
  if (obj instanceof Object) {
      copy = {};
      for (var attr in obj) {
          if (obj.hasOwnProperty(attr)) copy[attr] = clone(obj[attr]);
      }
      return copy;
  }
 
  throw new Error("Unable to copy obj as type isn't supported " + obj.constructor.name);
}

以上就是JS对象复制(深拷贝和浅拷贝)的详细内容,更多关于JS的资料请关注脚本之家其它相关文章!

相关文章

  • 微信小程序之swiper滑动面板用法示例

    微信小程序之swiper滑动面板用法示例

    这篇文章主要介绍了微信小程序之swiper滑动面板用法,结合实例形式详细分析了swiper滑动面板的具体功能、参数、使用方法及相关操作注意事项,需要的朋友可以参考下
    2018-12-12
  • TypeScript中的类型断言[as语法|<>语法]的使用

    TypeScript中的类型断言[as语法|<>语法]的使用

    本文主要介绍了TypeScript中的类型断言[as语法|<>语法]的使用,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2022-06-06
  • JavaScript静态作用域和动态作用域实例详解

    JavaScript静态作用域和动态作用域实例详解

    这篇文章主要介绍了JavaScript静态作用域和动态作用域的实例代码,本文通过文字实例代码相结合的形式给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-06-06
  • JavaScript设计模式之工厂模式和构造器模式

    JavaScript设计模式之工厂模式和构造器模式

    这篇文章主要介绍了JavaScript设计模式之工厂模式和构造器模式,本文同时讲解了设计模式的类别如创建型设计模式、结构型设计模式、行为设计模式等内容,需要的朋友可以参考下
    2015-02-02
  • Webpack打包过程中处理ES6模块的循环依赖问题小结

    Webpack打包过程中处理ES6模块的循环依赖问题小结

    Webpack通过“暂时性引用”特性处理ES6模块的循环依赖,即在模块加载时创建占位符,确保模块能够正确加载,本文介绍Webpack打包过程中如何处理ES6模块的循环依赖,感兴趣的朋友一起看看吧
    2025-02-02
  • JS+DIV+CSS实现的经典标签切换效果代码

    JS+DIV+CSS实现的经典标签切换效果代码

    这篇文章主要介绍了JS+DIV+CSS实现的经典标签切换效果代码,涉及JavaScript基于鼠标事件针对页面元素动态变换的实现技巧,页面美观实用,需要的朋友可以参考下
    2015-09-09
  • JS中数组合并的几种常见方法

    JS中数组合并的几种常见方法

    这篇文章主要给大家介绍了关于JS中数组合并的几种常见方法,在开发的过程中,我们很多时候会遇到需要将两个数组合并成一个数组的情况,文中通过实例代码介绍的非常详细,出现需要的朋友可以参考下
    2023-07-07
  • 基于JS实现textarea中获取动态剩余字数的方法

    基于JS实现textarea中获取动态剩余字数的方法

    这篇文章主要介绍了基于JS实现textarea中获取动态剩余字数的方法的相关资料,非常不错,具有参考借鉴价值,感兴趣的朋友一起看看吧
    2016-05-05
  • JS模拟实现哈希表及应用详解

    JS模拟实现哈希表及应用详解

    这篇文章主要介绍了JS模拟实现哈希表及应用,结合实例形式分析了javascript模拟实现哈希表的步骤、相关操作技巧与使用方法,需要的朋友可以参考下
    2018-05-05
  • 详解webpack3如何正确引用并使用jQuery库

    详解webpack3如何正确引用并使用jQuery库

    本篇文章主要介绍了详解webpack3如何正确引用并使用jQuery库,具有一定的参考价值,有兴趣的可以了解一下
    2017-08-08

最新评论