JS,数据基础类型之浅拷贝和深拷贝
基础数据类型
1、基本类型(值类型):Boolean、String、Number、Symbol、Null、Undefined
2、引用类型:Function、Object、Array
特别说明:Symbol是ES6新增的原始数据类型,表示独一无二
浅拷贝和深拷贝
区分:假设B复制了A,当修改A时,看B是否会发生变化,如果B也跟着变了,说明这是浅拷贝,如果B没变,那就是深拷贝
场景:vue操作数据时,把item属性赋值给一个变量form,修改form时发现item也变了,这时候需要 form = { ...item }
深入理解--浅拷贝
(1) Object.assign()
var obj1 = {a: 1, b: 2}
var obj2 = Object.assign({}, obj1) // 要注意Object.assign第一个参数必须是个空对象
obj2.a = 4
console.log(obj1, obj2)
// obj1, { a: 1, b: 2 }
// obj2, { a: 4, b: 2 }
(2) 解构赋值
var obj1 = {a: 1, b: 2}
var obj2 = {...obj1}
obj2.a = 4
console.log(obj1, obj2)
// obj1, { a: 1, b: 2 }
// obj2, { a: 4, b: 2 }
缺陷, 这两种方式通常只能拷贝简单数据结构,如果数据结构复杂化类似于:
var obj1 = [{
name: '臧三',
childs: ['小明', '小芳']
}]
var obj2 = [...obj1]
obj2[0].childs = []
console.log(obj1, obj2)
// obj1, { name: '臧三', childs: [] }
// obj2, { name: '臧三', childs: [] }
发现两个obj的值都发生了改变,此时我们需要深拷贝
深入理解--深拷贝
(1) 利用json.stringify
var obj1 = [{
name: '臧三',
childs: ['小明', '小芳']
}]
var obj2 = JSON.parse(JSON.stringify(obj1))
obj2[0].childs = []
console.log(obj1, obj2)
// obj1, { name: '臧三', childs: ['小明', '小芳'] }
// obj2, { name: '臧三', childs: [] }
注意:此方法适用于简单数据结构,如果数据结构包含undefined,function, 并不会被拷贝
(2) 终极方法,递归实现
function extends (data) {
if (!data) { return false }
if( typeof data === 'object' ) {
let items = typeof data.length === 'number' ? [] : {}
for(let i in data) {
items[i] = extend(data[i])
}
return items
} else {
return data
}
}
var obj1 = [{
name: '臧三',
childs: ['小明', '小芳'],
fn: function(){},
age: undefined
}]
var obj2 = extends(obj1)
obj2[0].childs = []
console.log(obj1, obj2)
// obj1, { name: '臧三', childs: ['小明', '小芳'], age: undefined, fn: function(){} }
// obj2, { name: '臧三', childs: [], age: undefined, fn: function(){} }
本作品采用 知识共享署名-相同方式共享 4.0 国际许可协议 进行许可。