Angular Js对象的拷贝复制

前言

https://www.cnblogs.com/panrui1994/p/9378696.html

Angular 在进行对象的赋值的时候，假如你直接使用 “=” 赋值，那么当这个你这个赋值后的对象里的属性改变的时候，源对象也会相应的改变。所以如果不想源对象的属性也改变，这就需要进行深拷贝了，下面介绍四种比较方便的深拷贝方法

第一种JSON.parse(JSON.stringify(obj))

缺点：对象必须遵从JSON格式

var obj1 = {name:'张三'
}
//obj1 是源对象
var obj2 = JSON.parse(JSON.stringify(obj1));
//obj2 是拷贝后的对象obj2.name = '李四';
console.log(obj1);  //{name:张三}
console.log(obj1 === obj2); //false
// 缺点：对象必须遵从JSON格式
var obj1 = {a: '1',b: '2',c: function func() {}
};
var obj4 = JSON.parse(JSON.stringify(obj1));
console.log(obj4) //{ a: '1', b: '2' }

第二种Object.assign(target, …sources)

缺点：IE下报错，不存在次方法

// 方法用于将所有可枚举的属性的值从一个或多个源对象复制到目标对象。它将返回目标对象// 复制
let c = Object.assign({}, { a: '1' });
console.log(c); // { a: '1' };//合并
let a = {};
let b = Object.assign(a, { a: '1' }, { b: '2' }, { c: '3' } );
console.log(b) // { a: '1', b: '2', c: '3' };//如果对象本身存在的属性会更新,不存在的属性会增加
var a = {a:'1'};
var b = {a:'2', b:1};var c = Object.assign(a, b);
console.log(a);    //{a:'2',b:'1'}
console.log(b);//{a:'2',b:'1'}
console.log(c);//{a:'2',b:'1'}

第三种迭代递归法 for…in

缺点： func、date、reg 和 err 并没有复制成功，因为它们有特殊的构造函数。

//拷贝对象
var test = {num: 0,str: '',boolean: true,unf: undefined,nul: null,obj: {name: '我是一个对象',id: 1},arr: [0, 1, 2],func: function() {console.log('我是一个函数')},date: new Date(0),reg: new RegExp('/我是一个正则/ig'),err: new Error('我是一个错误')
}function deepClone(obj) {//判断传进来的是对象还是数组var isArray = Array.isArray(obj)  var cloneObj = isArray ? [] : {}//通过for...in来拷贝for (let key in obj) {cloneObj[key] = isObject(obj[key]) ? deepClone(obj[key]) : obj[key]}return cloneObj
}
console.log(deepClone(test))

第四种迭代递归法 Reflect（跟第三种类似效果也一样）

缺点： func、date、reg 和 err 并没有复制成功，因为它们有特殊的构造函数。

//拷贝对象
var test = {num: 0,str: '',boolean: true,unf: undefined,nul: null,obj: {name: '我是一个对象',id: 1},arr: [0, 1, 2],func: function() {console.log('我是一个函数')},date: new Date(0),reg: new RegExp('/我是一个正则/ig'),err: new Error('我是一个错误')
}function deepClone(obj) {if (!isObject(obj)) {throw new Error('obj 不是一个对象！')}let isArray = Array.isArray(obj)let cloneObj = isArray ? [...obj] : { ...obj }Reflect.ownKeys(cloneObj).forEach(key => {cloneObj[key] = isObject(obj[key]) ? deepClone(obj[key]) : obj[key]})return cloneObj
}
console.log(deepClone(test))

Angular Js对象的拷贝复制相关推荐

JS对象拷贝：深拷贝和浅拷贝
摘要:对象拷贝,简而言之就是将对象再复制一份,但是,复制的方法不同将会得到不同的结果. 本文分享自华为云社区<js对象深浅拷贝,来,试试看!>,作者: 北极光之夜.. 一.速识概念: 对象 ...
Objective-C：OC内部可变对象和不可变对象的深(复制)拷贝问题思考：
OC内部:可变对象和不可变对象的深(复制)拷贝问题思考: 不可变对象: 例如NSString对象,因为NSString对象是常量字符串,所以,不可以更改其内容,但是可以修改指向该字符串的指针指向.当对 ...
Java提高—对象克隆（复制）/对象属性拷贝
对象克隆(复制)假如说你想复制一个简单变量.很简单: int apples = 5; int pears = apples; 不仅仅是int类型,其它七种原始数据类型(boolean,char,byt ...
js的数组和对象的多种复制和清空, 以及区分JS数组和对象的方法
js的数组和对象的多种"复制"和"清空", 以及区分JS数组和对象的方法一.数组清空与复制方法 1.数组清空的方法 var a = [1,2,3]; a.le ...
对象的深度复制和浅复制（深度拷贝和浅拷贝）
对象的深度复制和浅复制 (深度拷贝和浅拷贝) 作者:邓家海时间:2018年2月11日 21:46:22 我们在实际的开发项目里面为了使得开发更加的便捷和方便,总会不经意的使用一些第三方的持久化框架( ...
从JS对象开始，谈一谈“不可变数据”和函数式编程
文章转载自:https://segmentfault.com/a/1190000008780076 作为前端开发者,你会感受到JS中对象(Object)这个概念的强大.我们说"JS中一切皆对 ...
JS中深浅拷贝函数封装代码
一.了解基本数据类型保存在栈内存中,按值访问,引用数据类型保存在堆内存中,按址访问. 二.浅拷贝浅拷贝只是复制了指向某个对象的指针,而不是复制对象本身,新旧对象其实是同一内存地址的数据,修改其中一 ...
jQuery学习笔记系列（三）——事件注册、事件处理、事件对象、拷贝对象、多库共存、jQuery插件、toDoList综合案例
day03 - jQuery 学习目标: 能够说出4种常见的注册事件能够说出 on 绑定事件的优势能够说出 jQuery 事件委派的优点以及方式能够说出绑定事件与解绑事件能够说出 jQuery ...
Angular.js为什么如此火呢？
AngularJS学习列表:七步走 Angular.js 从菜鸟到专家 (系列列表) 上一篇之后,Angular.js 是一个MV*(Model-View-Whatever,不管是MVC或者MVVM ...

Angular Js对象的拷贝复制

前言

第一种JSON.parse(JSON.stringify(obj))

第二种Object.assign(target, …sources)

第三种迭代递归法 for…in

第四种迭代递归法 Reflect（跟第三种类似效果也一样）

Angular Js对象的拷贝复制相关推荐

最新文章

热门文章