deepClone, extend, 深克隆对象和Object.assign(ES6)

deepextend:深对象扩展,带有柯里化 深度扩展 深对象延伸,带有柯里化。 安装 npm install deepextend 用法 var deepExtend = require ( 'deepextend' ) ; var obj1 = { a : 'A' , b : / foo / , d : { a : false , b : [ 2 , 3 ] , c : { foo : 'bar' } } , e : function ( ) { return 1 ; } , g : [ 8 , 9 ] } ; var obj2 = { a : 'Z' , d : { b : { n : [ 'x' , 'y' ] } } , f : 'qux' , g : [ 'a' , 'b' ] 立即下载

在看 you might not need jQuery的时候(外网打不开,这是个博客园转过来的),看到了$.extend函数来拷贝某个对象。测试了一下原文代码,居然复制不到深层的。原代码如下:

var deepExtend = function(out) {
  out = out || {};//问题就出在这里!

  for (var i = 1; i < arguments.length; i++) {
    var obj = arguments[i];

    if (!obj)
      continue;

    for (var key in obj) {
      if (obj.hasOwnProperty(key)) {
        if (typeof obj[key] === 'object')
          deepExtend(out[key], obj[key]);
        else
          out[key] = obj[key];
      }
    }
  }

  return out;
};

deepExtend({}, objA, objB);

这里虽然直接对out赋值了,但可能出现的情况是,原始的target对象容器中(第一个参数,即Out),out[key]为undefined,那么如果确定out[key]的类型为对象的情况下,才是指向同一个对象,否则并没有改变out[key]的值。

修改代码如下,将这一步提到前面,同时润色代码增加报错信息:

function extend(out){

    if(!out){

        console.error('where is your container ?')
    }

    var objs = [].slice.call(arguments,1)

    if(objs.length > 0){

        objs.forEach(function(item,index){

            if(typeof item !== 'object'){

                console.error('item' + index + ' is no valid arguments, expected to be object')

            }

            else {

                for(var key in item){

                    if(item.hasOwnProperty(key)){

                        if(typeof item[key] === 'object'){

                            out[key]= out[key] || {}  // 这步是最重要的!

                            extend(out[key],item[key])

                        }

                        else{

                            out[key] = item[key]
                        }
                    }

                }

            }

        })

    }

    else{

        console.error('no objs to be copy')
    }

    return out;
}

var output = extend({a:{c:2},f:'fuck'},{a:1},{
    b:{
        lala:'name'
    }
})

这样就可以达到深克隆的目的了。当然除了JQuery, zepto、 Lodash、underScore、Prototype等库都实现了这个工具。ES6中的Object.assign也原生提供了相应的功能。

Object.assign() 方法值能复制可枚举、本身的属性(enumerable and own properties), 它用在引用源上使用get方法,在目标容器上使用set方法,引发了getters、setters。因此,如果在融合的源对象含有getter的话,会不适用。如果要复制属性的定义,包括其可枚举性,应该使用Object.getOwnPropertyDescriptor()和Object.defineProperty()。

对深克隆,不可使用Object.assign() 方法,因为它只会复制对象的引用而不是新建一个对象。最简单的深克隆方法某过于此,但只能复制可枚举类型的。

let target = JSON.parse(JSON.stringify(source))

因此,对深克隆,最好还是用extend方式层层递归,直到把源对象的属性拆到不是对象而是plain value为止。

underscore.deepextend:用于深度扩展对象的下划线助手 下划线.deepextend 这个库是 Underscore 的扩展,它允许扩展对象和函数。 特征 深度扩展对象和函数。 依赖关系 underscore.js (>= 1.5.0) underscore.catenate (>= 0.1.1) 节点 var _ = require ( 'underscore' ) ; _ . mixin ( require ( 'underscore.deepextend' ) ) ; 例子 var object = { foo : { bar : 123 } } ; object = _ . deepExtend ( object , { foo : { baz : 321 } } ) ; object . foo . bar == 123 // true object . foo . baz == 321 // true 执照 版权所有 (c) 立即下载

相关推荐

underscore.deepExtend:将源对象中的所有属性复制到目标对象,并返回目标对象。 此方法将递归复制也是对象的相互属性

下划线混合 deepExtend 将源对象中的所有属性复制到目标对象,并返回目标对象。 此方法将递归复制也是对象的相互属性。 原代码: : 如何使用 var user = { "name" : { "first" : "Earl" } , "friends" : [ "0" , "1" , "3" ] , "job" : "Mad Scientist" , "pets" : { "dog" : "Ralph" } } ; var userUpdate = { "name" : { "last" : "Duncan" } , "friends" : [ "6" , "9" ] , "job" : "Happy Scientist" , "pets" : { "cat" : "Judy" } , "city"

扩展prototype.js Object.deepExtend深度扩展

Object.deepExtend = function(destination, source) { for (var property in source) { if (source[property] &amp;&amp; source[property].constructor &amp;&amp; source[property].constructor =...

nonkr的专栏 494

前端开源库-underscore-deep-extend

前端开源库-underscore-deep-extendunderline deep extend是为underline、lodash和friends实现的Deepextend。

深度扩展你的JavaScript对象:深入探索`deep-extend`

深度扩展你的JavaScript对象:深入探索deep-extend 在日常的软件开发中,我们常常面临对象合并的需求。当简单的对象合并已不能满足需求时,深度扩展(Deep Extend)的能力变得至关重要。今天,我们要推荐的是一个简单而强大的Node.js库——deep-extend,它能够递归地合并对象,确保即使是嵌套的对象也能得到妥善处理。 项目介绍 deep-extend是一个轻量级的npm...

gitblog_00891的博客 507

手把手教你用BQ Studio给BQ40Z50电量计“做体检”:从Golden Learning到精度验证的全流程实操

本文详细介绍了如何使用BQ Studio对BQ40Z50电量计进行全流程调试,从Golden Learning到精度验证。通过硬件连接、参数配置和优化技巧,帮助工程师提升电池管理系统的精度和性能,适用于BMS开发和电量计校准的实际应用场景。

weixin_30824599的博客 449

C++常见面试题总结

C++常见面试题总结

xu_fu_yong的专栏 8万+

Deep Extend:深度对象扩展的利器

Deep Extend:深度对象扩展的利器 项目介绍 Deep Extend 是一个强大的 Node.js 库,专注于递归地扩展对象。无论你是在处理复杂的配置文件,还是在构建复杂的应用程序时需要合并多个对象,Deep Extend 都能为你提供简洁而高效的解决方案。通过递归合并对象的属性,Deep Extend 能够确保你得到一个完全合并后的对象,而不会丢失任何嵌套的属性。 项目技术分析 Deep...

gitblog_00001的博客 430

医学影像AI的幻觉问题与CCD解决方案

医学影像AI在辅助诊断中面临的核心挑战是幻觉现象,即模型生成不符合实际影像的虚假诊断。这种现象源于多模态大语言模型(MLLMs)在视觉-语言对齐上的技术局限,可能导致假阳性或假阴性的临床风险。通过临床对比解码(CCD)框架,结合症状锚定和专家引导的双阶段校准机制,可有效提升模型输出的可靠性。该技术在CheXpert和MIMIC-CXR等标准数据集上验证,显著改善了肺不张、胸腔积液等关键指标的检测准确率。对于医疗AI落地场景,这种即插即用的解决方案既规避了数据隐私合规问题,又降低了基层医院的部署门槛,为AI辅

weixin_36303807的博客 322

深拷贝和浅拷贝(Es6)

深拷贝和浅拷贝

Miketutu的博客 2396

3张RTX 4090就能跑!BAGEL-7B多模态模型本地部署避坑指南(附Flash Attention安装技巧)

本文详细介绍了如何在3张RTX 4090显卡上本地部署BAGEL-7B多模态模型,包括硬件配置、环境设置、多卡并行优化及常见问题解决方案。特别提供了Flash Attention安装技巧和显存优化策略,帮助开发者高效运行这一开源多模态模型,实现文本与图像生成任务。

1a2s3d4f5g的博客 652

Vue 网络处理 - axios 异步请求的使用,请求响应拦截器(最佳实践)

axios 用来在前端页面发起一个异步请求,请求之后页面不动,响应回来刷新局部.1.为什么不使用 ajax 呢?官方:在 jQuery 中推荐使用 ajax 技术, Vue 里面不推荐使用 jQuery 框架,因此 Vue 更推荐使用 axiox 异步请求库(axios并不是 vue 官方库).2.axios 特性可以从浏览器中创建 XMLHttpRequests可以从 node.js 中创建 http 请求.支持 Promise API.支持拦截请求和响应.转换请求数据和响应数据.

CYK_byte的博客 1万+

js深拷贝与浅拷贝

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

ii窝窝头的博客 149

零基础入门转录组数据可视化——绘制差异小提琴图(常规)

转录组数据可视化之一,先介绍相关基础知识,其次用实际案例为基础,由浅入深介绍差异小提琴图绘制的全过程,包括内容有相关代码和截屏。

呆猪儿的博客 635

js面试问题笔记(一)

js面试问题笔记(一)

qq_42750608的博客 1510

YOLOv11 损失函数进阶:Varifocal Loss 让正负样本精度双升

创建self.alpha = alpha # 正样本权重系数self.gamma = gamma # 聚焦系数self.lambda_reg = lambda_reg # 回归损失权重# 分类损失:Varifocal Classification Loss# 正样本权重:基于预测置信度# 计算 BCE 损失并加权cls_loss = cls_loss.sum() / (cls_true.sum() + 1e-6) # 按正样本数归一化。

m0_71589036的博客 439

华为OD新系统机试真题 - 配置操作失败数量统计

华为OD机试新系统 4月8号【配置操作失败数量统计】,提供C语言、Java、C++、Python、Go、JavaScript源码实现,并提供完整思路讲解,以及在线OJ模拟做题。华为OD机试真题【配置操作失败数量统计】。

qq_45776114的博客 1158

深度克隆详解以及实现

深度克隆详解: 拷贝数组/对象没有生成新的数据,而是复制了一份引用   拷贝数据分为两种类型: 1、基本数据类型:拷贝后会生成一份新的数据,修改拷贝以后的数据不会影响原数据(没有深浅拷贝之说) 2、对象/数组:拷贝后不会生成新的数据,而拷贝的是引用,修改拷贝以后的数据会影响原来的数据(有深浅拷贝之说) 注意:影响原数据的是浅拷贝 拷贝数据的方法: 1、直接赋值给一个变量(浅拷贝...

每文的博客 6919

Outlook Express 6 (OE6) for Win7/Win8/Win10

英文版 Outlook Express6.0, 兼容Win7/Win10/WinXP,解压就可用。

vue实现深拷贝的方法

5.在 vue中,使用方法进行深拷贝的时候,需要注意: (1)如果属性B和变量A共享同一个对象,那么可以使用方法将变量A的属性赋值给变量B (3)在方法中定义一个新的类来代替原来的类,将两个方法的作用域进行区分。我们来看一下深拷贝的代码: 我们看到,这里使用了数组(string)和对象(object)进行深拷贝,这里我们首先对数组(string)和对象(object)进行了复制操作,然后在需要进行修改的地方,使用了vue-cli中的属性(value)来进行修改。但要实现深拷贝,需要两个对象具有相同的属性。

花生日记 5464

jre9下载 jdk9

(Java SE Runtime Environment 9.0) 9.0u175 官方最新版 【x86|x64】

精雕软件(JDpaint) 5.5 绿色版

精雕软件(JDpaint) 5.5 绿色版精雕软件(JDpaint) 5.5 绿色版精雕软件(JDpaint) 5.5 绿色版

Object.assign()

如何往集合中的每个对象里添加一个键值对

m0_69021450的博客 290

ET2012新版免狗免安装绿色软件

ET2012新版免狗免安祖昂绿色软件。,新界面,新视觉,

vue深拷贝的三种实现方式

vue深拷贝的三种实现方式 js深拷贝的三种实现方式

weixin_51747462的博客 2万+

React中的浅复制与深复制

React中的浅复制与深复制 学习前端不到一年,在编写react框架下的代码时,经常会遇到明明已经改变了props页面却没有重新渲染的问题。于是为自己整理了一下关于react中的浅复制与深复制的区别以及实现方式,希望对刚刚入门前端的童鞋们也有所帮助。

Babyfaceqian的博客 1万+

ES6学习笔记(六)——深拷贝与浅拷贝

直接赋值和浅拷贝有什么区别?直接赋值的方法,只要是对象,都会相互影响,因为是直接拷贝对象栈里面的地址浅拷贝如果是一层对象,不相互影响,如果出现多层对象拷贝还会相互影响浅拷贝怎么理解?拷贝对象之后,里面的属性值是简单数据类型直接拷贝值如果属性值是引用数据类型则拷贝的是地址。

weixin_56370772的博客 1181

深拷贝实现的六种方式(优缺点浅析)

深拷贝实现的几种方式:1、通过递归方式实现深拷贝;2、JSON.parse(JSON.stringify(obj));3、jQuery的extend方法实现深拷贝;4、Object.assign(obj1, obj2);5、扩展运算符;6、数组使用数组方法进行深拷贝(concat、slice)...

z1093541823的博客 6026

vue项目中的deepClone

因为涉及到组件传值和表单双向绑定问题,要将后端返回的数据从value渲染为对应的text,免不了修改原数据,原数据就算赋值给别的变量,其内存地址还是一致,那样一旦在js中修改其中任意一项,提交时会造成返回和提交的数据格式不一致,从而出现修改和详情弹窗的各种bug,为了渲染正确的下拉框和树形结构绑定的数据,于是在项目中使用了深拷贝... 错误示范: editrow(val) { this.editFormData = {}; this.editFormData = val; ...

weixin_50902154的博客 2485

javascript-es6之深度克隆

在讲深度克隆之前,我们需要了解一些知识点: 判断数据类型的方式: 1、typeof返回的数据类型:String Number Boolean Undefined Object Function 2、Object.prototype.toString.call(obj) 拷贝数据: 基本数据类型: 拷贝后会生成一份新的数据,修改拷贝以后的数据不会影响原数据 对象/数组: 拷贝后不会生成新的数据,而且...

qq_44586361的博客 1880

jq中extend函数中的deep参数

昨天在研究继续研究JS插件的时候注意到了extend这个函数,然后就用几个示例去加深对它的印象,不过在过程中对于deep这个参数产生了疑惑。当jq1.1.4版本后extend 这个函数增加了一个参数deep,用来进行选择是否深拷贝,深浅拷贝这里我就不说了,这里直接用例子来看一下 给出3个例子,大家应该就明白了: 1.我们可以发现当我们去改变a中的age值的时候,b中改变 v

liuzijiang1123的专栏 1344
上一篇: 如何在html中直接给某个按钮置灰(样式、去除绑定事件), querySelector与jquery selector的不同之处
下一篇: 通过闭包和setTimeout让背景颜色从黄变白再变紫红
十方魔
博客等级 码龄10年 202粉丝 93原创
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付:10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值