开场
最近科学技术日新月异,各种技术百花齐放,我想总结一下 JS clone对象的方法和用法(哎,说了这么多跟我想表达--我长得帅,好像真没啥关系呀)。
ES6 +
-
Object.assign()
作为新标准ES6 推出了Object.assign()这个方法,该方法能向目标对象拷贝一个或多个对象的自身的所有可枚举属性。具体的用法请点击上面MDN的链接,非常详细。
例子:
let cloned = Object.assign({}, obj); //new {a:1, b:2, c:3};
这里我对这个方法的用法说一点,就是在进行 deep clone (深度克隆)的时候可能需要变换方法,因为Object.assign()只是复制了属性的值,如果这个被复制对象的属性值是一个引用对象,那他将只会复制这个引用地址( because Object.assign() copies property values. If the source value is a reference to an object, it only copies that reference value.),所以如果你改变了这个引用对象的值,那么原对象也会改变。不太明白?!别急,客官,小二!~~ 上代码~~~!
function test() {
'use strict';
let obj1 = { a: 0 , b: { c: 0}};
let obj2 = Object.assign({}, obj1);
console.log(JSON.stringify(obj2)); // { a: 0, b: { c: 0}}
obj1.a = 1;
console.log(JSON.stringify(obj1)); // { a: 1, b: { c: 0}}
console.log(JSON.stringify(obj2)); // { a: 0, b: { c: 0}}
obj2.a = 2;
console.log(JSON.stringify(obj1)); // { a: 1, b: { c: 0}}
console.log(JSON.stringify(obj2)); // { a: 2, b: { c: 0}}
obj2.b.c = 3; // 敲黑板,重点在这
console.log(JSON.stringify(obj1)); // { a: 1, b: { c: 3}}
console.log(JSON.stringify(obj2)); // { a: 2, b: { c: 3}}
// Deep Clone
obj1 = { a: 0 , b: { c: 0}};
let obj3 = JSON.parse(JSON.stringify(obj1));
obj1.a = 4;
obj1.b.c = 4;
console.log(JSON.stringify(obj3)); // { a: 0, b: { c: 0}}
}
test();
LOL,看来咱们之间,代码才是最好的沟通方式。
2....
什么是...呢,...就是 spread operator(扩展运算符),当然在这也不展开讲其运用(代替数组的apply,合并数组等),欲知详情点击上面的...。本文只关注其中的复制对象的功能。
let obj = {a:1, b:2, c:3}; //ES6
let cloned = {...obj}; //new {a:1, b:2, c:3};
注意:
1.Only for iterables(可迭代的)
扩展运算符(除了在扩展属性的情况下)只能应用于可迭代对象:
var obj = {'key1': 'value1'};
var array = [...obj]; // TypeError: obj is not iterable
2.基本用法和Object.assign()相同,也是只能进行 Shallow-cloning。但是有一点不同:Note that Object.assign()
triggers setters whereas spread syntax doesn't.(前者自动触发 stetters 方法,而后者不会。)
var obj1 = { foo: 'bar', x: 42 };
var obj2 = { foo: 'baz', y: 13 };
var clonedObj = { ...obj1 };
// Object { foo: "bar", x: 42 }
var mergedObj = { ...obj1, ...obj2 };
// Object { foo: "baz", x: 42, y: 13 }
ES5
ES5 能用的直接方法就比较少了。
- JSON.parse(JSON.stringify(obj)); 这个方法不会改变原对象,对象中如果有函数function则不能正确复制,也不能用于带有大量数据的obj,性能问题。
var obj = {a:1, b:2, c:3};
let cloned = JSON.parse(JSON.stringify(obj)); // 如果对象中有Function 直接被忽略
- 既然直接的方法比较少,那就自己写个能深度克隆所有obj的方法吧,来来来,上代码,我先干,各位随意。
//深复制对象方法
var cloneObj = function (obj) {
var newObj = {};
// 判断是否为Array 还可以用 obj instanceof Array 不过首选 Array.isArray();
if (Array.isArray(obj)) {
newObj = [];
} else if ( typeof obj === "function") {
// 在这加上function的判断,如果是function直接返回。
return obj;
}
for (var key in obj) {
var val = obj[key];
//newObj[key] = typeof val === 'object' ? arguments.callee(val) : val;
//arguments.callee 在哪一个函数中运行,它就代表哪个函数, 一般用在匿名函数中。
newObj[key] = typeof val === 'object' ? cloneObj(val): val;
}
return newObj;
};
//测试
var obj = {a:function (){console.log(this.b.c);},b:{c:1}};//设置一个对象
newObj = cloneObj(obj);//复制对象
console.log(newObj)
newObj.b.c=2;//给新对象赋新值
obj.a(); //1,不受影响
newObj.a(); //2
var obj0 = [1, 3 ,4 ,[3,4]]; // 完美复制数组
console.log(typeof obj0); // Array 的typeof 为object
newObj0 = cloneObj(obj0);
console.log(newObj0) // [1, 3 ,4 ,[3,4]];
var obj00 = function hello() { console.log('world') } // 完美复制function
var newObj00 = cloneObj(obj00); // 'world'
newObj00.prototype.hello = "hello";
var hhh = new newObj00();
console.log(obj00.hello); // undefined
console.log(hhh.hello); // 'hello'
console.log(newObj00()) // 'world'
- 只针对数组的方法:arrayObject.concat(arrayX,arrayX,......,arrayX)
var a=[1,2,3];
var b=a;
var c=[].concat(a);
a.push(4);
console.log(b); // b 就是a
console.log(c); // c 只是c
克隆人
绝不标题党,下面我就给大家展示克隆人。
// 母体
var human = {
sex: '',
name:'',
age: '',
address:'',
say: function () {
console.log(`Hello, My name is ${this.name}, I'm a ${this.sex}, How are you ?`);
},
setPerson: function (sex,name,age,address) {
this.sex = sex || this.sex ;
this.name = name || this.name;
this.age = age || this.age;
this.address = address || this.address;
},
init: function (sex,name,age,address) {
this.setPerson(...arguments);
this.say();
}
}
var wind = cloneObj(human) // 克隆 母体
wind.init('boy','wind','18','Earth');// 风生
var water= cloneObj(wind); // 克隆 风
water.init('girl','water'); // 水起
哈哈,在JS里,万物皆对象,知道了克隆对象的法门还怕克隆不了人?哼,笑话,你就说干啥我不能?! 神马?!让我给你找个对象,咳咳,这个,这个嘛,哎呀,时间不早了,今天先聊到这里,下次有缘再见,再聊啦,我很忙的......ヘ( ̄ω ̄ヘ)
落幕
以上就是鄙人粗浅的总结,如果有好想法和方法,还请客官留言,不吝赐教。
感谢阅读~
参考链接:
How do I correctly clone a JavaScript object?
javascript中对象的深度克隆