var obj = { name: , job: } var copyObj = Object.assign({}, obj); copyObj.name = ; console.log(obj); // {name: "彭湖湾", job: "学生"} console.log(copyObj); // {name: "我才不叫彭湖湾呢! 哼 (。`ω´)", job: "学生"}
Object.assign:用于对象的合并,将源对象(source)的所有可枚举属性,复制到目标对象(target),并返回合并后的target
用法: Object.assign(target, source1, source2); 所以 copyObj = Object.assign({}, obj); 这段代码将会把obj中的一级属性都拷贝到 {}中,然后将其返回赋给copyObj
3.ES6扩展运算符:
var obj = { name: , job: } var copyObj = { ...obj } copyObj.name = console.log(obj.name) // 彭湖湾 console.log(copyObj.name) // 我才不叫彭湖湾呢! 哼 (。`ω´)
扩展运算符(...)用于取出参数对象的所有可遍历属性,拷贝到当前对象之中
对多层嵌套对象,很遗憾,上面三种方法,都会失败:
var obj = { name: { firstName: , lastName: }, job: } var copyObj = Object.assign({}, obj) copyObj.name.lastName = ; console.log(obj.name.lastName); // 湖水的小浅湾 console.log(copyObj.name.lastName); // 湖水的小浅湾
拷贝所有层级
有没有更强大一些的解决方案呢?使得我们能够
1.不仅拷贝第一层级,还能够拷贝数组或对象所有层级的各项值
2. 不是单独针对数组或对象,而是能够通用于数组,对象和其他复杂的JSON形式的对象
请看下面:
下面这一招可谓是“一招鲜,吃遍天”
1.JSON.parse(JSON.stringify(XXXX))
var array = [ { number: 1 }, { number: 2 }, { number: 3 } ]; var copyArray = JSON.parse(JSON.stringify(array)) copyArray[0].number = 100; console.log(array); // [{number: 1}, { number: 2 }, { number: 3 }] console.log(copyArray); // [{number: 100}, { number: 2 }, { number: 3 }]
能用大招杀的就不要用q杀嘛!!
2.手动写递归
你说啥? 你说上面的那种方法太无脑, 一定要自己写一段递归才有做技术的感觉? OK成全你!
var array = [
{ number: 1 },
{ number: 2 },
{ number: 3 }
];
function copy (obj) {
var newobj = obj.constructor === Array ? [] : {};
){
return;
}
for(var i in obj){
newobj[i] = ?
copy(obj[i]) : obj[i];
}
return newobj
}
var copyArray = copy(array)
copyArray[0].number = 100;
console.log(array); // [{number: 1}, { number: 2 }, { number: 3 }]
console.log(copyArray); // [{number: 100}, { number: 2 }, { number: 3 }]
【注意】:上文的所有的示例都忽略了一些特殊的情况: 对对象/数组中的Function,正则表达式等特殊类型的拷贝
存在大量深拷贝需求的代码——immutable提供的解决方案