最近在写程序的时候发现,如果新建一个object对象objb,初始化值为obja,如果改变了objb对象的字段值,那么obja也会随之改变,看来对象赋值传递的是一个引用。

代码重现:

 <script>
var obja = {
'apple':{'key':'apple','name':'苹果'},
'banana':{'key':'banana','name':'香蕉'},
}; var objb = obja; console.log(obja);
delete(objb['apple']);
console.log(obja);
</script>

执行结果:

Object {apple: Object, banana: Object}
Object {banana: Object}

解决办法clone,生成一个新的对象,而不是对原对象的引用。

代码如下:

 <script>
function clone(obj) {
var o;
if (typeof obj == "object") {
if (obj === null) {
o = null;
} else {
if (obj instanceof Array) {
o = [];
for (var i = 0, len = obj.length; i < len; i++) {
o.push(clone(obj[i]));
}
} else {
o = {};
for (var j in obj) {
o[j] = clone(obj[j]);
}
}
}
} else {
o = obj;
}
return o;
} var obja = {
'apple':{'key':'apple','name':'苹果'},
'banana':{'key':'banana','name':'香蕉'},
}; var objb = clone(obja); console.log(obja);
delete(objb['apple']);
console.log(obja);
</script>

执行结果:

Object {apple: Object, banana: Object}
Object {apple: Object, banana: Object}

纯文字:

最近在写程序的时候发现,如果新建一个object对象objb,初始化值为obja,如果改变了objb对象的字段值,那么obja也会随之改变,看来对象赋值传递的是一个引用。

代码重现:

<script>
var obja = {
'apple':{'key':'apple','name':'苹果'},
'banana':{'key':'banana','name':'香蕉'},
};

var objb = obja;

console.log(obja);
delete(objb['apple']);
console.log(obja);
</script>

执行结果:

Object {apple: Object, banana: Object}
Object {banana: Object}

解决办法clone,生成一个新的对象,而不是对原对象的引用。

代码如下:

<script>
function clone(obj) {
var o;
if (typeof obj == "object") {
if (obj === null) {
o = null;
} else {
if (obj instanceof Array) {
o = [];
for (var i = 0, len = obj.length; i < len; i++) {
o.push(clone(obj[i]));
}
} else {
o = {};
for (var j in obj) {
o[j] = clone(obj[j]);
}
}
}
} else {
o = obj;
}
return o;
}

var obja = {
'apple':{'key':'apple','name':'苹果'},
'banana':{'key':'banana','name':'香蕉'},
};

var objb = clone(obja);

console.log(obja);
delete(objb['apple']);
console.log(obja);
</script>

执行结果:

Object {apple: Object, banana: Object}
Object {apple: Object, banana: Object}

done!

js object对象赋值bug和对象复制clone方法的更多相关文章

  1. vue A对象赋值给B对象,修改B属性会影响到A问题

    实际在vue中  this.A = this.B,没有进行深层赋值,只是把this.A的地址指向了与this.B相同的地址,所有对于A的修改会影响到B. 解决相互影响的思路是在this.A必须是新建的 ...

  2. vuex中怎么把‘库’中的状态对象赋值给内部对象(三种方法)

    一.通过computed的计算属性直接赋值 import store from '@/store/store' export default{ name: 'count', data(){ retur ...

  3. DI,依赖注入,给对象赋值 ,get,set

    DI,依赖注入,给对象赋值 ,get,set给对象赋值 2种方式:1.get.set默认无参构造方法给对象赋值 2.xml中有参构造器方法给对象赋值

  4. queryRuner如何获得bean对象,当这个bean对象中包含其他对象的时候

    我们知道我们可以使用dbutil的QueryRunner下的query方法使用BeanHandler得到bean对象 但是,当我们在一个表和另一个表关联的时候,往往喜欢将另一个表的关联字段变成另一个b ...

  5. Cloneable接口和Object的clone()方法

    为什么要克隆 为什么要使用克隆,这其实反映的是一个很现实的问题,假如我们有一个对象: public class SimpleObject implements Cloneable { private ...

  6. js object(对象)

    http://www.cnblogs.com/pingchuanxin/p/5773326.html Object(对象)是在所有的编程语言中都十分重要的一个概念,对于事物我们可以把他们看作是一个对象 ...

  7. JS object(对象)的学习汇总

    Object(对象)是在所有的编程语言中都十分重要的一个概念,对于事物我们可以把他们看作是一个对象,而每一个事物都有自己的表示的属性和对于某一信息作出的相应的操作.而这些东西就变成了事物的属性和方法. ...

  8. c# 把一个匿名对象赋值给一个Object类型的变量后,怎么取这个变量? c# dynamic动态类型和匿名类 详解C# 匿名对象(匿名类型)、var、动态类型 dynamic 深入浅析C#中的var和dynamic

    比如有一个匿名对象,var  result =......Select( a=>new {  id=a.id, name=a.name});然后Object  obj =  result ;我怎 ...

  9. Object.assign()和解构赋值:给对象赋值的两种方法

    一.Object.assign()方法给对象赋值 Object.assign() 方法用于将所有可枚举属性的值从一个或多个源对象分配到目标对象.它将返回目标对象. 拷贝的是属性值 如果目标对象中的属性 ...

随机推荐

  1. OC 归档和解档

    #import <Foundation/Foundation.h> #define PATH @"/Users/mac/Desktop/file.txt" int ma ...

  2. JavaScript学习总结(十八)——JavaScript获取浏览器类型与版本

    从网上找到一段使用JavaScript判断浏览器以及浏览器版本的比较好的代码,在此记录一下: 1 <script type="text/javascript"> 2 v ...

  3. PHP:第四章——PHP数组处理函数

    <pre> <?php //数组处理函数 header("Content-Type:text/html;charset=utf-8"); //compact(); ...

  4. URAL 1934 最短路变形

    DES:给出起点和终点.给出所有小岛的编号.所有路径的起始点.和遇到怪物的概率.要求在最短路的条件下维护遇见怪物的概率最小的路径.就是用 SPFA算法.每条路的权值设为1.最短路即为途径的岛数最少.同 ...

  5. SQL Server 调优系列进阶篇 - 如何索引调优

    前言 上一篇我们分析了数据库中的统计信息的作用,我们已经了解了数据库如何通过统计信息来掌控数据库中各个表的内容分布.不清楚的童鞋可以点击参考. 作为调优系列的文章,数据库的索引肯定是不能少的了,所以本 ...

  6. SpringMVC(二)传值

    1.HelloController.java 通过model.addAttribute(key,value)进行传值 package zttc.itat.controller; import org. ...

  7. 【LeetCode 234_链表】Palindrome Linked List

    ListNode* ReverseList(ListNode *p) { if (p == NULL || p->next == NULL) return p; ListNode *pre = ...

  8. git误提交了项目文件和配置文件的恢复方法

    参考链接:https://my.oschina.net/yangfuhai/blog/708704

  9. 修改已经创建的docker容器的端口映射

    原始链接:https://stackoverflow.com/questions/19335444/how-do-i-assign-a-port-mapping-to-an-existing-dock ...

  10. vue-cli 添加less 以及sass

    1.sasscnpm i node-sass --save-dev cnpm i sass-loader --save-dev2.less npm install less --save-dev np ...