Object.assign()深拷贝还是浅拷贝?

。。。 专栏收录该内容
16 篇文章 0 订阅

vue的编辑功能

 <el-button
                                size="mini"
                                @click="showEditView(scope.$index, scope.row)">编辑
                        </el-button><!--scope.$index是当前操作到第几行。scope.row是当前行json对象-->
<el-dialog
                title="修改职位"
                :visible.sync="dialogVisible"
                width="30%">
            <div>
                <div style="margin-bottom: 3px;">
                    <el-tag>职位名称</el-tag>
                    <el-input class="updatePosInput" size="small" v-model="updatePos.name"></el-input>
                </div>
                <div>
                    <el-tag style="margin-right: 10px;">是否启用</el-tag>
                    <el-switch
                            v-model="updatePos.enabled"
                            active-text="启用"
                            inactive-text="禁用">
                    </el-switch>
                </div>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button size="small" @click="dialogVisible = false">取 消</el-button>
                <el-button size="small" type="primary" @click="doUpdate">确 定</el-button>
            </span>
        </el-dialog>

在script进行处理的时候,开始是这样的
data里面有定义数据

updatePos: {
                    name: '',
                    enabled: false
                },

methods里面的方法先是这样写的

 showEditView(index, data) {
                this.updatePos - data;
                this.dialogVisible = true;
            },
            doUpdate() {
                this.putRequest("/system/basic/pos/", this.updatePos).then(resp => {
                    if (resp) {
                        this.initPositions();
                        this.updatePos.name = '';
                        this.dialogVisible = false;
                    }
                })
            },

但是发现在更改弹出的编辑框进行编辑的时候,当前行的数据也改变了
且点击取消按钮数据仍然是编辑的数据.
在这里插入图片描述
于是使用Object.assign()就可以解决这个问题

showEditView(index, data) {
                Object.assign(this.updatePos, data);
                this.dialogVisible = true;
            },

在这里插入图片描述

那么问题来了,记得之前我在学习js的时候
Object.assign()是浅拷贝啊,为什么我在修改数据的时候当前行数据就不变了呢?

Object.assign()是深拷贝还是浅拷贝?

Object.assign() 方法用于将所有可枚举属性的值从一个或多个源对象复制到目标对象。它将返回目标对象。

Object.assign()拷贝的是属性值。假如源对象的属性值是一个对象的引用,那么它也只指向那个引用。也就是说,如果对象的属性值为简单类型(如string, number),通过Object.assign({},srcObj);得到的新对象为深拷贝;如果属性值为对象或其它引用类型,那对于这个对象而言其实是浅拷贝的。

如何实现深拷贝?

1.用 JSON.stringify 把对象转换成字符串,再用 JSON.parse 把字符串转换成新的对象

但是需要注意的是
可以转成 JSON 格式的对象才能使用这种方法,如果对象中包含 function 或 RegExp 这些就不能用这种方法了。

2.Object.assign()拷贝

当对象中只有一级属性,没有二级属性的时候,此方法为深拷贝,但是对象中有对象的时候,此方法,在二级属性以后就是浅拷贝。

3使用递归的方式实现深拷贝

此外,通过jQuery的extend方法实现深拷贝,lodash.cloneDeep()实现深拷贝。

  • 9
    点赞
  • 3
    评论
  • 15
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

©️2021 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值