纯净、安全、绿色的下载网站

首页|软件分类|下载排行|最新软件|IT学院

当前位置:首页IT学院IT技术

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

浅笑·   2021-04-29 我要评论
想了解JS对象复制(深拷贝和浅拷贝)的相关内容吗,浅笑·在本文为您仔细讲解JS对象复制(深拷贝和浅拷贝)的相关知识和一些Code实例,欢迎阅读和指正,我们先划重点:JS,对象赋值,JS,深拷贝,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);
}

相关文章

猜您喜欢

  • win10+anaconda安装yolov5 win10+anaconda安装yolov5的方法及问题解决方案

    想了解win10+anaconda安装yolov5的方法及问题解决方案的相关内容吗,light-124在本文为您仔细讲解win10+anaconda安装yolov5的相关知识和一些Code实例,欢迎阅读和指正,我们先划重点:win10+anaconda安装yolov5,win10安装yolov5,下面大家一起来学习吧。..
  • Vue项目引入PWA Vue项目引入PWA的步骤

    想了解Vue项目引入PWA的步骤的相关内容吗,大海爱奔跑在本文为您仔细讲解Vue项目引入PWA的相关知识和一些Code实例,欢迎阅读和指正,我们先划重点:vue,引入PWA,下面大家一起来学习吧。..

网友评论

Copyright 2020 www.iunios.com 【OS下载站】 版权所有 软件发布

声明:所有软件和文章来自软件开发商或者作者 如有异议 请与本站联系 点此查看联系方式