练习向----深浅拷贝

JavaScript复制数据的几种级别

1. 赋值

• 把一个变量存储的值复制一份给到另一个变量
• 基本数据类型赋值以后两个变量没有关系
• 复杂数据类型赋值以后, 两个变量操作同一个存储空间

var o1 = { name: 'Jack' }
var o2 = o1
console.log(o1)
console.log(o2)
o2.name = 'Rose'
console.log(o1)
console.log(o2)

2. 浅拷贝

• 制作一个和原始数据一模一样的数据结构
• 把原始数据结构中的内容一个一个的复制到新数据结构中
• 只能拷贝一层数据结构

2. 浅拷贝
var o1 = { name: 'Jack', age: 18, gender: '男', info: { weight: 180, height: 180 } }
// 准备一个和 o1 一样的数据结构
var o2 = {}
// 遍历 o1 对象, 把每一个内容逐个添加到 o2 内
for (var k in o1) {
	// k 就是 o1 内的每一个 key
	// 当 k === 'info' 的时候
	// o2['info'] = o1['info']
	// 因为这个 info 存储的是一个地址
	// 所以此时 o2.info 和 o1.info 存储的是同一个对象的地址
	o2[k] = o1[k]
}
console.log(o1, o2)
o2.name = 'Rose'
o2.info.weight = 200
console.log(o1, o2)

3.深拷贝

• 按照浅拷贝的方式来继续进行第二层数据的拷贝
• 当我拷贝第一层数据的时候
  • 如果遇到某一个 key 保存的值是复杂数据类型
  • 进入到这个复杂数据类型内再次拷贝

递归实现深拷贝

问题: 如何判断一个数据结构是 数组还是对象 ?
语法: Object.prototype.toString.call(你要判断的数据)
返回值: 一个字符串类型 '[object 数据类型]'
console.log(Object.prototype.toString.call(123))
console.log(Object.prototype.toString.call(''))
console.log(Object.prototype.toString.call(true))
console.log(Object.prototype.toString.call(undefined))
console.log(Object.prototype.toString.call(null))
console.log(Object.prototype.toString.call({}))
console.log(Object.prototype.toString.call([]))
console.log(Object.prototype.toString.call(function () {}))

递归实现深拷贝

function deepCopy(origin,target){
    // 遍历
    for(var i in origin){
        // 如果是数组
        if(Object.prototype.toString.call(origin[i]) === '[object Array]'){
        //    deepCopy(origin[i],target[i])
              target[i] = Array.from(origin[i]);
        }else if(Object.prototype.toString.call(origin[i]) === '[object object]'){
           deepCopy(origin[i],target[i])
        }else{
           target[i] = origin[i]
        }
    }
}
deepCopy(o1,o2)
    var o1 = {
	name: 'Jack',
	age: 18,
	gender: '男',
	info: {
		weight: 180,
		height: 180,
		address: {
		    city: '北京'
		}
		},
	hobby: {
	ball: [ {k:'篮球'}, '足球', '羽毛球' ],
	sport: [ '跑步', '游泳' ]
	}
}

var o2 = {}
    deepCopy(o1,o2)
    console.log(o1,o2);