拷贝
在 上一节 中我们将了js继承的几种方式。这一节我们来讲一下，js对象的拷贝。为什么会出现拷贝。我们来看一个列子，您大致就明白了。
var a = {b:1}
var b = a
a.b =2
console.info(b.b) //2
我们可以看到，两个对象是同一个内存地址，我们改变了a.b然而我们的b.b被动的改变了。所以这时候出现了一个东西叫对象的拷贝。此时我们又要引出两个概念：浅拷贝，深拷贝
浅拷贝
顾名思义，浅拷贝是说只是拷贝表层，并不会深入的拷贝对象。换句话说一个对象，它只会拷贝一层，而不会拷贝对象中的子对象。让我们看下几种浅拷贝的实现方式。
对象
对象的拷贝
遍历实现浅拷贝
var obj1 ={
a:1
}
var obj2 = {
b:2
};
function extendCopy(p,s) {
var c = {};
for (var i in p) {
c[i] = p[i];
}
for (var j in s) {
c[j] = s[j];
}
return c;
}
var newObj = extendCopy(obj1,obj2);
console.info(newObj); // {a: 1, b: 2}
es6中Object.assign实现浅拷贝
// 对象浅拷贝， 复制所有可枚举属性
const obj1 = {a: 1};
const obj2 = {b: 2};
// copy obj1 and obj2 to a new obj;
const newObj = Object.assign({}, obj1, obj2)
console.log(newObj) //// {a: 1, b: 2}
es6中结构赋值实现浅拷贝
const obj1 = {a: 1, b: 2};
// obj2 equal obj1
const obj2 = {...obj1};
console.log(obj2) // {a: 1, b: 2}
数组
数组的拷贝。
遍历拷贝。
const arr = [1,2,3];
let newarr = [];
arr.map((data)=>{
newarr.push(data)
});
console.log(newarr); //[1,2,3]
Array.from(要复制的数组);
const arr=[1,2,3];
const newarr =Array.from(arr);
console.info(newarr); //[1,23]
...结构赋值
const arr=[1,2,3];
const newarr=[...arr];
console.info(newarr); //[1,2,3]
深拷贝
好了我们大概已经知道几种浅拷贝的方式和方法。下面我们来介绍下复杂的数据怎么办，很简单深拷贝。目前深拷贝有很多实现方式，比如lodash啊，jq啊，还有原生的js，我们这里大概枚举一些常用的。
Underscore库 _.clone()
var x = {
a: 1,
b: { z: 0 }
};
var y = _.clone(x);
jQuery —— $.extend()
var x = {
a: 1,
b: { f: { g: 1 } },
c: [ 1, 2, 3 ]
};
var y = $.extend({}, x), //shallow copy
z = $.extend(true, {}, x); //deep copy
lodash _.cloneDeep(value)
var objA = { "name": "colin" };
var objB = _.cloneDeep(objA);
原生js字符串
var obj = {"a":1,"b":2}
var newObj = JSON.parse((JSON.stringify(obj)))
自己来封装一个diy
var cloneObj = function(obj){
var str, newobj = obj.constructor === Array ? [] : {};
if(typeof obj !== 'object'){
return;
} else if(window.JSON){
newobj = JSON.parse(JSON.stringify(obj));
} else {
for(var i in obj){
newobj[i] = typeof obj[i] === 'object' ?
cloneObj(obj[i]) : obj[i];
}
}
return newobj;
};
结语
好了，今天的拷贝内容终于完结了，记录代码记录知识，本博客就是快准狠，直接上代码片段，希望喜欢的朋友给点支持多多转发，不说了，抽烟去了。
网友评论