阅读 12

浅谈js中的继承和拷贝(下)

----欢迎查看我的博客----

拷贝

  在 上一节 中我们将了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;
};
复制代码

结语

  好了,今天的拷贝内容终于完结了,记录代码记录知识,本博客就是快准狠,直接上代码片段,希望喜欢的朋友给点支持多多转发,不说了,抽烟去了。

关注下面的标签,发现更多相似文章
评论