解构赋值是深拷贝吗?

最近在使用Redux想到一个问题,Redux里常用的一种语法是这样的:

setSth(state, { payload }) {
    const { newthing} = payload;
    return {
        ...state,
        newthing
    }
}

Redux通过解构赋值...state,保留了state里未修改的部分,并覆盖修改的部分,那么现在问题来了,这里的新对象通过解构得来的...state,是否是原来属性的引用赋值呢?

我们知道,如下情况:

let state = {a: 1, b: 2}
let state2 = state;
state2.a = 5;
// state.a === 5 => true

这里state2是state的一个引用赋值。 那么使用解构赋值生成一个新对象会如何呢?

let state = {a: 1, b: 2}
let state2 = { ...state }
state2.a = 5;
// state.a === 1 => true

通过实验可见,state2属性的修改并没有影响到state,所以这是一份拷贝,那么问题又来了,这个拷贝是只有一层的浅拷贝,还是递归进去的深拷贝呢,我直觉地认为是深拷贝,于是又做了一个实验:

let state = {a: {a1: 1, a2: 2}, b: 2}
let state2 = { ...state }
state2.a.a1 = 5;
// state.a.a1 === 5 => true

事实证明我的直觉错了,解构复制到全新对象里只是浅拷贝,对象里属性的属性还是对原来对象里属性的属性的一个引用,因为解构赋值可以生成一份浅拷贝,其实我们针对已知结构的对象也可以全部使用这个方法实现自己想要的拷贝。比如上例中:

let state = {a: {a1: 1, a2: 2}, b: 2}
let state2 = { ...state, a: { ...state.a } }

希望可以帮助大家。

原文链接:segmentfault.com

上一篇:closest() 方法获得匹配选择器的第一个祖先元素
下一篇:前端工具演变

相关推荐

  • 面试篇---1 如何区分深拷贝与浅拷贝

    如何区分深拷贝与浅拷贝? 简单来说,就是假设B复制了A,当修改A时,看B是否会发生变化,如果B也跟着变了,说明这是浅拷贝,拿人手短,如果B没变,那就是深拷贝,自食其力。

    1 年前
  • 重新梳理下js中的深拷贝和浅拷贝

    参考链接: http://www.cnblogs.com/stles...(http://www.cnblogs.com/stleslie/p/7128765.html) https://blog.c...

    1 年前
  • 通俗易懂理解ES6 - 变量的解构赋值

    引言 万丈高楼平地起,欲练此功,必先打好基本功: ) 编程语言总少不了变量赋值;ES6中引入了新的赋值形式:解构赋值;解构赋值大大的简化了变量赋值的代码,解构赋值仅能对具有迭代器(Iterator...

    9 个月前
  • 转行学前端的第 42 天 : 了解 ECMAScript 数据解构(二)

    我是小又又,住在武汉,做了两年新媒体,准备用 6 个月时间转行前端。 今日学习目标 昨天基于搜索基础学习了解构.所以今天继续学习对象解构,又是适合学习的一天,加油,小又又!!!! 基础用法 ...

    13 天前
  • 转行学前端的第 41 天 : 了解 ECMAScript 数据解构(一)

    我是小又又,住在武汉,做了两年新媒体,准备用 6 个月时间转行前端。 今日学习目标 昨天基于搜索来基础学习严格模式.所以今天就开始基础学习解构,又是适合学习的一天,加油,小又又!!!! 今天在...

    14 天前
  • 赋值左侧的JavaScript对象括号表示法({导航})

    Quentincaptainill(https://stackoverflow.com/users/19068/quentin)提出了一个问题:Javascript object bracket no...

    2 年前
  • 赋值、浅拷贝、深拷贝区别

    数据类型存储 基本类型数据保存在在栈内存中引用类型数据保存在堆内存中,引用数据类型的变量是一个指向堆内存中实际对象的引用,存在栈中。 为什么基本数据类型存在栈内存,引用数据类型存在堆内存? 基本数据...

    2 个月前
  • 谈谈深拷贝与浅拷贝

    前言 关于深拷贝和浅拷贝其实是两个比较基础的概念,但是我还是想整理一下,因为里面有很多小细节还是很有意思的。 深拷贝和浅拷贝的区别 深拷贝和浅拷贝是大家经常听到的两个名词,两者到底有什么不同...

    2 年前
  • 谈谈深拷贝、浅拷贝

    前提: 假设您已经知道为什么在JavaScript中需要深拷贝和浅拷贝了。 举两个例子: 在上面数组和对象中分别改变了 和 ,但是最后结果的得到和原来的值保持一致。

    7 个月前
  • 记笔记:一个因数组赋值引起的深拷贝、浅拷贝的学习

    前言 今天写业务的时候发现一个问题:两个嵌套对象的数组分别赋值为新的常量,常量push合并,原数组也会合并。 复现问题 问题原因 直接把原数组定义为常量,如const newArr1 = o...

    8 天前

官方社区

扫码加入 JavaScript 社区