deepClone, extend, 深克隆对象和Object.assign(ES6)
来源:互联网 发布:人力资源软件 免费 编辑:程序博客网 时间:2024/05/17 23:02
在看 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为止。
阅读全文
0 0
- deepClone, extend, 深克隆对象和Object.assign(ES6)
- 对象克隆之DeepClone代码
- es6 javascript对象方法Object.assign()
- es6 javascript对象方法Object.assign()
- es6 javascript对象方法Object.assign()
- ES6-对象的扩展-Object.assign()
- es6 javascript对象方法Object.assign()
- ES6之Object.assign
- ES6 Object.assign()
- es6 Object.assign
- ES6之Object.assign()详解
- 用自己的思路编写一个$.extend()/Object.assign()对象合并函数
- JavaScript对象扩展(Object.is(), assign(), 对象遍历keys, es6原型介绍)
- JS 对象复制Object.assign和Object.create
- Java(对象的深克隆和浅克隆)
- 对象引用(浅克隆和深克隆)
- java对象克隆(浅克隆和深克隆)
- Object类中的clone方法 & 浅克隆和深克隆
- IP组播方案介绍
- Linux驱动学习----搜罗前辈大作
- 面试中怎么吹spring才显得自己高端
- 将dwg文件怎么打开,教你最便捷
- Tkinter中复选菜单是否被选中的判断与设置
- deepClone, extend, 深克隆对象和Object.assign(ES6)
- Spring框架之IoC容器—ConfigurableBeanFactory接口
- JSON字符串 与 对象 、集合 之间的转换
- 牛的基因组学
- Redis常用方法实例
- first sight@echo
- Android Studio应用开发简介
- SQL之创建和修改表
- svn 常用操作命令